[우테코] 20편 : 오픈미션 14일차

| 서론

안녕하세요 팡일입니다!

오늘은 우아한테크코스 8기 프리코스의 오픈미션 14일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!

| 오늘 한 일

1) 기타

• 관리자 페이지 제작

2) QA 진행

| 어려웠던 점 & 배운 점

1) N+1 문제와 데이터 조합하기

(1) 어려웠던 점

: 관리자 페이지의 ‘회고 목록’에는 각 회고가 누구에 의해 작성되었는지 함께 보여줘야 했습니다. 하지만 회고 데이터에는 userId만 있고, 실제 이름은 사용자 컬렉션에 따로 저장되어 있었습니다.

처음 떠올린 방식은 단순했습니다. 회고 목록을 불러온 뒤, 각 항목의 userId로 사용자 정보를 다시 요청하는 방식이죠. 하지만 회고가 50개라면 회고 목록 요청 1번 + 사용자 정보 50번 = 총 51번의 요청이 발생합니다. 이것이 바로 페이지 로딩 속도를 크게 떨어뜨리는 “N+1 문제”였습니다.

(2) 배운 점

: 데이터 요청을 최소화하는 방식으로 구조를 다시 설계했습니다. 먼저 회고 목록을 한 번에 가져온 뒤, 이 목록에서 모든 userId를 추출하고 중복을 제거합니다. 그 다음, 정리된 userId 목록으로 사용자 정보를 한 번의 요청으로 모두 가져옵니다. 마지막으로 앱 내부에서 회고 데이터와 사용자 데이터를 조합해 UI에 출력했습니다.

이 방식 덕분에 총 2번의 요청만으로 필요한 모든 정보를 확보할 수 있었고, 페이지 로딩 속도가 눈에 띄게 개선되었습니다.

2) 재사용 가능한 모달 컴포넌트와 상태 관리

(1) 어려웠던 점

: 회고 목록에서 특정 항목을 클릭하면 상세 내용을 보여주는 모달이 필요했습니다. 처음에는 모달을 일반 컴포넌트로 만들고, 부모 컴포넌트에서 열림/닫힘 상태를 props로 전달하는 방식을 사용했어요.

문제는, 이 모달을 다른 페이지에서도 재사용하려고 하면서 드러났습니다. 상태를 전달하는 코드가 페이지마다 반복되고 구조가 복잡해질수록 관리가 힘들어졌습니다. 특히 여러 컴포넌트 사이를 거쳐 상태를 전달하는 것이 가장 번거로웠습니다.

(2) 배운 점

: 상태 전달의 복잡함을 해결하기 위해 Svelte Store를 사용해 모달 상태를 전역으로 관리하도록 바꿨습니다. 모달의 열림 여부와 표시할 데이터를 저장하는 스토어를 만들고, 어떤 컴포넌트에서든 store.open(데이터)만 호출하면 모달이 바로 열리도록 구성했습니다. 모달 컴포넌트는 스토어를 구독하고 있다가 값이 바뀌는 즉시 자신이 화면에 나타나거나 사라지도록 동작합니다.

이 구조로 바꾼 뒤, 컴포넌트 간 의존 관계가 사라지고, 코드가 훨씬 단순해지고, 어떤 페이지에서도 동일한 모달을 그대로 재사용할 수 있는 깔끔한 구조를 갖출 수 있었습니다.

| 내일 목표

1) QA

• QA 진행하기

• 받은 QA 정리하기

2) 공유

• 카카오톡 공유하기

• pdf 또는 이미지로 저장하기

3) 로그인/회원가입

• 비밀번호 찾기 기능 추가하기

• 회원가입 시, 개인정보처리방침 추가하기

4) 고민할 부분

• 모니터링 도구 알아보기

| 한 줄 회고

: "이제 완성도를 더 높여봅시다!"