[React] 초기 프로젝트 생성 (Hello-world)

1. 전제사항

• NodeJS를 설치한다. (14~16 Version)
• VSCODE를 설치한다.

 

 

 

2. React 프로젝트 생성

 

프로젝트를 생성하고자 하는 위치의 상위폴더에서 다음의 명령어를 입력한다.

 

 

아래의 PROJECT_NAME에 원하는 프로젝트 이름을 넣으면 된다.

npx create-react-app <PROJECT_NAME>

 

이 과정을 스타벅스에서 진행하는게 아니라면(원활한 네트워크 환경이라면)

보통 1~2분내외 정도를 기다린 후 다음과 같이 Happy hacking! 이라는 문구와 함께 프로젝트가 생성됨을 확인할 수 있다.

 

 

생성된 프로젝트를 VSCODE로 열면, 다음과 같은 구조로 되어있음을 확인할 수 있다.

 

 

 

프로젝트 최상위 위치에서 다음과 같이 npm start명령어를 통해

로컬에 웹사이트를 띄운다.

 

$npm start

 

 

컴파일이 성공되면 다음과같은 URL에서 웹사이트를 확인할 수 있다고 뜬다.

 

 

해당 주소로 접속하면 아래와 같이 웹사이트가 띄어짐을 확인할 수 있다.

 

 

아래와 같이 src 폴더 내 App.js파일내 문구를 한번 수정해서 저장해 보자.

 

 

 

문구를 수정한 후 저장하면 아래와 같이 실시간으로 수정된 내용이 반영됨을 확인할 수 있다.

 

 

 

3. 위의 과정이 잘 안될 경우..

1. The engine "node" is incompatible with this module 에러 

    npx로 설치시 이런 에러가 있을 수 있다. nodejs버전이 너무 낮거나 높을때 일어나며, nodejs를 위의 1번 전제사항에 맞게 재설치 해준다.

 

 

2. 터미널에서 프로젝트 생성시 permission이 없다는 오류가 들 경우

    앞에 "sudo" 를 붙여 sudo npx create-react-app ... 명령어로 입력한다.

    비밀번호는 컴퓨터의 비밀번호를 입력하면 된다.

 

 

3. "npx command not found ..." 에러

    터미널을 껐다가 켜본다. 아니면 1번 오류사항과 같이 nodejs버전의 문제일 수 있다. 윈도우는 가급적 C드라이브에 설치하도록 한다.