❗리액트 프로젝트 생성 전 Node.js 설치 필요❗
환경: visual studio code
1. 프로젝트 폴더 생성
Open Folder or Clone Git Repository를 통해 프로젝트를 생성할 폴더를 연다.
2. 프로젝트 생성
생성된 폴더를 열고 상단 메뉴바에서 Teminal > New Terminal을 선택한다.
아래의 명령어를 입력해 프로젝트를 생성한다.
npx create-react-app [프로젝트명] [--template typescript]
3. 프로젝트 실행
아래의 명령어를 입력해 프로젝트를 실행한다.
cd [프로젝트명]
npm start
my-react-app/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ ├── App.tsx
│ ├── index.tsx
│ ├── App.css
│ ├── index.css
│ ├── logo.svg
│ ├── reportWebVitals.ts
│ └── setupTests.ts
├── package.json
└── tsconfig.json
- node_modules: 라이브러리 모음 폴더
- public: 브라우저에서 직접 접근할 수 있는 정적 파일들이 위치하는 공용 폴더
- index.html: 애플리케이션의 진입점이 되는 HTML 파일
- favicon.ico: 브라우저 탭에 표시되는 아이콘 이미지 파일
- src: 소스 코드가 있는 폴더
- App.css: 특정 컴포넌트 또는 컴포넌트 그룹의 스타일을 정의하는 CSS 파일
- App.tsx: 기본적인 React 컴포넌트가 정의되는 파일
- index.css: 앱 전체에 적용되는 전역 CSS 스타일을 정의하는 파일
- index.tsx: React 앱을 렌더링하는 진입점
- logo.svg: 로고 이미지 파일
- reportWebVitals.ts: 웹 성능을 측정하는 데 사용되는 파일
- setupTests.ts: 테스트 설정 파일
- package.json: 프로젝트에 대한 정보와 종속성 목록이 포함된 파일
- tsconfig.json: TypeScript 컴파일러의 설정 파일