Express 공식 문서 사이트
자료 다운
npm i 실행으로 치
package.json 있는 경로까지 이동해서
npm i 명령어를 실행한다.
툴 설명
package.json 파일 내부
@types/node
node 라는 자바 스크립트 런타임의 타입을 가져오는 역할
tsc
typeSciprt 컴파일러
tsc-watch
계속 파일을 지켜보며 변경을 감지하는 도구
npm run start :dev 로 해당 툴 실행하면
이 명령어를 실행하게 된다. tsc 와치를 하다가 성공하면 다음 명령어를 실행하겠다는 뜻
즉, 다음 명령어인 dist폴더 내부의 app.js를 실행하겠다는 뜻
dist
tsconifg.json에서 complieOptions에 설정된 옵션대로 컴파일을 마치게 되면 dist 라는 폴더가 생기게 된다.
이 폴더 안에는 typescript를 컴파일해서 나온 결과물인 javascript 파일들이 다 있는 곳이다.
이 파일들을 node를 통해서 실행시키게 되는 것.
start
npm run start 를 하게 되면 항상 pre-start가 사전 실행이 된다.
prestart가 되면 자동으로 tsc를 빌드를 하게 된다. 이 tsc는 루트 디렉토리에 있는 tsconfig.json을 참조하여 옵션에 맞게 컴파일 해서 그 결과물을 노드를 통해서 실행하게 되는 것
npm run start:dev
위 명령어를 계속 실행하게 될것, 그렇게 되면 실행시마다
src 폴더를 모두 컴파일 하고 그리고 그 결과를
dist 로 옮기고 그 내부의 app.js를 실행시키게 되는 것
그래서 src 내부에 app.ts 에 코드변경이 일어나게 되면 자동으로 tsc.watch가 발동이 되어 콘솔에 찍히게 된다.
Express 설치
// express 설치 명령어
npm i express
JavaScript
복사
위에 설치 명령어를 실행하면 express 설치 완료
설치가 잘 되었다면 이렇게 dependencies로 express가 추가 된 것이 확인 가능하다.
devDependencies 와 dependencies의 차이점??
devDependencies에서는 개발할 때 필요한 툴을 사용하기 위해서 주입하는 거고 production모드에서는 따로 의존성을 사용하기 위해서 분리.
@types/express
express위에서 우린 javascript가 아니라 typescript를 사용할 것이기 때문에 이것을 설치 해야된다.
npm i @types/express -D
JavaScript
복사
typescript 설치 명령어
여기서 D가 붙은 이유는 우린 컴파일된 결과물을 사용해야 되고, 그 설정이 devDependencies에 있기 때문이다.
설치가 완료 되면 이렇게 typescript가 추가 된 것을 확인할 수 있다.
Type Script 사용하기
src >> app.ts 에 아래 코드를 덮어 씌운다.
아래 코드는 공식 문서에 있는 hello world 코드
Hello World 코드
현재 이 문법은 javascript문법이기 때문에 typescript문법으로 변경해줘야 된다.
이렇게 typescript문법으로 변경한다, 이걸 실행시키기 위해서 아래 명령어를 실행한다.
npm run start:dev
JavaScript
복사
위의 명령어로 스크립트를 실행한다.
그럼 이렇게 찍히는 것을 확인할 수 있다.
localhost:8000 번을 들어가보면 hello world를 확인할 수 있다.
코드 구조 분석
src > app.ts 파일 내부 모습
app :
express의 객체라고 생각하면 된다.
port :
서버를 돌릴 포트를 8000번으로 설정
라우팅 :
서버의 / URI로 들어오는 GET 요청의 로직을 처리하는 메소드
req를 console에 찍어보면 아래와 같다.
res.send에서 어떤 데이터를 응답할건지 정할 수 있다.
console.log(req) 청에 담겨있는 정보
포트 리스닝 :
여기서 해당 서버를 열어주겠다라는 뜻이다. port는 8000번으로 설정