생각은 길게 코딩은 짧게

[React] 리액트 환경설정 본문

React

[React] 리액트 환경설정

sayhee 2022. 9. 24. 16:13
728x90

안녕하세요 세히이 입니다:) 자바를 끝내고 React를 처음 시작하였는데 많은 삽질 현장들을 여기에 기록해보겠습니다...

리액트 시작해봅시다 ~~~


React는 webpack과 babel을 사용하기에 Node.js 가 설치되어 있어야 합니다

Node.js 설치하기 :  nodejs.org/en/

- 13버전이하 아니면 17버전은 쓰면 안됨.

- 설치 경로는 C드라이브 어쩌구 되어있는거 바꾸지말고 그대로 쓰는게 좋음.

- 설치 중 chocolatey 어쩌구는 설치 안해도 됨.

 

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org


01.basic이라는 폴더를 만들어줍니다

-> 디렉토리 파일을 꼭 소문자로 만드세요!! 저는 대문자로 만들었더니 오류가 나서 찾아보니 소문자를 권장한다고 합니다

 

권장인데 왜 오류가 떠...?!


폴더 안으로 들어가 cmd창을 켜주세요

노드프로젝트 생성해주는 명령어

> npx create-react-app .

(처음에는 오래 걸림)

cmd에 명령어를 입력해주면 요로코롬 다운로드가 되면서 Happy hacking! 이라고 나온답니당

폴더를 보시면 많고도 많은 아이들이 생긴 것을 보실 수 있답니다 :)


이제 실행을 해줘야겠죠 실행을 해주는 명령어 

> npm start

입력해주시면 웹 서버 3001번으로 실행된 것을 보실 수 있습니다 

보통 3000번으로 실행되는데 3001번인 이유는 3000번에는 다른 프로젝트가 실행되고 있기 때문이에요 


코딩 툴은 VSCode를 사용할 것입니다

- VSCode가 javascript에 최적화 되어 있기 때문

VSCode 설치하기 : https://code.visualstudio.com/


여기서 꿀팁!! 파일 크기가 너무너무 크므로 다른 컴퓨터로 이 파일들을 옮기고 싶을 때는

「src 폴더와 package.json만 폴더에 넣고 노드 프로젝트 생성하는 명령어를 입력해 준 뒤 npm start만 하면 된다는 것」

 

 

사실 리액트 시작한지 꽤 됐는데 이제야 기록을 한답니다 끄악...!! 오늘부터 여태까지 한 것들 열심히 기록해보겠습니다.