[본캠프]REACT_터미널!!!! , 파일 기능 &관리

파일생성하기 

npm create vite@latest 프로젝트폴더이름 -- --template react

밑에 코드로 생성하니 깃허브 올릴 때 폴더 통째로 올라가는 불상사가 생겼다. 그래서 위 코드로 생성하자.

폴더를 만들도 폴더에 마우스 우클릭하여 터미널을 키도 위 코드를 복붙해서 넣어주면 된다.

나머지는 똑같이 해주면 된다. 참고로 레포지토리는 미리 생성하지 말고 생성하는 과정에서 나온 코드를 vs터미널에 복붙해주면 된다.

 

npm create vite@latest

 

방향키로 react에 엔터

방향키로 javascript 엔터

 

Done. Now run:

 

완료.

 

패키지 설치

package.json에 보면 탐색기에 없는 게 있다. 

패키지를 설치 안해서 그런거니까 다시 터미널을 켜주고 npm install 또는 npm i를 입력해야한다.

에러가 뜨면 자세히 읽어보면 된다.

cd section04
npm install
npm run dev

순서대로 입력해주면 된다.

 

 

 

 

 

 

 

 

 

사진처럼 모듈 안에 엄청 많은 양의 패키지들이 설치 된 걸 확인 할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

•  eslint의 설정파일: 추천된 코드스타일을 쓸거다~라는 내용이 적혀있다.
• gitignore: 깃허브에 올릴 때 올라가면 안되는 파일들이 적혀있다.
• index.html: 리액트의 기본 틀인데, jsx에서 컴포넌트로 html처럼 만드는데 index.html에서 돔을 수정해서 추가하는 방식으로 동작된다.
• vite.config.js: vite옵션을 설정한다.

 

 

 

 

 

 

 

 

 

 

 

r+enter : 서버 다시실행
u+enter : url 
o+enter : 브라우저
c+enter : 콘솔 깨끗
q+enter : quit

 

---

리액트 브라우저 열기

cd 폴더명

npm run dev해주면됨.

 

components

폴더 하나 생성하여 Components이름을 지정하여 메인파일인 App.jsx를 제외하고 전부 Components파일에 넣어서 모둘화해주면 된다.