[인프런 워밍업 클럽 0기] 3주차 발자국 👣

이번 발자국은 마지막 과제인 노트 앱 구현 과정을 작성해 볼 예정이다. 목차는 다음과 같다.

1. 기능 목록 작성
2. 폴더 구조
3. 구현
4. 결과물
5. 고민했던 부분
6. 후기

✅️ 1. 기능 목록 작성

🧩 특정 조건에 대한 내용을 표시한다.

1. 노트를 추가/수정할 수 있다.

제목 + 내용 + 태그 + 우선순위 + 색상 을 입력받는다.
- 내용의 경우, WYSIWYG 에디터 사용한다.
  - 이미지 사이즈를 조절할 수 있다.
- 태그의 경우, 존재하는 태그 중에서 선택 가능하다.
  - 태그 편집 버튼을 통해 태그를 추가/삭제할 수 있다.
- 우선순위의 경우, low/high 를 선택할 수 있다.
- 색상의 경우, white/sky를 선택할 수 있다.

2. 노트 리스트를 볼 수 있다. (그리드 뷰)

각 노트마다 설정한 색상으로 보여준다. (white/sky)
🧩 메인페이지
- 우선순위를 high/low 순으로 정렬가능하다.
- 날짜를 최신순/오랜된 순으로 정렬가능하다.
- pin 여부에 따라 리스트 상단, 하단에 나누어 보여준다.
🧩 archive 페이지
- archive 상태의 노트들만 필터링하여 보여준다.
🧩 trash 페이지
- trash 상태의 노트들만 필터링하여 보여준다.

3. 노트 상태를 변경할 수 있다.

pin 기능을 통해 리스트 상단에 위치시킬 수 있다.
- 🧩 메인페이지
노트를 수정할 수 있다. (수정 아이콘 버튼)
- 🧩 메인페이지 / 태그 관련 페이지 에서 가능하다.
- 🧩 archive 페이지, trash 페이지 에서 불가능하다.
노트를 archive 상태로 변경할 수 있다. (archive 아이콘 버튼)
- 🧩 메인페이지 / 태그 관련 페이지 에서 가능하다.
- 🧩 archive 페이지 에서 변경할 경우엔, archive 상태가 제거된다.
- 🧩 trash 페이지 에서 불가능하다.
노트를 trash 상태로 변경할 수 있다. (trash 아이콘 버튼)
- 🧩 메인페이지 / 태그 관련 페이지 / archive 페이지 에서 가능하다.
- 🧩 trash 페이지 에서 변경할 경우엔, trash 상태가 제거된다.
노트를 제거할 수 있다.
- 🧩 trash 페이지 에서 가능하다.

4. 태그를 추가/삭제할 수 있다.

이미 존재하는 태그의 경우 추가할 수 없다.

🎨 기능을 실제 이미지로 살펴보겠다.

1. 노트를 추가/수정할 수 있다.

2~3. 노트 리스트를 볼 수 있다. (그리드 뷰) + 노트 상태를 변경할 수 있다.

4. 태그를 추가/삭제할 수 있다.

✅ 2. 폴더 구조

📁 src
|--📄 types.ts 
|--📄 index.css # 공통 css 설정 (폰트, 색상 변수)
|
|--📁 components # 공통 컴포넌트
|  |--📁 Button 
|  |  |--📁 IconButton
|  |  |   |--📄 IconButton.tsx # 이후부터 내부 파일은 생략한다.
|  |  |   |--📄 IconButton.module.css
|  |  |
|  |  ㄴ--📁 TagButton
|  |  ㄴ--📁 TextButton
|  |    
|  ㄴ--📁 Card
|  |  |--📁 NoteCard
|  |    
|  ㄴ--📁 Header
|  |    
|  ㄴ--📁 Modal
|     |--📁 NoteEditModal
|     |--📁 TagEditModal
|     |--📄 Modal.css # 모달의 경우, 같은 디자인을 적용시켰다.
|      
|--📁 constants
|  ㄴ--📄 color.ts ## 색상 헥사값
|      
|--📁 hooks
|     
|--📁 pages # 페이지.
|  ㄴ--📁 Note ## 노트 페이지
|     |--📄 index.tsx
|
|--📁 redux ## 리덕스
|  ㄴ--📁 slice  
|  |  |--📄 NoteSlice.ts # 노트 관련
|  |  |--📄 TagSlice.ts # 태그 관련
|  |
|  ㄴ--📁 stoe   
|     |--📄 store.ts
|

