앱센터 3번째 차시 - 투두리스트 2탄

앱센터 3주차이자 4주차이자 5주차(?) 내용입니다.

이번에 해볼 것은 아래와 같습니다@!

✏️📋
1. 코드 리뷰 기반 리팩토링
2. 다크모드 추가하기
3. 페이지 추가하기
4. 추가하고 싶은 기능 구현!
~~차근차근 ㄱㅂㅈㄱ~~

1. 리팩토링

먼저 코드 리뷰 보면서 많은 인사이트를 얻을 수 있었는데요.
코드 리뷰 기반으로 하나씩 수정해보려고 합니다.

🍕 안쓰는 의존성은 제거하기
파일들을 보니 가끔 사용하지 않아 불필요한 import문이 존재하더라고요.
필요하지 않은 의존성은 제거해주었습니다.

🍕 페이지 폴더 만들기
기존 방식 : app.tsx에 바로 UI를 작성.
수정 후 : 페이지 폴더에 내용을 넣고 app.tsx 파일에서는 페이지 단위로 라우팅 설정 내용만 들어가도록.

🍕 코드 포맷터 사용하기
prettier와 같은 코드 포맷터 사용하여 스타일 일관성 부여하기.
prettier를 사용해보니 저장할 때 자동으로 정리가 되는 게 너무 편했습니다.

🍕 2칸 들여쓰기 사용하기
기본 설정은 4칸 들여쓰기로 되어 있었는데, 4칸 들여쓰기 사용시 오른쪽으로 너무 밀려 Tailwind css 등을 사용시 가독성이 떨어진다는 리뷰를 받았습니다. 아래 방법을 통해 간편하게 2칸 들여쓰기로 설정을 바꿔줄 수 있었습니다!

가. 하단에 Spaces: 4 버튼 누르기
나. Indent Using Spaces 누르기
다. 숫자 2 누르기
라. 저장하기

🍕 Tailwind 클래스 순서
Tailwind 클래스는 아래와 같은 순서를 지키는 게 보기 좋다고 합니다.
레이아웃 → 색상 → 테두리 → 상태 · 애니메이션
(추가로 한줄로 너무 길어질 때에 대한 여러 방법이 존재하니 찾아보자.)

🍕 tailwind.config.ts
코드 리뷰에서 tailwind.config.ts 파일이 없다는 내용을 봤습니다.
그래서 찾아보니 Tailwind/vite v4.1 버전은 tailwind.config.ts 파일 없이 css 파일에 theme 문법을 사용해서 사용하는 방식이라는 것을 알게 됐는데요.
아래 링크가 깔끔하게 잘 정리가 되어 있어 참고하면 좋을 것 같습니다.
🔗tailwind/vite v4.1 초기 사용법

🍕 EOL 문제
파일마다 EOL, 즉 개행을 해야 오류가 나지 않는다고 합니다.

🍕 아이콘 UI -> svg 포맷 권장
기존에는 png 포맷을 사용해서 아이콘을 사용했는데, svg 포맷을 더 권장한다고 합니다. 이유를 조금 더 찾아보니 svg 포맷을 사용하면 색상, 크기, 투명도 등 css 스타일링이 가능하기 때문에 권장한다고 하네요!

(추가로 직접 아이콘을 추가하지 않고 react-icons 라이브러리를 사용하는 방법도 
있어 참고하면 좋을 것 같습니다.)

🍕 데이터 흐름 수정
기존에는 각각의 파일에서 localstorage에 접근하기 때문에 상태공유와 즉시반영 등이 어려운 비효율적인 방식이었는데요. 그리하여
-> app.tsx(TodoItem.tsx) 파일에서 localstorage에 접근하고 관리하고, 각 파일에서는 props를 내려받아 사용하는 방식으로 수정하였습니다!

🍕 trim 함수 추가
아무 내용도 입력하지 않아도 할 일 추가가 되는 것을 방지하기 위해 trim 함수를 추가하여 조건을 만들어주었습니다. 그 결과, 아무것도 입력하지 않으면 아래와 같이 팝업창이 뜨도록 구현했습니다.

2. 다크모드 추가하기

다크모드의 경우 Context API를 사용해서 구현했습니다..
-> 한 군데에서 관리하고 모든 컴포넌트가 쉽게 구독하고 제어할 수 있도록 함.

기본 흐름은 다음과 같습니다.
1. ThemeContext.tsx에서 전역 상태 관리
2. 사용자가 아이콘 클릭시 ThemeContext의 isDark 상태가 바뀜
3. HTML에 dark 클래스 적용
4. Tailwind가 자동 스타일 전환

++ 미리 말하자면 3번의 페이지 추가 후에도 다크 모드가 동일하게 적용되도록 해주었습니다.

3. 페이지 추가하기

이번에는 페이지를 추가하여 완료한 할 일 목록만 보여주는 기능을 추가해보았습니다. 아래 코드와 같은 방식으로 라우터 설정을 해주면 됩니다.

<Route path="/done" element={<DoneList />} />

4. 추가하고 싶은 기능 구현!

이것저것 테스트하며 구현을 해보니 완료한 할 일 목록이 중간중간 껴있으니 너무 지저분해 보이는 것을 발견했습니다,, 그래서,,,,,

1. 완료한 일은 위로 정렬이 되도록 설정해주고,
2. 사용자가 임의로 할 일 리스트의 순서를 조작할 수 있도록 해보았습니다!

updated.sort((a, b) => (b.isDone ? 1 : 0) - (a.isDone ? 1 : 0));

상태	숫자 변환	결과 위치
미완료(false)	0	앞쪽으로 정렬
완료(true)	1	뒤쪽으로 정렬

위 표와 같이 동작하여 완료 체크를 하면 배열의 뒤로 이동되도록 했습니다.

드래그 기능은 @hello-pangea/dnd 라이브러리를 사용하였습니다.
아래 흐름대로 동작합니다.
기존 todos 배열 복사
드래그로 선택된 항목을 원래 자리에서 꺼냄
새 위치에 끼워 넣음
상태 업데이트 → 화면이 새 순서로 갱신됨
❗이미 완료된 할 일은 드래그 자체가 불가능하도록 막아두었습니다❗

> ☃️❄️최종 배포 링크 -> 🔗투두리스트 최종!! ❄️☃️