프로젝트 세팅

https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A0%88%EB%94%A7/dashboard

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS) - 인프런 | 강의

 

Next.js, nod-exoress, typeorm, postgres,docker의 전반적인 흐름을 파악하기 위한 클론 코딩

 

 

NextJS Typescript를 이용한 프론트엔드 구현하기

 

강의에 맞는 버전 nextjs 다운

npx create-next-app@12.1.4 --typescript client

 

Node.js Express Typescript 를 이용한 백엔드 구현하기

 

npm install morgan nodemon express --save

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

ts-node :  node.js 상에서 타임스크립트 컴파일러를 통하지 않고 직접 TS를 실행시킨다.

 

@types/node @types/express @types/morgan : type을 사용하는데 도움

 

tsconfig.json 파일 생성

ts로 짜진 파일을 js로 컴파일하는 옵션을 성정하는 파일

ts 컴파일은 tsc 라는 명령어를 사용

npx tsc --init

server.js 코드 작성

 

도커를 이용한 Postgres 실행

 

dockercompose.yml 파일 생성

실제로 로컬에서 postgres를 설치해서 사용하는것이 아니라 도커로 사용하는것이다.

실제 로컬에서 설치를 했으면 var/lib/postgresql/data 이 경로에 있는 데이터들을 사용하지만

도커를 사용하기 때문에  컨테이너상의 저 경로에 있는 데이터들을 사용한다.

 

volumes을 사용하는 이유 : 

도커 컨테이너를 없애면 해당 데이터들이 다 없어지기 떄문에 로컬에서도 데이털르 저장하게 한다 !

 

docker-compose up

data 폴더가 생기는것을 확인

 

 

 

데이터베이스와 애플리케이션 연결

npm install pg typeorm reflect-metadata --save

pg : PostgreSQL 데이터베이스와 인터페이스하기 위한 NodeJS 모듈 모음

 

reflect-metadata : 데코레이터를 사용하는데 도움을 줌

 

npx typeorm init

그럼 위와 같은 폴더와 파일들이 생긴다.

 

data-source에서 필요한 설정을 한다.

 

백엔드 실행 시 데이터베이스 연결