[ToyProject-Todomate] 투두메이트 클론 프로젝트 03

 

---

🔷 Todomate ☑ - Clone Project 

 

많은 사람들이 사랑하는 투두메이트를 클론하여 웹 서비스를 배포해보는 프로젝트

 

---

코딩애플 리액트 강의를 드디어 끝내고😭

김다정님의 'React.js, 스프링 부트, AWS로 배우는 웹 개발 101' 의 리액트 설치 및 개발환경 셋팅를 따라하려고 한다.

오늘은 개발환경 셋팅까지 진행하고, 레포지토리에 올려야지.

 

🔸 디렉토리 생성 / Create-reacta-app 설치하기

 

- VSCode를 설치한다.

- node.js를 설치한다. (안정화 버전인 LTS를 설치하는 것을 추천!)

- 원하는 로컬 폴더 위치에서 마우스 오른쪽 클릭 해 VSCode를 연다.

- 새 터미널을 열고 npx create-react-app 원하는 폴더 이름 을 입력한다. (npx create-react-app todomate-clone-project)

- npx를 통해 새로운 디렉토리에 create-react-app이 설치된다.

- 로그에 나온대로 cd todomate-clone-project  npm start를 입력해 리액트 앱이 정상적으로 구동되는지 확인한다.

 

 

🔸 VSCode에서 개발 환경 설정하기

 

- 상단 메뉴에서 파일-폴더 열기 를 통해 아까 만들었던 디렉토리를 작업 영역으로 연다.

- 파일 - 작업 영역 저장 을 통해 작업 영역을 저장한다. (todomate-clone-ws 라고 저장했다.)

- 사용할 라이브러리들을 설치한다. (추후 계속 추가하겠지만 개발 계획 단계에서 정한 UI 라이브러리를 미리 설치한다.)

 

 ◾ UI 라이브러리 : MUI

npm install @mui/material @emotion/react @emotion/styled

 

🔸 GIT 레포지토리 연결하기

 

- git을 설치한다.

- github에 가입한다.

- new repository를 통해 새로운 레포지토리를 하나 만든다.

- 생성된 레포지토리 화면에 나온 명렁어를 VSCode 터미널에 입력한다. (git init ▶ git add . ▶ git commit 순으로 하는 것이 좋다.)