concurrently로 서버와 클라이언트 동시에 구동시키기 (React, node.js)
안녕하세요. 이번 시간에는 cocurrently를 이용해서 원하는 명령을 두 개 동시에 실행하는 방법에 대해 알아보겠습니다.
요즘에 블로그 업로드가 굉장히 뜸했는데 요즘 연구실에서 데이터 분석 프로젝트하다 보니 방학이 다 가버려서 좀 억울한 감이 없지 않아 있습니다. 그래도 뭐 열심히 해야죠. 이제 미뤄왔던 블로그도 다시 활성화시킬 예정입니다:)
# 개념
기본적으로 concurrently는 cli 명령을 동시에 시켜주는 아이지만 이번시간에는 node.js와 react로 웹페이지를 구축할 때
이 두 서버를 동시에 열어주는 concurrently에 대해 알아보겠습니다.
보통은 각각 따로 서버를 열어주고 진행하지만 이걸 쓰면 지정한 명령어로 한 번에 실행이 가능합니다.
# 방법
방법도 간단합니다. 서버와 클라이언트의 상위 루트 폴더에 있는 package.json에서 동시에 실행할 명령어를 지정해주면 됩니다. 아래 예시 같은 경우 signup이 최상위 폴더고 myapp폴더가 client, server폴더가 server의 역할입니다.
그래서 우선 signup 폴더에 있는 package.json에 들어가 줍니다.
package.json에 가서 scripts 부분을 아래와 같이 고쳐주면 됩니다.
# 두 명령을 동시에 실행하도록 지정해서 서버& 클라이언트 실행 가능
그래서 위의 코드를 다시 보면 server라는 명령어에 서버 폴더로 이동(cd server)해서 서버를 구동시키는 명령어(nodemon server==node server.js)가 있습니다. 그리고 client라는 명령어에는 클라이언트 폴더로 이동해서 npm start로 리액트 서버를 구동하는 명령어 지정되어 있습니다. 그리고 제일 마지막 줄에서 최종적으로 npm start라는 명령을 했을 때 위 두 명령을 실행하도록 할 수 있습니다! 간단하게 그냥 원래는 각각 켜줘야 하는데 concurrently로 켜는 두 명령어를 start에 동시에 실행하도록 지정해둔 것입니다.
이렇게 package.json을 지정하고 실행해주면 npm start만 해도 두 명령을 각각 실행하며 서버가 켜집니다.
저는 리액트는 3000번 포트 node.js는 5000번 포트에 지정해둬서 서버 경로로 가도 둘 다 잘 켜진 걸 볼 수 있습니다.
저는 처음에 서버와 클라이언트를 배울 때 어떤 언어를 쓰던 서버와 클라이언트를 합치는 과정이 있는줄 알았는데 그런게 아니라 각각 독립적으로 존재하되 각자 하는 기능이 다름을 배웠습니다. 웹개발을 할수록 느끼는거지만 뭐든 순차적으로 꼼꼼하게 코딩하는게 중요한 것 같습니다.
이상입니다. 감사합니다:)