React + node.js 프로젝트 세팅

요약된 부분만 읽으셔도 개발 자체에는 영향을 주지 않습니다!

🥗 요약

frontend의 경우 create-react-app을 이용하여 typescript 템플릿을 받았습니다.
backend의 경우 우선은 express.js, nodemon을 이용했습니다.
ESLint + Prettier 설정은 aribnb의 컨벤션을 가져왔습니다!

개발시 가이드

npm install로 필요한 모듈들을 먼저 받아주세요!
- food-management > npm install
- food-management/client > npm install (Frontend개발시)
frontend개발시 최상단 디렉토리에서 npm run dev 스크립트를 실행해주세요!
backend서버 개발시 최상단 디렉토리에서 npm start 혹은 npm run server 스크립트를 실행해주세요!

우선 빈 디렉토리를 만들었습니다. 이름은 임의로 food-management 로 생성하였답니다!

이제부터 협업을 위한 프로젝트 셋팅을 시작합니다!

👀 디렉토리 구조 훔쳐보기

아마 세팅을 마친 후 디렉토리 구조는 이렇게 생겼을 거예요

food-management
- client (frontend)
  - react files…
- server (backend)
  - router
    - api files…
  - index.js…

client에는 cra로 만든 react app이 들어갈 거구요,

server에는 백엔드에 필요한 코드들이 들어갈 거예요.

이제 진짜 빈파일부터 시작해봅시다!

🍄 frontend 설정

먼저 client 디렉토리를 작업해보겠습니다!

food-management 디렉토리에서 cra 명령어를 입력해주었어요. client라는 이름의 app을 생성했습니다!

npx create-react-app client --template typescript

터미널에서 cd ./client 후 npm start 를 하면 리액트 앱이 실행되고 로고가 뱅글뱅글 돌아가는 걸 볼 수 있답니다!

🥑 backend 설정

cra는 편리한 기능들이 cra 자체에 많이 깔려 있지만 backend의 경우에는 편의성을 위해 몇가지 기능을 직접 깔아주어야 해요. 설치한 모듈들에 대해서 간단히 소개해볼게요!

nodemon

개발시 변경사항을 실시간으로 업데이트 해주는 모듈이에요

npm install nodemon --dev

concurrently

리액트 서버와 노드 서버를 동시에 실행시키기 위한 모듈이에요

npm install concurrently

💬 script들을 정리해봤어요

그리고서는 각 서버들을 실행하기 위한 스크립트를 정리했답니다.

{
  "name": "food-management",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
		// 여기를 주목!
    "start": "nodemon server/index.js",
    "server": "nodemon server/index.js",
    "client": "cd client && npm start",
    "dev": "concurrently \\"npm run server\\" \\"npm run start --prefix client\\"",
		// 테스트 서버는 일단 넘어가요
    "test": "echo \\"Error: no test specified\\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^7.2.2",
    "express": "^4.18.1",
    "nodemon": "^2.0.16"
  }
}

위에서부터 볼까요?

최상위 food-management 디렉토리에서 아래와 같은 명령어를 입력할 수 있어요.

npm start

nodemon에 의해서 서버측 코드가 실행되네요.

npm run server

마찬가지로 서버 코드가 실행되는 스크립트입니다. index.js가 실행될 겁니다!

npm run client

말 그대로 클라이언트(react app)만 실행됩니다.

(직접 제작한 스크립트라서 그런 걸까요? 실행할 땐 run을 붙여주어야 해요.)

글고 글고 가장 중요한 npm run dev ✨

우선 프론트엔드의 경우 npm run dev 를 이용하여 개발할 거예요. 왜냐면 해당 스크립트를 보면

서버 실행 후 ⇒ 클라이언트가 실행되는 절차를 한번에 정리한 스크립트기 때문에 이 명령어 한 번으로 두 서버를 동시에 띄우는 게 낫겠죠?

client폴더로 이동해서 npm start를 하면 안될까요?

물론 서버와 협업하는 부분이 아예 없는 뷰는 충분히 테스트 할 수 있을 거예요. 하지만 결국 우리는 서버와 이런저런 응답과 요청을 주고받을 것인데, 그러기 위해서는 응답 요청을 주고받을 서버가 가동되고 있어야 된답니다. 그러기 위해서 먼저 server를 실행한 후 client를 실행하는 거예요.

그밖에도 Proxy 설정을 미리 해두면 좋습니다! 서버와 데이터를 주고받을 때 분명 CORS 문제가 생길 거거든요. 하지만 이 부분은 제가 설정해두기보단 금곰님께서 직접 설정하며 배워보는 게 어떨까 싶어요. Proxy문제를 해결하기 위한 많은 방법들이 있답니다. 한 번 알아보시고 이 부분에 대한 설정을 기여해보시는 건 어떨까요?!

👓 ESLint + Prettier 설정

코딩 컨벤션 같은 경우는 헤매고 헤메다 결국 해당 블로그 글을 보고 세팅했어요.

Prettier + ESLint + Airbnb Style Guide | TechWell

front단에는 추가로 타입스크립트 버전의 Airbnb eslint를 설정했답니다!