What I studied

윈도우에서 개발한 파일을 리눅스 서버에 올려야했는데, 문제는 윈도우에서 리눅스 서버로 파일을 어떻게 전송하는가... 처음에는 막막해서 파일전송 명령어 등 이것저것 엄청 많이 검색해봤다. 그러다가 단순하게 생각해보니 예전에 스파르타코딩클럽 웹개발 종합반 강의에서 aws 서버에 파일을 올리게 도와주었던 파일질라가 생각났다. 그래서 오늘은 파일질라 대신 WinSCP라는 오픈소스 프로그램을 사용해봤다. 이 프로그램은 로컬 컴퓨터와 원격 컴퓨터 간에 파일을 안전하게 공유할 수 있도록 해주는 것 같다. 오픈소스 기반이라 통신에 대한 보안에 믿음이 가고 사용자가 사용하기 쉽도록 직관적이어서 파일 관리를 손쉽게 할 수 있다는 장점이 있다. 실제로 사용해보니 진짜 편했다. 1. WinSCP 설치하기 설치도 어렵지 않다...

추후 백엔드에서 GraphQL API를 사용할지 REST API를 사용할지 아직 확정이 나지 않은 상태여서 각각의 차이에 대해 알아보고 Apollo Client 를 테스트하기 위해 간단하게 Apollo Server를 만들어보았다. Apollo Server에서 원하는 데이터를 받아오기 위해 서버를 만든 후, 임시 json 데이터를 넣어주었다. 1. 작업 폴더 생성 후 package.json setup 우선, sever만 따로 작업할 폴더를 만들어주었고, 이 안에서 npm을 사용할 수 있도록 기초적인 셋팅을 해주었다. # 폴더생성 및 package.json setting mkdir server cd server npm init -y 2. apollo-server, graphql, nodemon 설치 apol..

REST API의 버튼은 URL, GraphQL API의 버튼은 1. REST API REST API와 GraphQL API는 요청 방식에서 차이가 있다고 할 수 있다. 즉, 통신을 하기 위해 요청하는 방식이 조금 다른 것 뿐이다. REST API는 URL을 이용해 원하는 곳에서 원하는 데이터 목록을 불러올 수 있도록 만들어져 있기에 각각의 원하는 URL로 요청을 보내 응답받는다. 그렇기 때문에 예측가능한 것들이 많다. nomadmovies.co/api/movies // 영화 전체 목록 조회 nomadmovies.co/api/movies/1 // 1번 아이디를 가진 영화 조회 REST API는 HTTP 요청 메서드랑 같이 사용할 수 있는데 각각의 메서드에 따라 URL로 접속하여 수행할 수 있는 것들이 다..

프론트에서 간단하게 api 테스트를 하기 위해 노드 서버를 사용했는데, 노드몬을 사용해 node 서버를 띄울 예정이었다. 먼저 노드 서버를 세팅할 폴더를 만들어준 후 그 안에서 서버를 세팅할 예정. 이렇게 하면 최종 api가 나오기 전에 미리 테스트를 해볼 수 있어 좋은 것 같다. 1. 폴더 만든 후 npm 셋팅 먼저 폴더를 만들어준 후, 해당 경로 안에서 npm init -y를 입력해주면 node_modules 폴더가 생성된다. 그 후, npm install을 실행하면 package.json 파일까지 생성된다. $ mkdir nodeServer $ cd nodeServer $ npm init -y $ npm install node_modules와 package.json가 생성되었다면 express와 n..

