React 프로젝트를 생성하고 Todo앱을 만들어 보자 -1-

저번 포스팅에서는 React 개발을 위한 세팅을 하였다. 저번 포스팅처럼 세팅을 완료하였다면 바로 React 프로젝트를 생성하고 간단한 todo 앱을 만들어 보자.

 

먼저 MacBook의 terminal을 통해 생성해 보자.

terminal

ls 명령어와 cd 명령어를 사용하여 미리 바탕화면에 만들어둔 react 폴더로 경로를 이동하였다. 맨 마지막 줄에서는 현재 react 폴더에는 어떤 내용들이 담겨있는지 확인이 되고 있다.

React 프로젝트 생성

해당 폴더로 경로가 이동이 된 상태에서 터미널에 다음과 같이 입력해 준다.

npx create-react-app "원하는 프로젝트명"

 

혹은 원하는 react 버전이 있을시

npx create-react-app@"version" "원하는 프로젝트명"

큰따옴표는 빼고 입력하자.

 

입력하면 사진과 같이 프로젝트 생성이 시작된다. 처음 프로젝트 생성 시 시간이 다소 걸릴 수 있다. 해당 프로젝트 생성에 관련된 내용은 당연히 React 홈페이지에 나와 있다.

https://ko.react.dev/learn/start-a-new-react-project

새로운 React 프로젝트 시작하기 – React

프로젝트 생성 이후에 프로젝트가 생성되었는지 확인해 보자.

터미널에서 ls를 입력하여 파일 목록을 확인하면 아래와 같다.

프로젝트 생성 이후 파일 목록

아까는 없었던 happy_note가 생성이 된 것을 확인할 수 있다.

이제 visual studio code를 열고 [cmd + O] 단축키를 사용하여 파일 열기를 한 뒤 생성된 프로젝트 폴더를 선택하여 열어보자.

cmd + O

열기 버튼을 누르고 난 후에는 vscode를 커스텀하지 않은 사람들은 왼쪽(나는 오른쪽)에 프로젝트안에 있는 파일 리스트들이 뜬다.

vscode 파일 리스트

이렇게 파일 리스트들이 뜬다면 기본적인 react 프로젝트 생성은 끝이다.

 

[control + shift + 백틱(키보드에 따라 esc아래 물결 표시)] 단축키를 실행하면 vscode 내에서 terminal이 실행된다. 실행된 터미널을 보면 알겠지만, 우리가 프로젝트 생성을 위해 사용한 macBook의 자체 터미널과 똑같다. 그 말인즉 vscode의 터미널을 이용해서 동일하게 프로젝트를 만들 수 있다.

 

vscode terminal에서 프로젝트 생성

순서는 vscode를 열고 [cmd + o] 단축키 실행한 뒤 React 프로젝트를 생성할 폴더를 연다. 바로 위의 단축키를 사용해 터미널을 연다. 그럼 생성할 위치로 터미널이 이미 경로를 잡고 있다. 해당 경로에서 npx create-react-app "project 이름"을 실행하면 동일한 결과값이 나온다.

 

테스트를 위해 위에서 생성한 프로젝트를 바로 실행시켜 보자. 나의 기준으로 happy_note로 경로 이동이 되어있는 vscode terminal에서 다음 명령어를 입력한다.

npm start

해당 명령어가 실행되면 터미널에서 글자들이 무수하게 올라오다 마지막에 다음 사진과 같이 될 것이다.

npm start 실행

localhost:3000에 나의 첫 React 프로젝트가 실행되어 있을 것이다. 확인해 보자. 보통은 실행이 되면 자동으로 기본 브라우저로 창이 하나 뜨며 바로 실행이 되나 실수로 창을 닫거나 뜨지 않아도 걱정할 필요 없다. 주소창에 http://localhost:3000을 입력하면 들어갈 수 있다.

혹 예외로 localhost:3000의 3000이라는 숫자가 포트 번호라는 것인데 본인의 컴퓨터에서 다른 무엇인가가 해당 포트 번호를 점거하고 있으면 다음 포트 번호 3001로 서버가 띄워지게 된다. 터미널의 Local을 잘보고 들어가자. 3000 포트 번호에 돌아가고 있는 무언가를 Kill 하는 방법도 있지만 내용이 너무 돌아가니 다음에 포스팅하겠다.

React 실행

