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

 

 

---

🔷 CloneTodo ☑ - Todomate Clone Project  |  Team CloneMate

 

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

 

---

어제는 기본적인 개발 환경을 셋팅하였다.

 

오늘은 컴포넌트들을 체계적으로 만들기 위해 간단한 폴더 트리를 그리고, 컴포넌트의 구조를 잡는 일을 하려고 한다.

폴더 트리를 그리는 이유는 상태관리에 대한 경험이 없기 때문에 컴포넌트를 중구난방으로 만들면 분명 난리가 날 것이 뻔하니 기본적인 틀을 가지고 있어야 나중에라도 구조를 한 눈에 파악하기 쉬울 것 같았다.

 

🔸 리액트 파일 구조

 

리액트 공식문서를 읽어보니 바닐라 자바스크립트로 웹페이지를 만들었을 때보다 더 간단하게 폴더 트리를 짜야 했다. 

컴포넌트의 성격별로 조각조각 폴더를 나누려고 했던 생각을 접고 아주 간단한 폴더트리를 구상해보았다.

 

 

악필이라 차마 더 진도는 못나가고 시트로 전환..

 

위와 같이 작업하면서 고려한 것 중 가장 중요한 것은 컴포넌트의 이름을 직관적으로 만드는 것이었다.

그때그떄 대충 정해서 만드는 것이 아니라 팀프로젝트이니만큼 먼저 작성한 부분에 대해서 공유하고자 했다.

 

컴포넌트 이름은 곧 함수의 이름(클래스의 이름)이 될 건데 괜히 어려운 부사 형용사 (를 쓸 이유도 없지만) 를 많이 쓰면 카멜케이스로 볼 때 한 눈에 확 들어오지 않았던 경험이 있어서 내용을 포함한 단어의 조합으로 간결하게 써봤다.

(거의 콩글리쉬 수준이다.)

 

폴더로 만들 것은 폴더로 만들고, 파일로 분리할 컴포넌트와 종속되는 컴포넌트들을 분리해서 시트로 한 눈에 보기 쉽게 작성했다. 아직 api 컴포넌트는 어떻게 쓰는지 몰라서 우선 폴더만 생성했다.

 

공식문서

설정한 폴더 트리

공식 문서에서 제안하는 것과 유사하게 폴더 트리를 짰는데(Atomic Design), css는 별도로 분리하고 싶어 stylesheets라는 폴더를 생성했다.

 

static 파일을 모아두는 public 폴더에는 images라는 폴더를 별도로 생성해서 기본 아이콘들을 넣으려고 한다. 사실 이 마저도 안 나눠도 되는 듯 싶다. 아님 별도의 AWS S3 를 이용하거나 아무 무료 호스팅 업체를 이용해도 될 것 같다.

 

그리고 부분부분 재사용되는 컴포넌트는 같은 색의 글자로 표시했다. 

이렇게 봐도 엉성한데 ㅠㅠ 나중에 한 번 더 다같이 점검하는 시간이 생겼으면 좋겠다.

 

내일은 MUI를 실습해보려고 한다.

[React] Material UI 실습

 

[React] React 꾸미기 (material-ui 연동)