리액트 프로젝트 생성

❗리액트 프로젝트 생성 전 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 컴파일러의 설정 파일