이번에는 색상 헥사값을 constants에 따로 빼서, 코드상에서 직접 헥사값을 가져오는 경우를 최소화했다.

또한, 노트 추가/삭제의 경우 모달창을 각각 만들지 않고, 하나의 NoteEditModal상에서 조건문으로 처리해, 하나의 컴포넌트만 사용하도록 했다. 또한 모달창의 디자인은 통일성을 위해 하나의 css를 같이 적용시켜줬다. 사실 모달 컴포넌트는 디자인이 적용된 1개만 만들고, 내부 내용을 props로 넣는 방식으로 하고 싶었는데, 시간상 2개 컴포넌트를 따로 만들어버려 아쉽다.

✅ 3. 구현

제일 먼저 막혔던 부분은 어디까지 redux를 사용해야하는가 였다. 해당부분은 4. 고민했던 부분에 상세히 적어놓았다.

까다로웠던 부분은 조건처리다. 각 페이지마다 노트 수정/archive/trash + pin 기능 존재 여부가 다르고, trash 페이지에서는 완전히 삭제하는 것도 구현해줘야 했다. 이는 과제 영상을 보면서 1. 기능 목록을 작성 했고, 이를 보고 조건문 처리를 해줬다.

노트의 타입은 다음과 같이 설정했다.

export interface Note {
  // 내용
  id: number;
  title: string;
  content: string;
  createdDate: Date;
  // 우선순위, pin 여부
  isHighPriority: boolean;
  isPinned: boolean;
  // 태그
  selectedTags: string[];
  // 색상
  color: 'WHITE' | 'SKY';
  // 상태 (활성, 보관, 삭제)
  state: 'ACTIVE' | 'ARCHIVED' | 'DELETED';
}

✅ 4. 결과물

✅ 5. 고민했던 부분

어디까지 redux를 사용해야하는가?

이전까지는 유저 정보 저장이나, 화이트/다크모트같은 테마를 저장하기 위해 redux를 사용했다. 그런데 이번 과제에서 note앱에서는 redux로 무엇을 관리해야 하는지 잘 모르겠었다.

실제 어플리케이션을 생각했을때, 노트 생성/삭제, archive/trash로 옮기는 것 모두 api를 사용해야 한다고 생각했기 때문이다.
그래서 처음에는 강사님이 알려주는 pocket base로 api를 다 구현하는 것으로 생각했다. 그리고 redux로 관리하는 건
우선순위/날짜 필터링 조건(최신순/오래된 순 중에 무엇을 선택하였는지) 밖에 생각나지 않았다.

나중에서야 아예 모든 걸 redux로 관리해야 하는 과제구나! 를 깨달았다.

폴더 구조를 어떻게 하는가?

사실 강사님이 제공해주신 폴더에서는 feature 로 기능별로 폴더가 분리되어있었다. 사용해보고 싶었으나, 시간 안에 제대로 이해하고 적용하지 못할 것 같아, 평소 사용하던 방식으로 했다. 다음에는 꼭 해당 방식을 사용해보고 싶다!

6. 후기

이번 과제는 api 없이 redux 만으로 모든 걸 구현해야 했기에, 가장 재밌었던 것 같다.

사실 맨 처음에 react를 공부할때, 어렵고 복잡한 redux는 조금 무서운 존재였다. 그래서 그 후에는 사용법이 간단한 recoil이나 jotai를 보면서, redux는 쳐다보지도 말아야지..! 라고 생각했었는데, 이번 기회에 다시 공부해보니, 사용법만 익힌다면 크게 어렵지 않구나를 느낄 수 있었다. 어렸을때 무서웠던 귀신이 크고 나서는 조금 덜 무서워진 느낌이다.

그런데 현업에서는 어떤 걸 쓸지 궁금해졌다. 새로운 걸 적용하기엔 품이 많이 들 것 같은데, redux를 계속 사용할까? 현업에 계신 분들은 라이브러리의 장단점을 모두 비교한 뒤에 결정할 텐데, 프로젝트마다 사용하는게 다를까? 정답이 없는 건지 궁금하다.

또한 리팩토링할게 많이 남은 것 같아 아쉽다. import 순서도 뒤죽박죽이고, 함수/변수 이름또한 만족스럽지 않았다. 코드 작성도 통일성 없이 작성한 것 같다. 시간에 쫓겨 동작을 하는가? 에만 초점을 둔 것 같아, 조금 아쉽다. 시간과 코드리뷰가 얼마나 중요한지 다시 한번 깨달았다.