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

하늘·2025년 8월 8일

반드시 기억해, 개발자. Props으로 "줄 건 줘"

이번 주 과제는 Props drilling를 한계까지 경험하고, Jotai라는 전역 상태 라이브러리를 통해 Props drilling을 개선해 나가는 방식이다.
나에게는 반갑고 재미있었던 과제였었다. 에이전시에 다니는 나는, 매번 프로젝트가 시작될 때마다 바뀌는 디자인에 대해 디자인 시스템을 거진 3년 동안 맡아 와서 어디부터 어디까지 Props로 넘길지, 아니면 UI 컴포넌트인데도 전역으로 빼야 할지 아리쏭했기 때문이다.

그리고 이번 과제를 진행해 나가면서, 지난 클린 코드 주차에서 아쉬웠던 부분인 AI 의존성을 과감하게(!) 버리고, 네이밍이나 귀찮은 부분, 그리고 배포만 AI ask로 물어보고, 두뇌 풀 가동으로 과제를 진행해 나갔다.

과제를 진행해 나가면서 부딪힌 트러블 슈팅 같은 것도 수민 님이 말한 15분의 법칙? 을 적용했다. 일단 고민해 보고, 모르겠으면 우리 팀 호출. 여기 인간 디버깅 많아요. 수민 님, 빵도리, 그리고 4 7 팀원분들 다 땡큐땡큐.

자세한 내용은 아래에서 후술하겠다.

✅ Keep

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

출처: https://www.youtube.com/shorts/u86KSUc9Ngg 코딩 애플

토요일에 술을 ㅋㅋ 거하게 ㅋㅋ 먹고 일요일까지 회복하다가 월요일부터 과제를 시작했었다. 갓생러들은 토요일 발제를 듣고 바로 과제를 시작했는데, 그분들 이야기를 빌리자면 지난주차와 동일하게 어디에서부터 손을 대야 할지 모르겠다는 소식이 들려왔다. 나 또 AI 써야 하는 거야..?

월요일에 막상 코드를 까 보니까 생각보다 할 만 했다. 위에 서술했듯 나는 UI 컴포넌트 제작을 거의 매 프로젝트마다 도맡아서 작업했다. 이 말은 Props의 지옥을 3년 동안 경험해 왔다는 건데, 작업을 하면서도 내가 이렇게 하면 나중에 개발할 때 힘들지는 않을까? 데이터 바인딩 하다가 Props를 뿌려 줘야 할 텐데 어디에서 뿌리고 이거를 또 어디에서 받지? 이런 생각을 계속 해 왔었기 때문에 수월했었던 것 같기도.

나는 엔티티라는 용어도 처음 들었다. 내가 아는 엔티티는 게임 속 세계관인데.. UI 컴포넌트가 아닌 것은 엔티티라고 일단은 머릿속에 욱여넣었다. 그리고 테오에게 책 하나를 추천받았다.

~~수민 님이 이거 하루 만에 완독할 거라고 하셨는데.. 하셨으려나?~~

책에서는 엔티티 컴포넌트 안에서 계산, 데이터, 액션이 있고, 이걸 무슨 기준으로 나눠야 하는지 설명하고 있다. 아직 초반만 읽어서 뒤에 나올 이야기는 모르는데, 책이 지루하지 않고 재미있었다. 어려운 용어 떡칠 대신 피자집 같은 예시로 설명해 주는 게 딱 내 취향.

페어 팀끼리 모여서 엔티티가 무엇인가, 엔티티와 UI 컴포넌트의 차이에 대해 토론한 적이 있었다. 물론 빵도리 주최. 빵도리는 이런 이야기를 주고받으며 인사이트 얻는 걸 좋아하는 것 같다.

이야기를 하면 할수록 갑자기 엔티티에 대한 생각이 물음표로 향했다.

엔티티탈트 붕괴 현상의 현장.

일단 나는 ㅋㅋ 이게 맞나? 싶은데..
퍼블리셔가 UI 컴포넌트 작업할 수 있으면 UI 컴포넌트고, 퍼블리셔가 기획자에게 엥? 이거는 프론트단에 넘겨야 할 것 같아요. 하면 엔티티라고 이해했다.

뭐, 아무튼, 결론은 이해했다고. 엔티티랑 UI 컴포넌트의 차이를 발견한 내 머리가 잘 작동했다.

⚠️ Problem

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

과제를 하다가 특정 부분에서 막혔다. 분명 잘 작동하는 것 같은데, 테스트에서 오류가 생기는 거다. 일단 질문지 잘 작성하고 인간 디버깅들에게 질문하러 가니까 그분들이 들려준 솔루션대로 해도 여전히 안 되는 거다. AI도 패 봤다. 안 된다.

설마 싶어서 테스트 코드를 까 보니까 해답이 나왔다. Jotai의 Provider를 Main.tsx에 넣었는데...

테스트 코드는 App.tsx만 바라보고 있어서 오류가 났던 것....

이걸로 세 시간을 허비했다. 사실 허비라기보다는 다음에 똑같은 문제가 있을 때 무슨 문제인지 바로 알 수 있겠지. ㅎㅎ....

🚀 Try

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

이런 식으로 폴더를 짜 놨다. 이게 맞나? 이렇게 해야 좋나? 싶다. 다음 주는 바로바로 관심사 분리와 폴더 구조인데, 내 의구심을 해소해 줄 것 같다. 사실 나는 저것도 되게 잘 분리한 것 같은데. ㅎㅎ 아닌가?

그외

1주차 회고에서 이런 문단을 적은 적 있다. Github Actions에서 얼마 없는 내 돈을 털어 가려고 하길래.. 그동안 수동 배포로 진행해 왔는데, 이번 주차는 과제도 일찍 끝내고 시간적 여유가 있어서 이 이유에 대해 해결했다. 자세한 내용은 여기에.

입추가 시작됐다. 그래도 너무 덥다. 더워서 입맛이 진짜 죽어 버렸다. 아무것도 먹기 싫어서 정말 배고플 때만 간단한 거 위주로 먹으려고 하는데, 수요일 코어 타임 때는 정말 아무것도 먹기가 싫어서 하루 종일 굶었다. 목소리에서도 티가 났는지 또히 님이 걱정해 주었다.

머리 쓰니까 배고파져서 잠봉뵈르 시켜 먹었다.