React 프로젝트를 직접 생성하지 않고, 이미 만들어진 프로젝트를 다운받아 실행하려면 몇 가지 추가 작업이 필요합니다. 직접 생성한 프로젝트는 create-react-app이 자동으로 필요한 파일을 설치해주지만, 다운받은 프로젝트는 그렇지 않기 때문에 필요한 파일들을 따로 설치해줘야 합니다. 이 과정에서 중요한 개념은 node_modules 폴더와 npm install 명령어입니다.
프로젝트 다운로드 및 설정
1. 프로젝트 다운로드
먼저, React 프로젝트를 다운로드합니다. 예를 들어, "dicegame"이라는 프로젝트를 다운로드했다고 가정해봅시다. 다운로드한 프로젝트는 보통 압축 파일 형태로 제공되며, 이를 압축 해제해야 합니다.
2. 프로젝트 폴더 열기
다운로드한 프로젝트의 압축을 푼 후, Visual Studio Code(VS Code)에서 압축 푼 폴더를 엽니다. VS Code는 다양한 기능을 제공하는 편리한 코드 편집기입니다.
3. 의존성 설치
다운받은 프로젝트에는 node_modules 폴더가 포함되어 있지 않습니다. 이 폴더는 프로젝트 실행에 필요한 모든 패키지와 라이브러리를 포함하고 있지만, 용량이 크기 때문에 보통 공유할 때는 제외됩니다. 이를 해결하기 위해, 프로젝트 폴더에서 터미널을 열고 다음 명령어를 입력합니다:
npm install이 명령어는 package.json 파일에 정의된 모든 의존성을 설치합니다. 설치가 완료되면, node_modules 폴더가 생성되고 필요한 모든 파일이 이 폴더에 담기게 됩니다.
프로젝트 실행
4. 개발 서버 시작
의존성 설치가 완료되면, 이제 프로젝트를 실행할 준비가 되었습니다. 다음 명령어를 입력하여 개발 서버를 시작합니다:
npm start이 명령어를 실행하면 개발 서버가 시작되고, 브라우저가 자동으로 열리면서 http://localhost:3000 주소에서 React 애플리케이션이 실행됩니다.
요약
- 프로젝트 다운로드: 이미 만들어진 React 프로젝트를 다운로드합니다.
- 프로젝트 폴더 열기: VS Code에서 압축을 푼 프로젝트 폴더를 엽니다.
- 의존성 설치: 터미널에서
npm install명령어를 실행하여node_modules폴더에 필요한 패키지를 설치합니다. - 개발 서버 시작:
npm start명령어를 사용하여 개발 서버를 시작하고, 브라우저에서 애플리케이션을 확인합니다.
결론
다운받은 React 프로젝트를 실행하려면, npm install 명령어로 필요한 패키지를 설치하고, npm start 명령어로 개발 서버를 시작해야 합니다. 이를 통해 React 애플리케이션을 로컬 환경에서 실행하고 개발을 계속할 수 있습니다. 이 과정은 처음에는 복잡해 보일 수 있지만, 익숙해지면 매우 간단하고 효율적으로 프로젝트를 설정할 수 있게 됩니다.
