인프런 커뮤니티 질문&답변

안녕하세요. 질문 남겨주셔서 감사합니다!

Q1. Frontend와 Backend 폴더에 node-modules를 각각 만든 이유

A1. 일단 Frontend 폴더와 Backend 폴더를 나눠서 개발을 진행한 이유를 설명드리면

두 영역은 역할과 기술 스택이 완전히 다르기 때문에, 프로젝트 구조상 기능별로 분리하는 것이 효율적이기 때문입니다.

프론트엔드는 React-Vite 라이브러리를 사용해서 사용자 인터페이스(UI)를 구성하고, 브라우저 환경에서 동작하는 코드가 많습니다. 반면, 백엔드는 Express 프레임워크로 서버 API를 구성하며, 데이터베이스와의 통신이나 인증 로직 등 서버 측 비즈니스 로직을 담당합니다.

물론, React-Vite와 Express를 같은 루트 폴더에 함께 설치해서 운용하는 것도 가능합니다. 실제로 하나의 package.json에 프론트엔드와 백엔드에서 사용하는 모든 의존성을 함께 설치하고, React 개발 서버와 Express 서버를 동시에 구동하도록 npm scripts를 설정하는 방식이 있습니다.

이런 방식은 초기 개발 속도가 빠르고 폴더 구조가 단순하다는 장점이 있어서, 특히 혼자 개발하거나 소규모 프로젝트에서는 사용해볼 만합니다.

다만 이 구조는 다음과 같은 단점이 있습니다:

• 의존성 충돌 가능성: 프론트엔드와 백엔드에서 사용하는 동일한 패키지(예: dotenv, axios)의 버전 충돌이 발생할 수 있습니다.

• 빌드 및 배포의 혼합: React 빌드 파일(dist/)과 백엔드 서버 파일이 같은 공간에 얽히면, 정리나 배포 시 혼동이 생길 수 있습니다.

• 테스트 및 CI/CD의 복잡성 증가: 두 환경을 분리해서 테스트하거나, 각각 배포하고자 할 때 설정이 복잡해집니다.

말씀하신 node_modules도 동일한 이유입니다.
프론트엔드와 백엔드가 같은 루트 폴더에서 작동한다면 하나의 node_modules만으로도 모든 패키지를 공유할 수 있지만, 이는 곧 두 영역의 의존성 관리가 얽히게 된다는 단점을 의미합니다. 예를 들어, 프론트에서만 필요한 vite, react-dom 같은 패키지와 백엔드에서만 쓰는 express, cors 등이 한 공간에 뒤섞이면, 어떤 패키지가 어느 역할을 위해 설치된 것인지 파악하기 어렵고, 불필요한 패키지까지 함께 설치/배포되는 비효율이 발생합니다.

결국 이런 이유들로 인해, 프로젝트를 보다 명확하게 관리하고 확장성을 고려하려면 초기부터 프론트엔드와 백엔드를 폴더 단위로 분리하고, node_modules 역시 각자 독립적으로 유지하는 구조가 더 바람직합니다.

Q2. 깃허브에 node-modules가 업로드 되지 않은 이유. 다른 환경에서 개발을 이어나가고 싶을 때 방법

A2. node_modules 폴더는 용량이 크고 수많은 파일을 포함하고 있어, GitHub 같은 버전 관리 시스템에 업로드하게 되면 저장소가 불필요하게 무거워지고 관리가 어려워집니다. 실제로 프로젝트 내의 node_modules 폴더의 용량을 확인해보시면 수십~수백 MB의 용량일 것입니다.
또한, 이 폴더는 각 개발 환경에 따라 자동으로 다시 생성할 수 있기 때문에, 직접 업로드할 필요도 없습니다. 그래서 일반적으로 .gitignore 파일에 node_modules를 명시해 Git 추적 대상에서 제외하게 됩니다.

다른 개발 환경에서 프로젝트를 이어받아 작업하려면, 루트 폴더에 포함된 package.json과 package-lock.json만 있으면 됩니다. 이 파일들은 프로젝트에 필요한 모든 의존성과 버전 정보를 담고 있어서, 동일한 개발 환경을 자동으로 복원할 수 있도록 도와줍니다.

특히 package.json은 단순히 패키지 목록을 담는 것을 넘어서, 프로젝트 이름, 설명, 실행 스크립트, Node.js 버전 등 핵심 설정 정보를 포함하고 있어 협업과 유지보수, 배포의 기반이 되는 중요한 파일입니다.

따라서 node_modules 없이도, 이 설정 파일들만 잘 유지하면 npm install 명령어를 통해 언제든지 같은 개발 환경을 재현하며 작업을 이어갈 수 있습니다.

Q3. Create React App(CRA)로 만드는 법과 Vite, Next.js로 만드는 방법 중 Vite를 고른 이유가 있을까요?

Create React App(CRA), Vite, Next.js 중에서 Vite를 선택한 이유는 개발 속도가 빠르고 설정이 간편하기 때문입니다. Vite는 코드 변경 시 실시간으로 빠르게 반영되기 때문에, 개발하면서 더 효율적으로 작업할 수 있습니다. 또한, Vite는 빌드 속도가 빠르고, 설정이 간단해서 프로젝트를 빠르게 시작할 수 있습니다. Next.js는 추가적인 서버 사이드 렌더링(SSR) 같은 기능을 제공하지만, 단순한 React 애플리케이션을 만들기엔 Vite가 더 적합하다고 생각했습니다.

도움이 되셨길 바랍니다. 감사합니다!