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

2023년 10월부터 2024년 4월까지 6개월 동안 채권관리프로그램 개발 프로젝트에 참여하였다.

DB 는 postgresql,

백엔드는 java, spring

프론트엔드는 react, nextjs 로 구성돼어 풀스택 개발을 하였다.

기존 프로그램을 마이그레이션 하는 프로젝트였는데,

기존 DB 의 구조를 이해하는데 어려움이 있었고,

앞으로 내가 더 공부하고 익숙해져야 하는 부분임을 알게 되었다.

백엔드는 워낙 잘하시는 분이 구조를 잡아주어 큰 어려움 없이 디테일한 부분을 학습해가며 개발할 수 있었고,

프론트엔드는 react query 로 server state 를 관리하는 게 마음에 들었고,

global state 는 recoil 로 관리하여, 나름 디테일한 스킬을 보완할 수 있었던 프로젝트였다.

 2021년 3월부터 2022년 2월까지 1년간 스타트업 수공에서 웹사이트와 앱을 개발하였다.

 처음 수공으로 갔을 때 웹사이트와 어드민은 개발되어 운영중이었고, 마스터(수리 기사님들)용 안드로이드앱은 개발 중이었다. 이 당시 아키텍쳐는 프론트엔드는 react 로 되어 있었고, 백엔드는 ruby, 인프라는 aws ec2 등으로 구성되어 있었다. 내가 입사한 이후 기존 개발자 분들 4분이 모두 다 퇴사하시고, 훌륭한 분들이 입사하셔서 내가 퇴사할 때는 개발팀이 6명까지 되었다.

 마스터용 안드로이드앱은 한 개발자분이 담당하셔서 나는 개발환경까지만 세팅하고 개발에 기여한 부분이 없었다.

 기존 개발자분들이 퇴사하시고, 안드로이드 개발자 한 분과 프론트엔드 개발자 한 분이 있었는데, 이 때 나는 내가 백엔드 이외에 다른 모든 개발내용을 알아야겠다고 판단하고, 백엔드에 집중하기 보다는 생산성을 높이기 위해 최근 프로젝트에서 활용했던 amplify 를 이용해 개발해보려 했으나 한 달이라는 시간내에 react-admin 과 카테고리 관리 기능 등의 기본적인 세팅까지만 마치고 amplify 를 이용한 개발은 멈춰야 했다.

 이후 백엔드 개발자 한 분이 오셔서 java springboot 로 기존 database 를 활용하는 방법으로 새롭게 개발을 시작하였다. 이 때 나는 springboot 를 aws lambda 로 배포하는 것을 테스트해보고, 이후 ecs 를 활용하여 개발, 테스트, 메인 서버를 구성하였다.

 그리고 프론트엔드는 aws amplify 를 통해 nextjs 를 배포하니 버지니아에 배포되어 서버가 느린 현상이 발견되어, serverless 를 활용하여 aws lambda@edge 로 배포하여 프론트엔드 서버 속도를 향상 시켰다. 웹사이트 메인서버 릴리즈 직전에는 카카오, 네이버 등 SNS 로그인을 연계하여 문의가 접수되는 프로세스를 개발하였다.

 이렇게 개발되어가는 중 백엔드 개발자 한 분이 오셔서 어드민 프론트엔드와 백엔드를 개발하셨는데, 이때 해당 개발자 분이 백엔드를 희망하는 것을 확인하고 내가 어드민 프론트엔드를 맡겠다고 했고, 어드민 프론트엔드를 일부 작업하다가 웹사이트 프론트엔드 작업이 많아져서 다시 웹사이트 프론트엔드 작업을 하였다. 그리고 웹 백엔드 작업도 일부 참여하였다.

 웹백엔드에서 어드민 백엔드 서버 분리가 필요하다고 하여 어드민 백엔드는 ec2 와 로드밸런서 등을 활용하여 구성하였고, ecs 배포 시간이 오래걸려서 웹 백엔드 개발서버도 ecs 에서 ec2 로 변경하였다.

 이렇게 백엔드와 프론트엔드의 인프라 부분을 작업하면서 github action 을 활용하여 CI/CD 도 세팅하였다.

 그리고 프론트엔드 개발자 한 분이 더 채용되셔서 개발자 6명이 팀이 되었고, 나는 리액트네이티브 웹뷰를 활용하여 안드로이드 앱과 iOS 앱을 배포하였다. 리액트네이티브 앱은 외주업체에서 2주간 작업하여 넘겨준 소스코드가 있었는데, 앱 웹뷰와 웹사이트가 통신하는 것과 카카오, 애플로그인이 자연스럽게 이루어지도록 웹사이트 프론트엔드 작업과 일부 백엔드 작업도 하였다.

 내가 수공에서 일하며 가장 중요하게 생각했던 것은 인프라, 소스코드에 대한 권한을 모두다 공유하고 이상적인 개발환경에서 일하는 것이었다. 이 부분에 대해서는 잘 이루어져서 좋은 팀을 이루고 떠나게 되어 기쁘다. 단 한 가지 아쉬운 점은 이런 상황에서 내 포지션을 명확히 하지 못했다는 것이다. 왜 프론트엔드와 백엔드를 구분해야 하는가? 에 대한 여러 이유 중 한 가지를 배울 수 있던 시간이었다.

 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

짧은 시간안에 개발이 필요하여 워드프레스 기반으로 모임서비스를 만들었다.

개발서버를 따로 구축하지 못하고 atom 을 이용해서 운영서버에 ftp로 접근하여 바로 작업을 하였다.

각종 플러그인들 수정작업까지 하게되어 wordpress, php 에 대해 깊이 배울 수 있는 프로젝트였다.

다음에 이와 비슷한 서비스를 개발하게 된다면, 클라우드 서버를 활용해서 dev, test, prod 환경을 구분하고, 기획 디자인은 figma 를 활용하고, 프론트엔드는 react 나 최신 js 기술을 활용하고, 백엔드는 상황에 맞추어 개발을 하고 싶다.