[React] 0. 세팅

우선 자바스크립트 계열들은 vscode 를 많이 쓰기 때문에 vscode 먼저 다운 받고 node.js 까지 받았다는 전제하에 

(만약 없다면 .. https://nodejs.org/ko 가셔서 node.js 다운 )

( https://code.visualstudio.com/Download 가셔서 vscode 다운)

 

1. vite 

 

터미널에 2가지 방법으로 프로젝트를 생성 할 수 있습니다 . 

 

첫 번쨰는 npx create-react-app 프로젝트명

두 번쨰는 create vite@latest ( 만약 powershell 을 통한 터미널인 경우 npx create-vite@latest )

 

둘의 차이는 npx 같은 경우엔 Webpack 

vite 같은 경우엔 ESBuild 를 사용해서 번들링을 진행하게 되는데 

(번들링은 뒷부분에서..)

 

ESBuild 가 상대적으로 속도가 빠르고 전체적으로 vite 가 가볍다는 장점으로 마이그레이션 프로젝트도 좀 나오기 떄문에

 

그냥 저는 vite로 진행 했습니다.. 

 

그럼 이렇게 Project name 정하기 , framework 정하기 , variant 정하기가 나오는데 원하시는거 선택하시면 됩니다.

(프로젝트명 , 프레임워크(vue , react 등등..) , 자바스크립트 or 타입스크립트 ) 

 

하나하나 선택하기 싫으시면 

npx create-vite@latest 프로젝트명 --template react  

이렇게 해도 되긴 하는데 그냥 선택하는게 좋습니다 .. 

 

진행 하시면 이렇게 나옵니다 

그냥 폴더 열기로 너가 만든 폴더 열고

터미널에 npm install 치고 

터미널에 npm run dev 해라 

 

다 진행하시면 

스프링처럼 local 주소 하나를 줍니다 . 들어가면 

 

이렇게 뜨면 정상적으로 진행 된 겁니다. 

개발하실땐 npm run dev 후 해당 로컬 주소로 들어가서 확인하시면 됩니다. 

 

2. ESLint 

 

자바스크립트는 확장을 깔지 않으면 자바처럼 빨간 줄로 미리 이상하다 알려주지 않습니다 ;; 

그래서 좌측 Extension 누르셔서 ESLint 설치 받으시면 빨간 줄로 미리 경고를 해줍니다 . 

 

3. React Developer Tools

https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1 

React Developer Tools - Chrome 웹 스토어

 

해당 주소로 가셔서 받으시면 됩니다. ( 크롬 or 웨일은 가셔서 다운 받으시면 브라우저 확장으로 추가됩니다. ) 

 

react 개발하는 페이지로 가게되면 

 

이렇게 주황색으로 불이 들어오게 됩니다. 

 

개발자 도구 키셔서 우측에 Components 누르시면 

이렇게 지금 react 구조가 어떻게 되어있는지 나옵니다 

( 로컬 기본 화면에서 접속해서 App.jsx 만 뜹니다 . ) 

 

나중에 구조 개념이 엄청 중요하기 때문에 미리 설치해두면 좋습니다.