2022년

2022년 저의 모든 키워드는 '성장'에 초점이 맞춰져 있었습니다.

개발 분야에서 저는 1년 사이 몰라볼 정도로 엄청난 성장을 이룩해냈고, 그 성장에 커다란 자부심을 느낍니다.

2023년에도 이 성장곡선이 지속될 수 있도록, 기존의 기술들을 다듬으면서 새로운 도전을 이어나가고자 합니다.

요약

  • 이직을 했습니다. 익숙한 PHP 환경 대신 새로운 도전을 해야하는 곳으로 둥지를 옮겼습니다. 너무도 오고싶었던 회사여서 기쁘게 잘 적응할 수 있었습니다.

  • 산업기능요원을 시작했습니다. 3주 군사훈련도 마쳤고, 전역일인 2024년 5월까지 사고 안 치고 잘 마무리하면 됩니다.

  • 사이버대 3학년을 마쳤습니다. 이제 내년만 끝내면 최종학력을 ‘4년제 대학교 졸업’으로 적을 수 있게 됩니다!

    • 요즘은 필요없다고 다들 말은 하지만, 그래도 있어서 나쁠 건 없다는 생각 하에 정보처리기사 자격증을 취득할 계획이 있습니다.

  • 막판에 코로나에 걸려버렸습니다… 그리고 생각보다 엄청 아팠습니다… 그래도 다행히 일단 회복한 채로 출근은 하고 있습니다. 목도 아프고 기침도 끊이지 않는 등 후유증이 계속 남아있는데… 얼른 완전히 낫길 바라봅니다.

  • PHP 개발자에서 TypeScript 개발자로의 전환을 완벽히 성공했습니다.

    • ‘완벽히’라는 말은 기존에 PHP로 하던 일의 대부분을 TypeScript, 특히 NestJS로 할 수 있게 되었다는 뜻입니다.

    • 여전히 PHP를 만질 기회가 있긴 합니다. 저는 이게 나쁘다고는 안 보는게, 아직도 국내 웹사이트 중엔 레거시 PHP로 되어있는 서비스가 수두룩 빽빽합니다. ‘주니어 PHP 개발자’의 씨가 완전히 말라버린 상황에서 앞으로 점점 더 PHP 개발자는 귀해져 갈 것이고, PHP 레거시를 신규 기술 스택으로 바꾸려는 니즈는 폭발적으로 늘어날 것이라 전망합니다. 그런 시장의 흐름 속에서 ‘높은 수요 낮은 공급’ 언어의 개발자는 언제나 환영받습니다.

  • Twip App을 통해 처음으로 ‘서비스 런칭’이란 걸 해봤습니다.

    • 모바일 프로덕트 팀의 일원으로 반년동안 열심히 달렸고, 비록 잠시 멈췄지만 내년에는 다시 재밌는 프로덕트를 만들어보고 싶습니다.

  • 2022년 한 해동안 무려 12개의 사이드 프로젝트를 해냈습니다. 그 중 클리피라는 대규모 프로젝트도 진행해봤습니다.

    • 사이드 프로젝트를 진행하며 가장 중점을 둔 부분은 ‘하나라도 얻어가자’ 였습니다. 내 시간과 에너지를 투자해서 사이드 프로젝트를 진행하는데, 맨날 쓰는 기술, 아키텍쳐만 고집하면 얻어갈게 아무 것도 없으니까요. 가능하면 한 가지 이상 새로운 기술이나, 뭔가 다른 방식을 적용해보는 걸 시도해보려고 노력했습니다. 그리고 그 원칙을 꽤 잘 지킨 것 같습니다.

    • 각 사이드 프로젝트별 세부 내용은 아래에 상세히 기록해봤습니다.

  • 2022년의 개인 개발 성과에 대해 매우 뿌듯하고 큰 자부심을 느끼지만, 이것은 앞으로의 성장을 뒷받침할 동기이자 열정의 원동력으로 작용해야지, 자만심과 허영심으로 변질되면 안 됨을 항상 새기고 있습니다.

  • 이력서에 추가할 수 있는 기술이 다수 생겼습니다 : NestJS, Next.js, Redis, Kubernetes

  • (인턴이지만) 면접관으로 처음 면접에 참석해봤습니다. 제가 더 긴장되더라구요. 내가 질문을 던지면서도 내가 많이 부족함을 느꼈고, 더 열심히 공부하고 수행에 정진해야겠구나 하고 다짐했습니다.

  • 2023년에는 활동 범위를 사이드 프로젝트뿐 아니라 오픈소스로도 넓혀보고 싶습니다.

  • ‘풍부한 아이디어’를 ‘현실 프로덕트’로 만들어낼 수 있는 슈퍼 풀스택 개발자, 세기의 제네럴리스트가 되기 위해 비상하는 2023년이 되었으면 좋겠습니다.

