React/한입크기로 잘라먹는 리액트

[React.js] React App 생성하기

냠냠쿠 2025. 2. 19. 23:41
728x90

 

 

1. 터미널 열어서 vite 다운 

npm create vite@latest

 

2. 라이브러리 설치하기

pakage.json 의 dependencies와 devDependencies 을 기반으로 라이브러리를 별도 설치 해 줘야 함

터미널 열기 : 커멘드 + j

npm install

혹은

npm i

 

 

혹시 위와 같은 에러가 난다면 현재 위치를 잘 확인하자 cd 로 selection04 경로로 들어가서 npm install을 해줘야한다

 

3.  설치 파일의 용도

 

1. public 폴더

이미지 파일, 폰트, 영상 같은 파일들을 저장하는 곳

 

2. src 폴더

실제로 작성하게 될 코드를 보관하는 곳

 

2-1 src - assets - .jsx

리액트 코드가 작성 되는 곳

 

2-3 src - assets - React.svg

이미지, 폴더 등의 파일 보관 (1번과의 차이점은 이후 실습하면서 공부)

 

3. eslint.cjs

도구 설정 파일. 개발자들의 코드 스타일을 통일 하는 데 도움을 주는 도구

 

4. .gitignore 

깃에 올리면 안되는 파일들을 명시 

 

5. vite.config.js

vite 도구 옵션 설정 파일

 

4. 리액트 앱 실행 방법

pakage.json에 들어가보면 아래와 같이 4가지의 실행 명령어가 미리 설정 되어 있음

 

(1) dev : 리액트 앱을 개발용으로 실행

실행방법 : 터미널에 npm run dev

h + 엔터를 누르면 단축키가 나옴

 

 

728x90