리액트 개발 환경 설정
#React
리액트 개발 환경 설정
간단하게 리액트 개발 환경 설정하는 방법을 정리하였다.
리액트 개발 환경 설치
- Node.js 설치
- IDE(ex. VSCode) 설치
- 웹 브라우저 설치
VSCode 익스텐션 추천 목록
- ES7+ React/Redux/React-Native snippets
- ESLint
- Tailwind CSS IntelliSense
- Live Server
- Prettier - Code formatter
- Auto Rename Tag
- HTML to CSS autocompletion
- HTML CSS Support
- Code Runner
- Material Icon Theme
크롬 확장 프로그램
- React Developer Tools
리액트 애플리케이션 만들기
Vite를 이용한 스캐폴딩 순서
- 원하는 폴더 위치에서 명령어 실행 $ npm create vite@latest
- React -> TypeScript 선택
개발 서버 실행 명령어
$ npm install // 최초 한 번 $ npm run dev
불필요한 폴더 및 파일 삭제
- src/assets
- App.css
- index.css
- main.tsx 파일 내 index.css import 구문
리액트 애플리케이션 전체 실행 과정
- **개발 서버 **실행(npm run dev)
- 개발 서버가 index.html 파일을 엶
- index.html 파일은 main.tsx 파일을 불러옴
- main.tsx 파일에서 App 컴포넌트를 읽어 실행
- App 컴포넌트가 웹 브라우저 화면에 표시
첫 글자가 대문자인 tsx/jsx 파일: 컴포넌트