개발 히스토리

2022년 1월 2일 당시의 나와 2023년 1월 2일 현재의 나를 비교해봤습니다. 그리고 이를 바탕으로 2024년 1월 2일 미래의 나를 그려봤습니다.

기술분야2022년 1월 (작년)2023년 1월 (현재)2024년 1월 (내년)

메인 기술 (가장 자신 있는)

  • PHP CodeIgniter 3 & 4

  • HTML + CSS + JS (jQuery, Bootstrap)

  • NestJS

  • Next.js, React.js

  • NestJS

  • Next.js, React.js

BackEnd

  • PHP 기반의 기술 스택

  • Python FastAPI와 Flask도 활용 가능

  • RDBMS 활용 가능 (MySQL, MariaDB)

  • TS/JS 기반의 기술 스택(NestJS, Express.js)

  • PHP, Python 모두 활용 가능

  • RDBMS 활용 가능 (MySQL, MariaDB)

  • Redis도 이제 쓸 수 있음!

  • TS/JS 언어에 대한 이해도를 보다 더 높게 끌어올린다 (JS 생태계쪽으로 선택과 집중)

  • WebSocket 통신을 어느 상황에서든 목적에 맞게 쓸 수 있도록 공부한다.

  • MicroService를 이리저리 만져보면서, 아키텍쳐 설계에 대해서 ‘좀 안다’고 할 수 있을 정도가 된다.

FrontEnd

  • HTML + CSS + JS (jQuery, Bootstrap)

  • 보통 PHP와 결합하여 사용

  • React.js 도 막 입문하던 시기

  • Next.js, React.js 등 모던 프론트엔드 프레임워크를 이용할 수 있음

  • Tailwind CSS, Chakra UI, Mantine UI 등 UI Framework를 이용하여 개발

  • Recoil을 이용한 전역상태관리

  • MonoRepo에 대한 공부와 시도도 해보고 싶다.

  • 웹사이트 성능 분석과 성능 개선 → SEO 개선과 연계

Infra/DevOps

  • AWS EC2에 서버 세팅해서 쓸 수 있음

  • Jenkins를 이용한 PHP앱 배포

  • 이제 도커를 이용한 개발도 할 수 있음

  • 쿠버네티스 입문! 쿠버네티스 환경에서 백엔드 개발을 할 수 있게 되었다. (개인적으로 k3s를 이용한 환경구축도 해봤다)

  • GitOps 시스템 구축 성공 : Github Actions (Docker Build, ECR Push) → Helm Repo의 Value값 변경 → ArgoCD에서 배포

  • ECS 쓰는 걸 좀 공부해보고 싶다. EC2는 너무 관리가 힘들고, EKS는 너무 설정해줘야할 것도 많고 관리하기도 힘들다. 그래서 ECS가 적합할 것 같은데 개념이 생소해서 다가가기 어렵다.

  • 이제 Jenkins에서 대세가 Github Actions로 넘어갈 것 같다. 나도 관리 포인트를 줄이고 일관성 있는 CI/CD 구축이 가능하도록 Github Actions로 기존 프로젝트들을 이전해볼 생각이다.

Communication

  • Jira, Confluence를 업무에 활용할 수 있음

  • 이제 Slack에 매우 친숙해졌음

  • 필요하다면 Slack Bot도 만들어서 활용 (ex. Mobi-bot)

  • 코드 리뷰라는 걸 처음 받아보고 해봤다! 내가 너무 부족하고 더 발전해야겠다는 걸 많이 느꼈다.

  • 영어 공부를 좀 해보자. 말하는 것보다 읽고 쓰는 것 위주로. 외국 개발자 커뮤니티에서 뭔 얘기를 할 때마다 ‘저건 무슨 말인고…’ 하는 일이 없도록 해보자.

