rohnotes

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 를 활용하여 개발해보고 싶다!

 react와 클라우드를 사용한 세번째 프로젝트였고, 좀 더 제대로 만들고 싶었으나 인원 리소스의 제한으로 가장 빨리 만들 수 있는 방법을 택했고, 지난 프로젝트에서 적용하였던 typescript 를 활용하였다.

 redux에 typescript 를 적용하면서 redux github에 pull request를 했다가 redux maintainer에게 답변도 받고, 내가 만든 기능을 오픈소스로 공개도하는 좋은 경험을 할 수 있었던 프로젝트였다.

 또, back office 기능을 react-admin 을 통해 깔끔하게 만들 수 있었다.

 한가지 아쉬웠던 부분은 비즈니스와 디자인 부분에서 속도가 조금 느렸다는 것이다. 개발은 나와 인턴개발자 한분 둘이서 재밌게 필수적인 것들을 만들어 갔는데, 비즈니스와 디자인부분에서는 완성도를 기다리며 실행을 하지 못했던 것이다.

 부서간 사람간 속도가 참 중요하다는 것을 느낄 수 있던 프로젝트였다.

약 한달간 꾼미디어 홈페이지를 개발하였다. GCP 기반으로 source repository 로 소스코드를 관리하고, cloud build trigger 로 CI/CD를 구성했다. 프론트엔드는 gcp app engine에 배포해두고 백엔드는 gcp cloud functions 기반 microservices 구조로 nodejs를 활용하여 개발하였다.

프론트엔드 개발할 때는 react nextjs 기반 typescript 언어로 aos, axios, react-icons, react-player, react-slick, react-toastify, slick-carousel 등의 라이브러리들을 활용하여 개발했다.

백엔드에서 활용한 메일발송기능은 github 을 통해 오픈소스로 배포해두었다. 링크는 아래와 같다.

https://github.com/ywroh/google-cloudfunctions-sendmail