[React] 리액트 환경 구축하기 / 에러 발생 시 해결방법

리액트 공부를 미루고 미루다가 5월 목표로 세우고 시작해보았습니다.

우선 리액트를 사용하기 위해 환경을 구축해야 하는데요, 아래 방법을 따르시면 됩니다.

 

먼저, node.js가 없으신 분들은 다운 받아주세요. 버전이 두개가 있는데 아무거나 다운받으셔도 무방합니다.

https://nodejs.org/ko/

Node.js

다음은 원하는 위치에 폴더를 하나 만들어주세요. 저는 react-app이라는 이름의 폴더를 하나 만들었습니다.

비주얼 스튜디오 코드에서 폴더를 열어주세요.

 

터미널 창을 켜서 다음 명령어를 입력합니다.

npx create-react-app .

성공 시에는 이러한 화면이 나오면서 react를 사용하기 위한 모듈들이 자동으로 설치가 됩니다.

 

완료 시에는 Happy hacking! 이라는 문구와 함께 모든 파일들이 설치 완료된 것을 볼 수 있습니다.

 

자! 아마 50프로의 확률로 설치가 안될텐데요, 대부분의 경우에서

'npx'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. 

이런 에러 메시지가 뜰거에요. node.js를 설치했는데도 이런 메시지가 뜬다면 다음의 두가지 방법을 따르시면 됩니다!

 

우선 비주얼 스튜디오 코드에서 디폴트 터미널이 어떤 걸로 되있는지 확인해주세요.

 

요부분이 command prompt로 되어 있어야 합니다 (중요) bush, powershell로 되있진 않는지 확인해주세요.

 

다음은 환경변수를 설정해주어야 하는데요, 시스템 환경변수 프로그램을 열어주세요.

 

환경 변수 버튼을 클릭해주세요.

 

path를 더블 클릭해주세요.

 

새로 만들기 버튼을 클릭한다면 nodejs의 파일 경로를 지정해주시면 됩니다.

저는 C:\Program Files\nodejs\로 경로를 지정해주었습니다.

 

이렇게 두가지를 완료하셨다면 컴퓨터를 다시 시작시켜주세요 (중요)

 

다시 시작했다면 비주얼 스튜디오 코드를 켜서 터미널에서 

npx create-react-app .

이렇게 명령어를 입력해주시면 바로 잘 작동합니다!

모든 모듈 설치가 완료되었다면 npm start를 입력해주세요.

 

Compiled successfully! 라는 문구가 뜨면서 다음과 같은 리액트 기본 페이지가 자동으로 열립니다.

 

이제 react를 사용하기 위한 준비가 끝났습니다. react를 본격적으로 배워보겠습니다😆