정상적으로 실행이 되면 위와 같은 화면을 얻을 수 있다. 내가 무언가 코딩하지 않아도 기본적으로 react에서 제공하는 일종의 틀이다. 여기까지 완료되었다면 다음은 프로젝트 들어가기에 앞서 필요 없는 파일들을 정리해보자 내가 사용하지 않을 파일들과 모르는 파일들 그리고 아이콘들을 삭제한다.

삭제 후 파일 리스트

다 삭제하면 이것밖에 남지 않는다. 삭제함과 동시에 index 파일과 app.js, index.js도 수정해야 한다.

https://github.com/TaeJinAn/happy_note/commit/503a44525fd066846be86d79128f906ce553d4a2

Initialize project using Create React App · TaeJinAn/happy_note@503a445

삭제하기 전 날것 그대로의 프로젝트

 

https://github.com/TaeJinAn/happy_note/commit/b1f9ef404371d96d080934b880720877ae5a58d3

happy note project init setting · TaeJinAn/happy_note@b1f9ef4

삭제 및 파일 수정 후

변경된 파일 리스트

빨간색은 삭제된 파일, 노란색은 변경된 파일이다.

변경된 내역

index.html 파일의 변경된 내역이다. 빨간 영역이 모두 제거된 부분이고 녹색 영역이 추가된 부분이거나 바뀐 부분이다. 왼쪽의 라인 번호를 보면 삭제가 된 라인인지 변경된 라인인지 알 수 있다.

 

이렇게 기본적인 파일 정리들이 끝났으면 내가 사용할 package를 설치하자. 내가 설치할 package는 recoil, reactRouter, tailwindcss, mui 이렇게 4개를 설치한다. 물론 이게 끝은 아니지만 다른 package들은 그때그때 필요할 때 설치할 예정이다.

[control + shift + 백틱(키보드에 따라 esc아래 물결 표시)]를 실행하여 terminal을 열고 명령어를 입력한다.

 

recoil

recoil 설치

npm i recoil

어떤 라이브러리나 패키지든 설치는 공식 홈페이지에 가장 잘 나와 있다. 꼭 공식 홈페이지에서 제공하는 quick start guide 등을 읽어 보고 항상 공식 reference 들을 읽어보는 습관을 기르자.

https://recoiljs.org/ko/docs/introduction/installation

설치 | Recoil

 

reactRouter

reactrouter 설치

npm i react-router-dom

https://reactrouter.com/en/main/start/tutorial

Tutorial v6.26.1 | React Router

 

tailwindcss

tailwindcss 설치

tailwindcss init

npm i -D tailwindcss
npx tailwindcss init

tailwindcss는 설치 이후에 꼭 init 명령어를 실행시켜 주어야 사용하는 데 필요한 "tailwind.config.js" 파일이 생성된다.

https://tailwindcss.com/docs/installation

Installation - Tailwind CSS

 

mui

mui 설치

 

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

https://mui.com/material-ui/getting-started/installation/

Installation - Material UI

Mui installation doc을 보면 특이한 점이 잇는데 Mui의 css중에는 특정 폰트를 사용하는 경우가 있어 css가 깨지지 않게 하기 위해서 해당 폰트도 받아줄 필요가 있다.

폰트 설치

npm install @fontsource/roboto

해당 설치 방법 이외에도 cdn이나 구글 웹 폰트를 이용하는 방법도 있으니, 홈페이지의 installation을 참고하기 바란다.

 

위에서 설치된 package 들은 자동으로 package.json, package-lock.json 파일에 기록된다.

https://github.com/TaeJinAn/happy_note/commit/09b0c7a1c4ed7601d77199e366cc024f24669fe6

recoil, react-router, tailwind, mui lib 적용 · TaeJinAn/happy_note@09b0c7a

 

 

여기까지 앞으로 같이 공부할 프로젝트의 뼈대를 만들어 보았다. 처음 접하는 사람들은 어려워 보일 수 있으나 알맹이를 까보면 되게 별것 아닌 것들이다. 꼬인 실도 풀려면 당장 내가 들고 있는 실에서부터 가장 가까운 곳부터 풀어나가야 한다. 풀어나가다 보면 언젠간 실은 풀려있을 것이다. 얼핏 보았을 때 모르겠고 복잡해 보여도 하나하나 모르는 것을 찾고 뜯어보면 다 풀려있을 것이다. 모두가 똑같다. 앞으로 가려면 일어나서 한 발짝이라도 앞으로 내디뎌야한다. 겁내지말고 찾아보고 따라 해보자. 목표와 꿈을 생각하며 계속 정진하자.