[Node] Node / TS 프로젝트 생성

기본 폴더 구조

 

client 폴더 : 프런트엔드 단 구현

server 폴더 : 백엔드 단 구현

 

---

 

[client]

 

기본 구조 생성 명령어 :  npx create-next-app 

 

 

 

 

---

 

[server]

 

✏️ 기본 구조 생성 명령어 :  npm init 

 

명령어 실행 시 package.json 파일 자동 생성

 

 

✏️ 모듈 설치 명령어

 npm install morgan nodemon express --save 

 npm install typescript ts-node @types/node @types/express @types/morgan --save-dev 

 

nodemon	서버 코드 변경 시 재시작 없이 반영 확인 가능
ts-node	Node.js 에서 TypeScript Compiler 통하지 않고 직접 Ts 실행
morgan	Node.js에서 사용되는 로그 관리 미들웨어
@types/express  @types/node	Express 및 Node.js에 대한 Type 정의에 도움

 

--save : 실제 서버에 필요한 모듈을 설치 > package.json/dependencies

--save-dev : 개발 환경에서만 필요한 모듈 설치 명령어 flag > package.json/devDependencies

 

 

---

 

 

nodemon과 ts-node를 활용해 서버를 시작하는 scripts 코드 작성

 

ts-node로 JS 언어로 변환 > nodemon으로 서버 실행

 

 

---

 

 

최종 package.json 파일 코드

TypeScript Compiler ?

TypeScript를 브라우저에서 실행시키려면 JavaScript 코드로 변환하여 수행되어야 한다.
(TS 만으로는 실행 불가)
>> TS는 JS와 같이 언어의 변환이 필요 없는 인터프리터 언어가 아닌, 변환이 필요한 컴파일 언어이기 때문

참고 : https://jinnycoding.tistory.com/94

 

 

---

 

TS 설정

✏️ tsconfig.json 파일 생성

TS로 작성한 코드를 JS 언어로 컴파일하는 옵션을 설정하는 파일

 npx tsc --init 

 

 

tsconfig.json 파일이 생성되며, 설정할 수 있는 옵션들과 설명이 작성되어 있음