nodejs react 프로젝트 기본 구조 구성 및 설치

 

0. 프로젝트 구조 구성

nodeJS, mongoDB, react를 이용하여 회원가입, 로그인, 게시판 등을 구현하기 위한 구조를 먼저 기획한다.

 

 

이제, VSCode 터미널을 열고 기본 세팅 작업 시작!.

 

 

1. 프로젝트에 backend와 frontend 디렉터리 생성

mkdir backend frontend

 

 

 

각자 방식이 있겠지만 크게 backend와 frontend를 구분해서 개발을 하게 되면 효율적으로 관리할 수 있다.

 

 

2. backend 초기화

cd backend
npm init -y

 

init할 때 -y 옵션을 넣으면 아래처럼 기본으로 적용되어 package.json 파일이 생성된다.

이 파일은 아래 정보 관리부터 앞으로 설치되는 패키지 까지 한 눈에 관리할 수 있게 해주므로 중요하다.

 

 

 

3. backend에 필요한 패키지 설치 

npm i express mongoose cors dotenv bcryptjs jsonwebtoken

 

정해진 것은 아니고 필요에따라 하면 된다.

 

express : 백엔드 웹 서버 

mongoose : MongoDB 연결 및 스키마 관련 라이브러리

cors : 프론트와 백의 포트를 다르게 쓸 때 CORS 오류 방지

dotenv : 환경 변수 사용

bcryptjs : 비밀번호 해싱 및 검증 라이브러리

jsonwebtoken : 클라이언트와 서버간의 인증

 

 

만약 기존에 nodemon이 전역으로 설치되어 있지 않다면 설치해준다. (서버 자동 재시작)

npm install --save-dev nodemon

 

 

 

4. frontend에 react 설치

cd ../frontend
npx create-react-app@latest .

 

create-react-app설치가 잘 안된다면 여기 확인.

진행 중에 Ok to proceed? (y) 나오면 y를 입력하면 된다.

 

완료되었다면 아래처럼 backend와 frontend 디렉터리에 여러 파일들이 생성된다.

 

 

 

프로젝트 개발에 들어가기 위한 가장 기본적인 작업이 완료되었다. 이제, 이 구조 안에 필요한 폴더와 파일들을 구성해둔대로 만들면 된다.