(1) 시작하기 전 - 소개

0. Github 저장소

https://github.com/BerkleyLim/Todolist

GitHub - BerkleyLim/Todolist: 리액트 기반 투두리스트 만들기

 

1. 개발 환경 및 사용 라이브러리

- Nodejs : 16.18.0

- npm : 9.6.3

- VScode

- Prettier

- SCSS/SASS

- ReactStrap

- Redux

- react-redux

- redux-persist

- immutability-helper

- react-bootstrap-icons

- react-dnd

- react-dnd-html5-backend

 

 

 

2. 작업 셋팅 준비

1. 먼저 Nodejs를 설치합니다. (안정버전 LTS가 붙힌 버전으로 설치합니다.)

https://nodejs.org/ko

 

2. NodeJS 설치시 npm이 자동을 설치가 되기 때문에 다음 작업을 완수 할 수 있습니다.

 

3. 아래와 같이  명령어 npx create-react-app todolist 명령어 입력 후 리액트 프로젝트를 만듭니다.

 

4. 다음으로 todolist 디렉토리로 들어가서 npm run start 명령어 입력 후 React가 제대로 동작하는지 확인합니다. (디렉토리 명령어 cd todolist)

 

5. 성공 시 아래와 같이 powershell에서 다음과 같이 로컬이랑 network 나옵니다.

필자는 개발 중이기 때문에 npm run start로 로컬 서버로 이용하여 진행합니다.

 

6. 정상적으로 돌아가는 것을 확인 할 수 있습니다.

http://localhost:3030 입력 시 아래와 같이 화면 표시

 

3. VS Code 확장 툴 설치

- Prettier - Code formatter : 서식 지정 

- ES7+ React.Redux

- Simple React Snippets

 

 

4. VS Code 디버그 설치

(1) 먼저 디버그 아이콘을 클릭합니다.

(2) launch.json 파일 만들기 클릭

 

(3) 윗쪽 중앙에 Node.js 클릭

 

 

(4) 디버그 탭에 아래와 같이 구성 추가 클릭

 

 

(5) 디버그 터미널에 "npm start" 실행 모드로 설정후 저장

 

 

(6) 디버그 모드로 Run npm star로 설정 하고 F5 누르고 시작

 

 

(7) 아래와 같이 화면 표시시 실행 성공

 

 

다음시간은 

(2) Todolist 작업 전 반응형 웹&앱 개발 과정을 진행 하겠습니다.

https://berkley.tistory.com/6

(2) Todolist 작업 전 반응 형 웹&앱 설정