Etc

  • Cloudflare를 DNS 용으로만 이용

  • Cloudflare를 DNS 용도 뿐만 아니라, WAF 설정, DDOS 방어, 그 외 기타 서비스들도 사용해봤다 (Workers, R2, Stream, Images). 쓰면 쓸 수록 대단한 회사임을 느낀다!! (주식 사야하나…)

  • Cloudflare Workers 쓰는 법을 공부해보자. 여기저기 적용해보고 싶은게 많다.

  • 오픈소스 프로젝트에 참여하거나, 내가 오픈소스 프로젝트를 만들어서 npm이나 pip에 올라가는 걸 해보자.

Side Projects

1년간 진행한 12개의 사이드 프로젝트를 정리해보며 회고를 마칩니다.

순번이름기술 스택설명링크 / 깃허브성장 포인트

1

포도당 노래책

  • React.js (Chakra UI) → S3 배포 (젠킨스)

  • Python FastAPI → EC2 배포 (젠킨스)

  • MariaDB → AWS RDS

트위치 스트리머 ‘포도당’의 노래책 웹사이트

React를 이용한 최초의 규모있는 사이드 프로젝트!

처음으로 모르는 사람한테 Star를 받아봤다 🤩

2

머니머니

  • Svelte → S3 배포 (젠킨스)

  • Python Flask → Serverless Framework (Lambda)

스벨트와 서버리스 프레임워크를 써보기 위한 용도로 가계부 관리 웹사이트를 제작

Svelte와 Serverless Framework 첫 경험!

3

레븐 멀티트위치

  • React.js (Chakra UI) → Cloudflare Pages

  • Python FastAPI → EC2 배포 (젠킨스)

  • MariaDB → AWS RDS

버츄얼 스트리머 팀 ‘레븐’ 방송을 함께 보기 위한 웹사이트 → https://ejncorp.atlassian.net/wiki/spaces/TWIP/pages/575439112워크플로우 2.0을 통해 회사 프로젝트로 재탄생시킬 예정

Cloudflare Pages를 배포에 이용해봄!

이제 Chakra UI같은 UI Framework 좀 익숙해진 듯?

4

네이버카페 트위치 뱅온 알림봇

  • Pure Python → EC2 배포 (젠킨스)

  • MariaDB → AWS RDS

트위치 방송 ON → 네이버 카페에 게시물 등록 해주는 서비스

  • 먼저 방송이 켜졌는지 여부를 확인해서 네이버 카페에 글을 올리는 스크립트를 작성

  • 해당 스크립트를 3분마다 Crontab으로 호출해 사용

네이버쪽 OpenAPI를 처음 써봤는데… 인코딩쪽에서 애를 많이 먹었다… EUC-KR이라니!!!

5

레븐 방송정보

  • React.js (Chakra UI) → Cloudflare Pages

  • Python FastAPI → EC2 배포 (젠킨스)

  • MariaDB → AWS RDS

4번에서 수집한 데이터를 단순히 보여주는 통계 웹사이트

기술적으로 얻은 건 특별히 없음

프로젝트 생성부터 배포까지 1~2시간여만에 끝냈다!

6

gellgell

  • React.js (Chakra UI) → Cloudflare Pages

  • Python FastAPI → EC2 배포 (젠킨스)

  • MariaDB → AWS RDS

트위치 스트리머 ‘구슬요’ 팬게임 (나름 웹게임…)

한 때 유행했던 모바일 게임 Tamago 를 모티브로 만들었다.

총 유저 수는 46명, 클릭 수는 778,122회로 적은 시청자 풀 대비 괜찮은 수치가 나왔다

나름 웹 게임이란 걸 처음 만들어봤다

어떻게 많은 수의 요청을 처리할 것인가에 대한 고민을 시작하게 되었다 (gellgell 프로젝트는 polling으로 처리)

7