개발을 하다보면 input value값을 받을 때 프론트단에서 어느정도 걸러줘야할 필요가 있는데 그 때 유효성 검사에서 많이 사용하는 것이 정규표현식인 것 같다. 그냥 보기엔 어려워보이지만 어떤 표현인지를 알고 사용하면 내가 원하는대로 조합할 수 있는 것 같아 자주 쓰이는 정규식을 정리해보고자한다. 정규식을 사용하면 해당 조건에 따라 true, false를 반환하여 유효성 검사가 가능해진다. 정규식은 아래와 같이 조합하여 사용하면 되는데 예제를 통해 하나씩 살펴보려고 한다. / 01([0|1|6|7|8|9])([0-9]{3,4})([0-9]{4}) / i 시작 기호 조합하여 사용할 패턴 종료 기호 패턴변경자 1. 이메일 유효성 검사 const email = "" const regEmail = /^[0-9..

보통 jsp 작업은 eclipse로 많이 한다고 하는데, 나는 이클립스를 써보지 않았고 평소 vscode를 사용하기에 vscode로 작업환경을 구성했다. 먼저 jsp를 띄워줄 WAS서버가 필요하기에 java와 Tomcat 설치를 마쳐야한다. 해당 내용은 곧 추가할 예정. VSCODE 확장 프로그램 설치 톰캣까지 설치를 마친 후, vscode에서 필요한 확장 프로그램 두가지를 설치해줘야하는데 찾아본 바로는 Debugger for Java, Tomcat for Java를 설치하라고 한다. 그래서 vscode에 검색을 해봤더니 Tomcat for Java는 서비스가 종료된 듯 하다. 그래서 어떻게 해야하는지 찾아보다가 Community Server Connectors를 사용하게 되었다. Tomcat for J..

1. Object 생성자 함수란? new 연산자와 Object 생성자 함수로 객체를 생성할 수 있는데 Object 생성자 함수를 이용하면 빈 객체를 리턴한다. const info = new Object(); // 빈 객체의 생성 info.name = 'Lia'; info.sayHello = function() { console.log(`Hi! My name is ${this.name}`); }; console.log(info); // {name: "Lia", sayHello: f} info.sayHello(); // Hi! My name is Lia 2. 생성자 함수란? new 연산자와 함께 호출되어 객체(인스턴스)를 생성하는 함수로 일반 함수와 같은 방법으로 정의하고 new 연산자와 함께 호출한다. 생..

실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념으로 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있다. 이에 따라 호이스팅, 클로저, 스코프 등의 개념 등을 이해할 수 있게 된다. 실행 가능한 코드(소스 코드) 전역코드 : 전역에 존재하는 코드 함수코드 : 함수 내에 존재하는 코드로 지역 스코프를 생성하고 지역변수, 매개변수 등을 관리한다. Eval 코드 : strict mod에서 자신만의 독자적인 스코프 생성 모듈 코드 : 모듈별로 독립적인 모듈 스코프 생성 해당 4가지의 실행 가능한 코드를 평가하여 실행 컨텍스트를 생성한다. 소스코드는 실행되기 이전에 평가 과정을 거치며 평가와 실행 두가지 단계로 나뉜다고 볼 수 있다. 렉시컬 환경 렉시컬 환경은 환경레코드, 외부렉시컬..

fultter를 사용하기 위해 이것저것 셋팅하는데 하루가 다 간 것 같은데 flutter 설치 후, Android studio, XCode 설치까지 마무리했다. XCode는 엄청 오래걸릴거라고 해서 걱정했는데 예상과는 달리 15분 안에 설치가 끝난 것 같다! 문제는 그 이후...! 설치가 거의 다 완료되었을 때 homebrew를 설치하기 위해 해당 명령어를 입력했다. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 그 후, password를 입력하고 enter를 치라고 해서 enter까지 치고 기다렸는데 head is now at e76c55e18 merge pull reques..

스파르타 1억 챌린지가 시작되면서 웹개발 종합반 다음으로 앱개발 종합반 강의를 수강해보기로 했다. React-native와 함께 크로스 플랫폼 앱을 개발할 수 있도록 하는 것이 Flutter! 요즘 핫하다는 이야기는 많이 들어왔기 때문에 나만의 앱을 만들어보고 싶어 시작했다. 앱 개발 방법은 크게 두가지로 나눌 수 있는데 네이티브 앱과 크로스 플랫폼 앱으로 나뉜다. 네이티브 앱은 Android와 IOS로 나누어 개발을 해야하는데 Android는 Kotlin, IOS는 Swift라는 언어를 통해 개발한다. 반면에 크로스 플랫폼 앱은 하나의 코드로 Android와 IOS를 둘 다 개발할 수 있게 해준다. React-native는 javascript, Flutter는 Dart라는 언어를 사용한다. 스파르타 앱..