2023~2024.5 회고

2023

2023년은 심적으로 이슈가 있어서 뭘 했는지도 모르게 지나갔다. 

 

 

기록할만한 사건들은 이렇다.

 

한이음

두근두근 한국사 여행앱

• client: Flutter
• servier: Nest.js
• vcs: gitlab
• infra: kubernetes on raspberry pi
• 이용자가 유적지를 방문하면 유적지와 관련된 역사적 인물의 호감도가 오르고, 특정 임계점을 넘을 때마다 역사적 인물의 스토리가 풀리는 미연시(?) 게임. 한국사와 관련된 공공 데이터를 이용했다.
• 창업 때문에 바빠서 프로젝트를 제대로 완료하지 못했다.

쿠버네티스 스터디

• 쿠버네티스 인 액션
• 10장까지 보았는데 지금은 다 까먹었다. (기록의 중요성... 아이패드에 손필기 했었는데 블로그에 쓸걸 그랬다.)
• 이 또한 창업 때문에 바빠서 제대로 완료하지 못했다.

 

창업

• BoB 그랑프리 수상을 기반으로 해당 주제로 창업을 이어가고 있다.
• 많은 프론트 개발.. 노드 개발.. 
• 각종 행사 참여

 

그래프 구조 데이터를 인프라 구조도 형식으로 시각화하기 위한 미니 렌더링 엔진

• 시뮬레이션 패키지에서 부모 자식 관계 및 커넥션 관계를 고려해 각 노드(svg rect 혹은 circle로 렌더링됨), 커넥션(svg line으로 렌더링 됨)의 좌표 및 크기를 시뮬레이션 한 뒤 렌더러 패키지에서 wrapping 된 d3를 이용해 svg로 렌더링한다. 시뮬레이션 패키지와 렌더러 패키지를 합치면 7000줄 정도 된다.
• hover, mouseenter, mouseleave등 이벤트에 대한 콜백 함수가 지원된다.
• Typescript를 이용하여 개발되었고 다양한 모듈 형식을 지원하도록 컴파일해서 웹 프로젝트 및 Node.js 프로젝트에 이식성이 좋다.
• React 프로젝트에서 사용하기 쉽도록 React component로 감싸고 사용자가 svg를 편리하게 조작(요약, 요소 숨김 등)할 수 있도록 sidebar 컴포넌트를 제공한다.
• verdaccio로 private npm을 구축해 lerna를 이용해 멀티패키지로 배포했다. 
• 컴파일러는 vite를 사용했다. 각 패키지마다 vite.config.ts 파일이 있는데 더 깔끔하게 처리할 방법을 찾지 못했다.
• clean-package를 이용해 배포 전후 각 패키지의 package.json 파일을 알맞게 수정했다.

그래프 데이터에서 인프라 구조도를 렌더링한 모습

각종 창업 대회, 투자 지원 사업, 창업 행사 참여

• 이쪽은 사실 사업화 팀원이 대부분 작업을 해서 나는 숟가락만 얹었다고 할 수 있다.
• 학생창업300에 성장트랙으로 부스를 냈다.

 

많은 Next.js 프로젝트들

• Ant Design, Chakra-ui 등 다양한 UI 패키지를 사용해보다가 주 서비스는 Next.js + tailwindcss로 개발하는 것으로 했다. 다른 작은 서비스들도 점차 다른 의존성을 빼고 tailwindcss만 남기는게 목표다. (최근에 pandacss를 사용해보니 이걸 썼어도 좋았겠다는 생각이 들었다.
• 랜딩 페이지를 많이 만들었다.

 

2024

인프라 이사

• AWS 지원사업을 통해 크레딧을 받아 AWS로 인프라를 이전했다. 
  • opentofu을 이용했고, 처음 ECS를 테라폼으로 구성하는 일을 맡아 며칠밤을 새가면서 했다. 자원 사용량에 따라 배포나 알림을 주는 부분은 제대로 구현하지 못했다.
• 기존에 QA서버가 따로 없었는데 이참에 분리됐다. 프론트 QA 서버는 집에 굴러다니던 라즈베리파이를 들고와서 회사 공유기에 연결해 배포했다. 야생의 스타트업

 

GA4

• 각 서비스 및 랜딩 페이지에 GA4를 붙였다.
• 처음에는 GTM에서 직접 모든 이벤트를 만들었으나, 개발자로서 직접 코드 수준에서 로깅을 처리할 수 있으면 그럴 필요가 없다는 걸 깨달았다. 이런... 
• 사용자 행동 로깅 시에 생각보다 정책 고려사항이 좀 있는게 와닿았다.

 

서비스 독스 개발 - Docusource

• Docusource로 서비스 독스 개발. md 파일, mdx 파일을 통해 빠르게 독스 개발을 할 수 있다. 
• 독스 개발보다 mdx 파일 곳곳에 컴포넌트를 넣고 영번역을 하는게 더 고역이었다.

 

리포트 api 개발

• 기존에 있던 리포트 생성 api에서 디자인적으로 손 볼 부분과 페이지 넘김이 제대로 처리되지 않는 문제를 맡아 고치게 됐다.
• reportlab에서 제공하는 강력한 flowables 클래스들을 사용법을 사용해 빠르게 개발했다.
• 아직 SQL 쿼리 최적화가 필요한 상태다.

 

Storybook

• 주 서비스가 점점 커지면서 개발 속도가 느려지는 문제가 생겨 storybook을 도입했다. 
• 다행히 기존 컴포넌트들은 dumb component와 smart component로 명확히 구분되어 있어서 붙이기 쉬웠다.
• 아직 데이터 mock은 처리하지 않았다.

 

백오피스 개발.. 시도?

• 유저가 생길 때마다 유저 권한을 변경해야하는데, 이를 편리하게 하기 위한 백오피스를 개발하려고 했다.
• 원하는 기능은 이미 다 만들었는데 관리자 인증 기능이 없어서 배포를 하지 못했다.
• pnpm을 이용해 client는 Next.js, server는 Nest.js으로 모노 레포 형식으로 개발했다.
• nestjs-typeorm-paginate를 이용해서 필터링과 페이지네이션을 한번에 하면 반환값 페이지가 일정하지 않은 문제가 발생했다. 깃에 가보니 주요 메인테이너가 한 명인듯 했고 다들 다른 자잘한 이슈를 들고와 흔들고 있었다. (ㅜㅜ)

 

 

---

요즘 드는 생각

프론트를 너무 많이 하긴 했는데.. 사실 프론트는 서비스 메인 로직과는 깊게 연관이 없으니 현타가 종종 온다. 그렇다고 재미없는건 아니다. 코드 조금 바뀔 때마다 화면이 바뀌는게 도파민 나오긴 한다. 

 

사실 프론트 자체보다는 이만큼 했으면 벌써 웹, 노드 생태계와 관련된 것들을 어느정도 알아야 할 것 같은데 스스로 성장이 부족하다고 느껴서 그런 것 같다. 바닥부터 웹팩 세팅을 해보던가, babel이나 swc를 분석해보던가 그런걸 해봐야지 해봐야지 하다가 결국에 json 상하차, UI 노가다를 하는 기분이다. UI 노가다를 할거면 애니메이션을 아주 깔쌈하게 뽑아내기라도 해야지 그것도 아니라. 

 

앞으로 블로그라도 많이 써야겠다. 처리한 이슈들을 다 별 생각 없이 넘겨 버린다.