rohnotes

저번주 주말에 토스뱅크 프론트엔드 24시간 과제에 참여했다.

과제 내용에 대한 구체적인 언급은 하면 안되기에 기술적으로 내가 부족했던 부분에 대한 후기를 남긴다.

과제 수행 요약

1. 17개의 커밋을 하고 과제를 마쳤다.
2. 주요 라이브러리는 아래 4개를 사용하였다.
   1. RHF(react hook form)
   2. react-query
   3. zustand
   4. zod

부족했던 부분

1. zod > safeParse 를 사용하여 api 를 통해 가져온 데이터를 검증하였고 에러처리를 하였는데, 에러가 발생했을 때 사용자에게 좀 더 자연스러운 UI 를 제공할 수 있는 방법이 없을까 하는 의문이 들었다.
2. src 구조를 크게 api, components, constants, hooks, schemas, stores, utils 로 구분하였는데, components 의 구조를 atomic design, container-presenter, wrapped 패턴 등으로  더 구체적으로 하지 못해서 아쉬웠다.
3. 다른 라이브러리에 비해 상대적으로 RHF 사용이 익숙하지 않고, 특히 controlled, unControlled 컴포넌트에 대한 이해도가 부족했던 부분도 아쉬웠다.

이번 과제를 통해서 그동안 내가 쌓아온 여러 스킬들을 사용해 볼 수 있어서 좋았고,

부족한 부분들도 알게되어서 좋았다.

2024년 4월 부터 2025년 2월까지 카운터컬쳐컴퍼니에서 근무하며,

댄스보컬 온라인교육 사이트를 개발하였다.

백엔드는 strapi 와 rdb 로 구성되었고,

나는 프론트엔드를 담당하여, react, nextjs 로 개발하였다.

내가 직접 개발하진 않았지만 strapi 의 생산성을 다시 한 번 느낄 수 있었고,

프론트엔드 부분은 이전 프로젝트에서 보다 디테일한 부분을 더 보완하여 개발하였다.

가자 큰 원칙으로는 한 파일당 200 줄이 넘어가지 않도록, 한 commit 당 50 줄이 넘어가지 않도록 노력하며 개발을 하였다.

atomic 디자인을 통해 atoms, molecules, organisms, templates, pages 단계로 뷰 컴포넌트를 관리했는데,

atoms 는 스타일과 props 만 담고 있고,

molecules 는 atoms 의 조합,

organisms 는 가장 지저분한 단계일 수 있지만, 간단히 각 templates 에서만 사용되는 뷰와 상태가 포함된 컴포넌트,

templates 는 page 별로 하나씩 존재하며, organisms 의 조합이며 뷰와 상태가 포함된 컴포넌트,

pages 는 데이터와 template 을 매핑 시키는 단계, server state 나 브라우저 상태를 관리하는 컴포넌트.

이렇게 구분하면 될 것 같은데, 실제로는 templates 에서 server state 를 많이 사용한 것 같다.

local state 는 useState 로, gloabl state 는 zustand 로, server state 는 react-query 로 관리하였다.

페이지별 custom hook 으로 local state 를 관리하여,

store 라는 디렉토리로 global state 를 관리하고,

root custom hook 으로 server state 를 관리했는데,

다음에는 하나의 hooks 디렉토리로 local, global, server state 를 구분하여 사용하여도 좋을 것 같다!

이번에는 zod 라는 라이브러리를 활용하여 api response 로 받은 데이터를 zod 로 타입을 체크하여, 백엔드 데이터가 달라지거나 null 이나 undefined 로 들어오면 error 가 뜨도록 의도하여 개발하니, 뭔가 타이트하게 체크하는 느낌이 들어서 좋았다.

프로젝트 막바지에는 새로오신 개발자분이 typescript class 를 활용을 잘해주셔서 class 도 조금 활용해볼 수 있었는데,

다음 프로젝ㅌ에서는 state 와 zod 로 관리했던 내용을 class 를 활용하여 개발해보고 싶다!