[React] React App 프로젝트 로컬 환경 생성 세팅 (Window)

윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다.

1. 노드를 설치
2. 개발 툴 설치 (Visual Studio 등..)
3. React App 생성
4. App을 실행

 

 

(1) 노드 설치

https://nodejs.org/ko

Node.js

 

노드 사이트에서 최신 버전의 node.js 를 받아줍니다.
LTS 버전을 다운받아 설치하면 됩니다.

 

 

 

(2) 개발 툴 설치 (Visual Studio Code)

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

비주얼 스튜디오 코드 툴을 설치해줍니다.
반드시 비주얼 스튜디오일 필요는 없으며 자신이 원하는 툴을 받아서 설치하시면 됩니다.
node.js는 브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 런타임 환경입니다. 
앞으로 사용할 npm은 node.js의 패키지 관리 도구입니다.

 

 

추가적으로 개발할 때 필요하거나 설치하고 싶은 확장 프로그램을 설치해주면 도움이 됩니다.
file -> preferences -> Extensions 를 누르면 설치하고자 하는 많은 프로그램들이 나옵니다.
그냥 왼쪽의 사각형 도형 항목을 선택해도 됩니다.

 

 

원하는 Extension 설치

저는 vscode icons extension 과 babel, code theme 를 설치해주었습니다.
vscode icons는 개발할 때 왼쪽의 프로젝트 구성에서 아이콘들을 표시할 수 있게끔 하는 확장성 프로그램입니다.
babel 은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다.
code theme 의 경우에는 개발할 때 코드의 가독성과 눈이 피로하지 않도록 원하는 색깔같은 테마가 정해진 프로그램입니다.

 

 

(3) React App 생성

npx create-react-app {앱 명}

비주얼 스튜디오 터미널에서 프로젝트를 만들 경로로 들어가서 npx craete-react-app {앱 명} 명령어를 입력하여 React App을 생성해줍니다.

 

# react app 생성 명령어를 입력했을 때 발생될 수 있는 에러와 해결책

(1) npx : 'npx' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다.

(2) npm ERR! code ENOENT / npm ERR! errno -4058

 

cd {만든 프로젝트 앱 명}

생성이 완료되었으면 cd 명령어로 해당 프로젝트로 들어가줍니다.

 

 

(4) App 실행

// 배포 서버에서 운영시 start 및 node 명령어 이전에 먼저 실행
npm run build

npm start

들어간 프로젝트의 루트 경로에서 npm start 명령어를 실행하면 로컬 환경에서 앱이 실행되게 됩니다.
나중에 클라우드 서버같이 공개적으로 배포를 하게 될 때는 npm start 이전에 npm run build 명령어를 통해 build를 우선적으로 실행해야 합니다.

 

+ 추가 사항

추가적으로 React App 을 만들었으면 불필요한 파일들을 삭제해줍시다.

 

삭제할 불필요한 파일들

logo 이미지들, manifest.json, robots.txt, favicon, App.css, App.js, App.test.js, index.css, logo.svg, reportWebVitals.js, setupTests 파일들을 지워줍니다.

 

 

또한 index.html 에 있는 일부 내용들도 지워줍니다.

지금 이렇게 파일을 삭제하거나 내용들을 삭제하는 것은 불필요한 파일 및 내용들이기 때문이라서도 볼 수 있지만 처음에 하나부터 스스로 만들어갈 것이기 때문입니다.

 

 

그리고 noscript 부분을 삭제해주고 
script 태그를 index.js 가 있는 경로로 잡아 넣어줍니다.
렌더링 해서 보여질 것이기 때문에 type 은 text/jsx 입니다.

 

 

그리고 index.js 로 들어가서 react와 react-dom 을 제외한 모든 import를 삭제시켜주고 주석 내용과 reportWebVitals 함수도 지워줍니다.

 

 

 

이제 React App을 만들기 위한 완전 초기 세팅이 완료되었습니다.
코드를 수정하거나 추가할 때 해당 파일을 ctrl + s 를 눌러 저장하고 프로젝트 루트 경로에서 npm start 명령어를 실행하면 로컬 환경에서 실행될 것입니다.
여기서 git 을 연동시켜 브랜치마다 작업하고 해당 브랜치에서 npm start 를 시켜 브랜치 작업내용을 반영시켜 로컬에서 실행할 수도 있습니다.

초반에도 말했듯이 이것은 로컬 환경에서의 실행방법이며 클라우드와 같은 서버에 배포하게 되었을 때는 start 명령어 이전에 npm run build 명령어를 통해 build 먼저 수행후 실행해주어야 합니다.
다만 배포 서버에서 실행할 때는 npm start 명령어가 아니라 따로 배포 서버에 대한 설정을 만들어준 다음에 node {배포 서버 실행 설정} 명령어를 통해 배포 서버에서 실행해야 합니다.