나와 가장 잘 맞는 레븐 멤버는?

  • Next.js + Tailwind CSS → Vercel

  • Sentry

MBTI 검사를 모티브로 한 질문형 미니게임 5개의 질문을 통해 나와 가장 잘 맞는 레븐 멤버를 찾아보는 게임

Next.js를 처음 사용해봤다. 기술이 궁금해서도 있지만 React를 사용하며 라우팅 처리가 너무 귀찮다고 느껴졌는데, Next를 쓰면 그게 편하게 해결되니 사용해봤다.

회사에서 Bugsnag을 사용하는 걸 보고 Sentry도 처음 도입해서 사용해봤다.

배포는 Vercel을 처음 사용해봤는데, 너무 괜찮아서 이 때 이후로 쭉 Vercel만 사용하고 있다.

8

전해리 방송일정

  • React.js (Ant Desgin, Chakra UI) → Vercel

  • Python FastAPI → EC2 배포

  • MariaDB → AWS RDS

트위치 스트리머 ‘전해리’의 방송일정과 공지사항을 보여주는 웹사이트… 였으나 현재는 아프리카TV 이적으로 아프리카TV 공지사항을 보여주는 걸로 변경한 상태

Ant Design을 이용해봤다. 뭔가 깔끔하긴 한데… 검색하면 중국어밖에 안 나와서 Troubleshooting이 힘들었다

9

해리배치고사

  • Next.js (Chakra UI) → Vercel

  • Python FastAPI → EC2 배포

  • MariaDB → AWS RDS

  • Redis → AWS ElastiCache

트위치 스트리머 ‘전해리’ 방송 1주년 기념, 스트리머에 대한 퀴즈를 풀고 우승한 시청자에게 상품을 주는 이벤트 웹사이트

Next.js로 API를 연동하는 앱을 처음 만들어보았다 (SSR에 대한 이해가 부족해 막히는 부분이 좀 있었다)

Twitch OAuth 연동을 FastAPI로 처음 해보았다! (짱신기)

Redis를 처음 사이드 프로젝트에 도입했다 → 응답결과를 계산해서 DB에서 내려보내줄 때 사람이 몰리면 부하가 걸릴 수 있을 것 같아서 도입했는데.. 사실 이 정도 규모에선 필요가 없긴 하다

10

EJN Meal

  • Next.js (Tailwind CSS, Mantine UI) → Vercel

  • NestJS → EC2 배포 (PM2, 개발서버는 k8s)

  • Redis → AWS ElastiCache

사라진 ‘배민웹 돌려줘요’를 대체할 ‘EJN Meal’ 웹사이트

Mantine UI를 처음 사용해봤다. Chakra보다 기본 제공되는 컴포넌트들이 더 많다!

NestJS를 처음부터 세팅해서 배포까지 모두 다 해봤다. 놀랍고 뿌듯한 경험이었다!

EJN Meal 개발서버 배포에 k8s를 사용해봤다. GCP에서 GKE 클러스터를 세팅하고, GitOps를 적용해 Github Actions에서 이미지 빌드 후 Helm에 반영, ArgoCD가 Helm 변경 사항을 클러스터에 반영, Secret은 Vault를 통해 Pod으로 직접 주입 → 다만 GKE 비용이 비싸서 내렸다

11

트위치/아프리카TV 방송알림봇

  1. 트위치 뱅온알림 수신 모듈

    1. Express → EC2 배포 (PM2, Jenkins)

    2. React.js (EventSub 관리 용도)

  2. 아프리카TV 뱅온알림 수신 모듈

    1. NestJS → EC2 배포 (PM2, Jenkins)

  3. 방송알림 발신 모듈

    1. NestJS MicroService → EC2 배포 (PM2, Jenkins)

  4. 모니터링 : Datadog

트위치/아프리카TV에서 방송을 켜면 지정된 디스코드 채널, 네이버 카페, 슬랙 채널로 알림을 보내주는 앱

  1. 트위치 뱅온알림 수신방법

    1. Twitch EventSub API를 통해 stream.online 과 stream.offline 이벤트를 구독

    2. 이벤트가 발생하면 Webhook으로 알림이 옴

  2. 아프리카TV 뱅온알림 수신방법

    1. NestJS Schedule 모듈을 이용해 주기적으로 아프리카TV API 호출(Polling)해 방송상태 변경 확인

  1. 트위치 뱅온알림 수신 모듈

  2. 아프리카TV 뱅온알림 수신 모듈

