[WIL] 항해 플러스 프론트앤드 6기 6주차 회고 (+ 항해99 추천인 코드)

하늘·2025년 8월 17일

드디어 클린 코드 챕터가 끝이 났다. 길었다면 길고 짧았다면 짧은 클린 코드 주차. 원래 기억은 항상 휘발됨과 동시에 미화된다고, 할 때는 죽을 것처럼 어렵고 힘들었는데 막상 끝나고 보니 이런 챕터 또 없는 것 같다. 3주 동안 테오 미워 하지만 고마워요만 말하고 다녔다. ㅜㅜ

이번 주차는 FSD 아키텍처 적용 및 전역 상태 관리 라이브러리와 Tanstack Query를 사용하고, 최종 과제에서는 나만의 폴더 구조를 만들어 가는 것이다. 사실 다 하지는 못했다. 시간이 촉박하기도 했고, 어려웠고(제일 중요), 그동안 미룬 숙면들이 한꺼번에 들이닥쳤다. 진짜 졸면서 배포하고, 확인하고, 실패하면 또 배포하고 이런 식.

그리고 이번 주에는 구린내 클럽에 가입했다. 사연이 깊다.

4주차부터인가? PR 제목 도용 방지를 위해 여렌 예거가 제목에 🦍 고릴라를 넣었는데, 이를 시발점으로 한 명씩 제.꾸(제목 꾸미기)를 하기 시작했다. PR을 올리려고 하는데, 타 팀의 누구누구 님이 제목에 🧦 달길래 나도 달았더니 사실 구린내 클럽이라며 스카우트를 당했다.

지난 주차가 조타이를 활용해서 과제를 풀어 나가는 거였는데, 나는 조타이를 정말 싫어했기 때문에 ㅜㅜ 구린내 클럽은 조타이 말고 주스탠드를 쓰기로 했다. 그리고 미취학아동인 민준이에게 설명하듯 쉽게 쉽게 설명하는 룰을 정했다. 아무튼 구린내 클럽에 가입해서 이런저런 질문들도 물어보고, 여러 수다도 떨었다.

ㅋㅋㅋㅋㅋㅋ

아무튼 각설하고.. 정상적인 회고를 작성하려고 한다.

✅ Keep

잘 작동했던 것, 효과가 있었던 것, 계속 유지하고 싶은 습관이나 방식

FSD라는 것을 항해 들어오면서 처음 들었다. 나는 그간 실무에서 폴더를 /hooks, /components 식으로 나누고 그 안에서 여러 도메인에 따라 폴더를 생성해 나갔다. 프로젝트의 볼륨이 커지면 커질수록 폴더를 어떻게 나누어야 할지에 대한 고민은 커져만 갔고, FSD가 그 갈증을 해소해 줄 줄 알았다...!

하지만 너무 어려웠다. entities? features? 어느 기준에서 나누어야 할지 몰랐는데, 구린내 클럽과 함께 다른 팀과 우리 팀의 의견을 종합해 보니 엔티티는 정보고 피처는 행동이다라는 결론을 내렸다. 그 결론 토대로 작업을 해 나가니 조금 수월한 편이 있었다.

과제에 이런 내용이 있다. 게시글 관리 어드민 대시보드였는데, 게시글을 불러오는 API와 유저 정보를 불러오는 API를 조합해 게시글 + 유저 정보를 불러오는 API가 따로 있었다.

/entities/posts/api/api.ts에는

export async function fetchPosts(limit: number, skip: string) {
  const response = await httpClient.get(`/api/posts?limit=${limit}&skip=${skip}`);
  if (!response.ok) throw new Error('게시물 조회 실패');
  return response.json();
}

처럼 posts만 불러오는 패치 함수를 넣고,

/entities/user/api/api.ts에는

export async function fetchUserBasic(): Promise<{ users: UserBasic[] }> {
  const response = await httpClient.get('/api/users?limit=0&select=username,image');
  if (!response.ok) throw new Error('유저 조회 실패');
  return response.json();
}

users를 불러오는 패치 함수를 넣고,

그 둘을 조합하는 함수는, /features/posts-list/api/api.ts에 적용했다.

