회고
[우테코] 16편 : 오픈미션 10일차
| 서론
안녕하세요 팡일입니다!
오늘은 우아한테크코스 8기 프리코스의 오픈미션 10일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!
| 오늘 한 일
1) Write 페이지
감정 버튼 기능 추가
2) detail 페이지
감정 리스트 UI 추가
3) update 페이지
감정 리스트 UI 추가
감정 수정 기능 추가
4) 리팩토링
theme 파일 만들어서 디자인 통일화
toast 메세지 컴포넌트화
| 어려웠던 점
1) 하나의 컴포넌트를 여러 상황에 맞게 재사용하는 것
: 회고 서비스에서 ‘감정 선택(EmotionSection)’ UI를 구현해야 했습니다. 하지만 이 컴포넌트는 페이지 상황에 따라 전혀 다른 역할을 해야 했습니다.
글 작성/수정 페이지 → 감정을 선택·취소할 수 있어야 함
글 상세 페이지 → 선택된 감정을 보여주기만 해야 함
두 개의 비슷한 컴포넌트를 만들면 코드 중복이 생기고, 하나의 컴포넌트 안에 if문 분기를 잔뜩 넣으면 유지보수가 어려워집니다. 어떤 구조가 가장 깔끔하고 유연한지 고민이 많았던 부분입니다.
2) 리팩토링 과정에서 발생한 예상치 못한 부작용
: 토스트 메시지를 상수 파일로 분리해 코드 일관성을 높이려는 단순한 리팩토링 작업 중, 글 작성 페이지에서 원인을 알 수 없는 internal error가 발생했습니다. 확인해 보니, 리팩토링 과정에서 함수 호출 로직 일부가 누락된 것이 원인이었습니다. 사소한 변경이라도 애플리케이션의 핵심 기능에 영향을 줄 수 있다는 사실을 다시 체감했고, 원인을 추적해 수정하는 데 예상보다 많은 시간이 들었습니다.
| 배운 점
1) prop과 store가 만드는 유연한 컴포넌트 설계
: 첫 번째 어려움을 해결하는 과정에서, Svelte의 prop과 store 조합이 얼마나 강력한지 체감했습니다.
UI의 행동 방식은 prop(ex: isDetailMode)으로 외부에서 제어하고
실제 데이터(선택된 감정 목록)는 store에서 중앙 관리
이렇게 역할을 명확히 분리하니 컴포넌트의 재사용성이 크게 높아졌고, 데이터 흐름이 분명해져 코드 이해와 테스트도 훨씬 쉬워졌습니다.
2) CSS 변수로 디자인 시스템의 기초 다지기
: 여러 컴포넌트에 흩어져 있던 색상, 폰트 크기 등의 스타일을 app.css의 CSS 변수로 통합하면서 디자인의 기준점을 만들었습니다. 초기 작업은 다소 번거로웠지만, 기준이 생기자 프로젝트 전체의 디자인 일관성이 크게 올라갔습니다. 이제는 app.css 파일만 수정해도 전체 테마를 변경할 수 있어 유지보수성도 훨씬 좋아졌습니다.
3) 리팩토링 후에는 반드시 기능 테스트를 하자
: 토스트 메시지 리팩토링 때 발생한 문제를 겪으며, “작은 리팩토링도 잠재적 버그가 될 수 있다”는 사실을 다시 깨달았습니다. 앞으로는 코드 개선 작업 후, 변경된 부분뿐 아니라 그와 연결된 기능 전반이 제대로 동작하는지 더 꼼꼼하게 테스트하는 습관을 들이려 합니다. 특히, 'npm run check' 명령어를 통해서 변경사항에 대한 부분이 실제 구동에 있어 에러를 발생시키지 않는지 점검해보고자 합니다.
| 내일 목표
1) 고민할 부분
우리 프로젝트에서 단위 테스트는 어떻게?
모니터링 도구 알아보기
2) 랜딩 페이지
후킹할 수 있도록 컨텐츠 수정하기
3) 리팩토링
감정 칩 추가로 인한 변경 사항 고민하기
4) list 페이지
회고 카드에 감정 칩 추가하기
5) Detail 페이지
공유 기능 만들어보기
share 폴더 기반 공유 기능 구현
| 한 줄 회고
: "유연하고 재사용 가능한 컴포넌트 개발 좋습니다!"