NestJS 마이크로서비스 패턴을 이용해봤다. → Redis Pub/Sub을 이용한 MicroService (ex) 트위치 방송알림시 Webhook 수신 → NestJS MicroService 이용해서 Event Publish → 발신 모듈에서 Event Subscribe → 디스코드 채널, 네이버 카페로 알림 발송/등록

NestJS Schedule 모듈을 사용해봤다.

Twitch API 중 EventSub 기능을 처음 이용해봤다

회사에서 Datadog 메트릭을 쓰는 걸 보고, 나도 도입해서 사용해봤다. 모니터링할 때 정말 좋을듯!

12

Clippy

  • Next.js (Tailwind CSS, Mantine UI) → Vercel

  • 메인 백엔드 : NestJS → EC2 4대에 배포 (PM2, Jenkins), ALB

  • 추출기 : NestJS → EC2 2대에 배포 (PM2, Jenkins), ALB

  • 프록시서버 : Express → 오라클 클라우드 arm 인스턴스에 배포 (PM2)

  • DB : MariaDB → AWS RDS

  • Cache : Redis → AWS ElastiCache

  • 크롬 익스텐션 : React.js

  • 검색엔진 : ElasticSearch App Search

  • 통합로깅/모니터링 툴 : Elastic (ELK)

  • 에러 모니터링 툴 : Sentry

  • 영상 저장 스트리밍 : Cloudflare Stream

트위치 클립 서비스를 대체하는 서드파티 클립 서비스

4명의 팀원과 함께 서비스를 만들었고, 2022년 12월 13일에 정식 출시했습니다.

그리고 출시 20일만에 아래 수치를 달성했습니다. (MAU, DAU는 아직 완전한 수치는 아닙니다)

  • 지표(GA) : MAU 2만, DAU 1천~2천 가량

  • 생성된 누적 클립 수 : 4,500개 이상

  • 가입한 누적 유저 수 : 6,000명 이상

지금 이 순간에도 하루에 500개 이상의 클립이 생성되며 클립 서비스의 실질적 대안으로 자리잡고 있습니다.

처음으로 이정도 사이즈의 대규모 프로젝트를 사이드로 진행해봤다. 사이드 치고는 많이 큰데… 그만큼 정말 다양한 경험을 하고 있는 것 같다. 사용되는 돈의 액수보다 얻어가는 경험의 양과 질이 더 크다고 느껴진다.

같이 개발한 팀원들과 함께 20일동안 500개 이상의 커밋을 했다. 정말 하나의 목표를 향해 앞만 보고 달리는 우직한 참 개발자들의 모습이 자랑스럽게 느껴졌다.

Elastic을 적극적으로 사용하고 있다. Elastic Cloud를 통해서 쓰고 있는데 검색엔진과 통합 로깅, 모니터링, APM까지 있는 기능들을 최대한 활용해서 쓰고 있는데 너무 좋다. 회사에서도 Datadog 대안으로 도입을 고려해볼만 한 것 같다.

Cloudflare에서 제공하는 기능 중에 Stream이 제일 좋은 것 같다. 아쉬운 부분도 있는데.. 차차 개선될 것으로 보인다.

오라클 클라우드에서 주는 Outbound Traffic 10TB를 노리고 arm 인스턴스를 하나 올려서 프록시 서버로 사용하고 있다. OCI의 안정성은 좀 지켜봐야겠지만 멀티 클라우드 사용은 역설적으로 안정성을 올려주기 때문에 관리 포인트가 늘어나는 부분을 어디까지 감수할 수 있을 것인지 고민이 된다.

NestJS에서 인증을 위해 Passport를 처음 써봤다. 뭔가… 뭔가… 사용하는 방식이 손에 잘 안 익는다. 딱히 좋다는 느낌은 못 받았지만, 그래도 많이 쓴다고 하니 앞으로도 쭉 일단 익혀볼 생각이긴 하다.

Last updated