INTRO
이번 포스팅은 아래와 같이 구성된 일정 관리 어플리케이션을 만드는 과정을 작성했습니다.
1. 프로젝트 생성
c:\react\my-cra-app> cd c:\react
c:\react> npx create-react-app todo-app
c:\react> cd todo-app
c:\react\todo-app> npm install react@18 react-dom@18
c:\react\todo-app> npm install web-vitals
c:\react\todo-app> npm install react-icons classnames
c:\react\todo-app> code .
c:\react\todo-app> npm start
2. 소스 구성
3. 배포 가능한 형태로 빌드
- 소스코드 빌드
c:\react\todo-app> npm run build
File sizes after gzip:
48.25 kB build\static\js\main.ae0c72ef.js ⇐ 배포 가능한 형태로 빌드한 결과물
2.69 kB build\static\js\488.6b354897.chunk.js
793 B build\static\css\main.1bbbea41.css
- 개발 서버 설치 및 실행
c:\react\todo-app> npm install http-server -g ⇐ 웹 서버를 설치
c:\react\todo-app> cd build ⇐ 빌드 디렉터리로 이동
c:\react\todo-app\build> dir
c:\react\todo-app\build> npx http-server ⇐ 웹 서버를 실행
(현재 디렉터리를 Web Document Root 디렉터리로 설정한 상태로 웹 서버를 실행)
4. 결과 확인
OUTRO
지난 시간 까지 배운 내용을 총정리할 수 있는 앱이었습니다.
전체 코드 구성을 직접 써보면서 context 활용 방법, props 이해, useState 사용법, 컴포넌트에 대해 익혀볼 수 있었습니다.
