[React] React 프로젝트를 만들자 (ft. Visual Studio Code)

 

1. 프로젝트 시작하기

Node.js설치하고 cmd 열어서 명령어 입력하는데 에러 뜸

C:\Users\User>npx create-react-app jsx
npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users\User\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\User\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Local\npm-cache\_logs\2023-06-20T22_35_40_117Z-debug-0.log

 

* 해결방법 (chatGPT한테 물어봄)

해당 오류는 npm이 C:\Users\User\AppData\Roaming\npm 경로에 있는 파일을 찾을 수 없기 때문에 발생한다고 함

아래와 같이 코드 두개 입력하니 프로젝트가 성공적으로 빌드되었다!

 

1) npm cache 제거: 명령 프롬프트에서 다음 명령을 실행하여 npm 캐시를 제거

npm cache clean --force

2) npm 업데이트: npm을 최신 버전으로 업데이트

npm install -g npm

 

*중요! 내가 프로젝트를 만들고자 하는 폴더로 이동해서 명령어를 입력해야한다!

cmd열고 빈 폴더 생성한 다음에 이름 정하고 아래와 같이 명령어 입력한다

 

1) cd C:\Users\user\Desktop\study\react_project

2) npx create-react-app jsx

 

그럼 이것저것 설치하고

jsx폴더가 생성되고 그 안에 여러가지 파일들이 생성된 것을 확인할 수 있당

 

 

2. 프로젝트 보기 - Open my browser and navigate to localhost:3000

    We suggest that you begin by typing:

      cd jsx
      npm start

    Happy hacking!

위와 같은 메세지가 뜨면 잘 된거임

그런다음 아래 명령어를 한 줄씩 입력한다

 

1) cd jsx : jsx폴더로 이동

2) npm start :서버구동

 

그런다음 cd jsx하고 npm start하면 브라우저가 뿅 하고 뜨면서

이런 화면이 뜸 이러면 서버를 실행과 함께 react app이 실행된거임

Q. 실수로 브라우저 창을 꺼버렸는데  다시 cmd켜서 명령어 다시 입력해야하나여

ㄴㄴ 그냥 주소에 http://localhost:3000/ 입력하면 됨 ㅋ 

 

 

3. 프로젝트 멈추기

Ctrl + c를 누르세염

 

 

4.  Visual Studio code에서 작업하기

아까 생성했던 폴더를 불러오면 왼쪽에 폴더,파일 리스트가 뜨고

src/App.js의 코드를 수정하면 잘 뜨는지

npm start하고 localhost:3000으로 들어가서 잘 되는지 확인해보자

 

오올 잘 됨ㅋ