export async function fetchPostsWithAuthors(limit: number, skip: string) {
  const [postsData, usersResponse] = await Promise.all([fetchPosts(limit, skip), fetchUserBasic()]);

  return {
    posts: postsData.posts.map((post: Posts) => ({
      ...post,
      author: usersResponse.users.find((user: UserBasic) => user.id === post.userId),
    })),
    total: postsData.total,
  };
}

fetchPosts와 fetchUserBasic(유저 한 명 정보를 불러오는 API가 따로 있어서 네이밍을 basic으로 했다.) 함수를 같이 불러와야 하니 Promise.all로 처리해 주고, 필요한 정보를 return으로 넘겼다.

이런 식으로 다른 함수인 add-post나 delete-post 등은 다 features 폴더에 작성했다.

여기까지 해 놓고 나는 이게 되게 수월하다고 느꼈지..

⚠️ Problem

어려웠던 점, 막혔던 부분, 아쉬웠던 점

사실 하면 할수록 의문점만 생겼다. 이렇게 뎁스를 많이 타는 게 옳은 방식일까? 2팀 도은 님도 그렇고 나도 뎁스를 많이 타는 폴더 구조를 그닥 좋아하지 않는다. 그리고 이 FSD를 회사 개발팀에게도 공유했다.

반응이 없다.

다들 싫어하는 게 분명할지도.

나도 같은 생각이다. 너무 복잡하다. 단순 폴더 구조를 위해 알아야 할 것들이 많은 것 같다. 내가 너무 단편적인 것만 생각하고 느낀 불호 감정인지 궁금하다. 실무에서 FSD를 사용하는 데는 어떻게 사용하는지 궁금하다. 준형 님네 회사에서 사용한다고 들었는데, 나중에 옆에 가서 들어야지. ^^

🚀 Try

다음 주에 시도해 보고 싶은 것, 개선하고 싶은 점, 새로운 도전

시간이 없었다. 이번 과제는 기본 - 심화 - 최종까지 있는데, 최종까지 가지도 못했다. 사실 심화도 다 하지 못했다. 너무너무 어려웠다. 특히 Tanstack Query에서는 구현도 다 하지 못했다. 너무 오랜만에 사용하기도 했고, 시간도 없어서 그냥 몇 부분은 AI한테 돌리고 자 버렸다. 새벽에도 자다깨다 하면서 배포 잘되었는지 확인하고, 안 되면 다시 일어나서 졸린 눈으로 다시 수정하고 배포하고 이런 식.

다른 분들 보니까 새벽까지 과제하고, 제출하고 PR 작성하더라. 지호 님은 졸면서 했대... (그런데 라이트 테마 뭐예요?)

프록시 설정 때문에 배포가 잘 안 되었는데, 아예 몰랐다면 제출도 못 했을 거다. 미리 알려 준 준형 님과 창준 님, 용훈(항해 손석구) 님에게 감사감사를 전합니다아.

다음 주는 테스트 코드다. FSD는 그렇다 쳐도 테스트 코드는 진짜 처음인데, 벌써 무섭다. 다음 주차도 구린내 클럽과 같이 할 생각이라서.. 사실 그렇게 큰 걱정은 안 된다. 그때도 빨리 푸쉬 올려 배끼게 하겠지?

구린내 클럽이 좋은 이유. 다 살려 달라고 한다.

늘 WIL에 나오는 이야기 같지만 시간을 더 잘 쓰고 싶다. 이번 주는 특히나 시간이 없을 거라서, 과제를 정상적으로 진행해 나갈 수 있을지도 의문이다. 다른 사람들이 나를 헤르미온느~~헬머니~~라고 부르는데, 사실 잘 모르겠다. 나는 잠도 많고, 해야 할 일도 많고... 아무튼 테스트 코드 주차도 올 패스로 넘어갈 수 있기를. ㅠ

그외

4, 7 페어팀 회식을 다녀왔다. 그동안 보지 못한 의근 님과 소희 님도 뵙고, 이런저런 이야기하면서 새벽이 되어서야 집에 들어갔다. 늘 말하고 다니고 생각하는 거지만 우리 팀은 기운이 좋은 것 같다. 병준 님은 회사 최종 합격을, 수민 님은 이력서 넣으면 다 합격, 그리고 송이 님도 좋은 소식이 있고....... 이게 베스트 팀 아니면 뭐지? 인생네컷~~인생니꺼~~도 찍고 아주아주 좋았다. 재미있었어요.