concurrently 이용해서 서버와 클라이언트 동시에 실행하기
원래는 서버를 실행하려면 터미널에서 cd server명령어로 server폴더로 이동한 뒤 nodemon server.js 를 입력해 로컬 서버를 켜고, 다시 cd ..를 입력해 react root 경로로 이동한 뒤npm start해야 react app을 켤 수 있었다. concurrently를 이용해 동시에 켜보자.
먼저 라이브러리를 설치해준다.
npm install concurrently -- save참고로 인프런의 따라하며 배우는 노드 리액트 기본 강의를 보면서 concurrently를 설치하고 있었는데, 강의와 내 프로젝트의 폴더 구조가 다르다는 것을 깨닫고 검색으로 나와 같은 폴더 구조를 가진 분이 설명해주신 것을 보고 해결했다.
설치를 하고 난 후, package.json파일 script에 설정을 추가해주어야 한다.
"dev": "concurrently \"서버 경로\" \"클라이언트 경로\""
"scripts": {
"start": "set PORT=3000 && react-scripts start",
"server": "cd server && nodemon server",
"dev": "concurrently \"npm run server\" \"npm run start\""
},
// 강의 폴더 구조 설정
"dev": "concurrently \"npm run server\" \"npm run start --prefix client\""강의는 backend 폴더와 client 폴더 각각 package.json 파일이 따로 있고, backend 폴더의 package.json 에 설정했지만 내 프로젝트의 폴더 구조는 클라이언트인 react 프로젝트 폴더의 최상위 root경로에 server폴더를 만들어 서버를 구축했다. (public, src와 같은 경로)
설정을 제대로 하고 터미널에 npm run dev 명령어를 입력하면 터미널에는 서버 포트와 클라이언트 포트가 동시에 작동하는 것을 확인할 수 있다.
https://velog.io/@autumndr3ams/210802-React-Node.jsexpress-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0
