Skip to main content

당근 테크 밋업 후기

· 11 min read
Jeongmin Lee
FE Developer on the Cutting Edge

site

이번 당근 테크 밋업 당첨 결과때 단체로 가짜 당첨 통보를 받는 이런 저런 우여곡절이 있었지만, 나는 운이 좋게 붙어가지고 이번에 처음으로 당근 테크 밋업에 갈 수 있었습니다.

인프콘같이 한 IT 회사에서 열어서 진행하는 컨퍼런스라서 당근이라는 회사의 문화와 또 어떻게 일하고 있는지 조금이나마 엿볼 수 있을 거 같아서 들뜬 마음에 갔습니다.

물론 같이 갈 사람이 없어서 조금 외롭기는 했어요 ㅋㅋ....

시간표

오전오후
ScheduleSchedule2

위와 같이 첫 세션 시작하기 전에 오전에 먼저 네트워킹을 운영했었습니다.

모든 운영은 당근 어플 내 동네생활과 채팅을 통해서 공지되고 운영되었어요.

그리고 네트워킹을 하나의 토픽을 가지고 자유롭게 이야기 나눌 수 있도록 선착순으로 약간 티켓팅 처럼 할 수 있었습니다.

동네생활네트워킹
동네생활네트워킹

네트워킹에서는 당근에서 근무하고 계시는 프론트엔드분을 중심으로, 사실상 프리토크 식으로 자유롭게 물어보고 답하는 시간이였어요. 사실상 토픽보다.. 당근은 어떻게하고 있는지 물어보는 시간(?)

프레임워크부터 플랫폼까지: 당근 웹뷰 플랫폼

웹뷰 개발에서 다양한 문제를 해결하기 위해 당근에서는 어떻게 해결해 나가셨는지 말해주셨어요. 브릿지 SDK, 웹 프레임워크, 그리고 배포 플랫폼을 유기적으로 통합하는 시스템을 구축했다는 내용이였는데... 요약해보자면

  1. 브릿지 SDK 자동 생성

기존에는 네이티브 개발자와 웹뷰 개발자가 협의하여 브릿지를 구현해야 했고, 이 과정에서 소통 비용이 큼. 당근마켓은 이를 개선하기 위해 브릿지 SDK와 테스트용 웹뷰를 자동으로 생성하는 시스템을 도입. 개발자는 JSON 스키마만 수정하면 CLI 명령어로 SDK 변경점에 대해 PR이 자동으로 생성되고, 네이티브 개발자 분들이 승인하면 배포.

  1. 스택플로우 기반 프레임워크

당근마켓은 스택플로우라는 웹뷰 프레임워크를 통해 모바일 친화적인 라우팅 시스템을 도입. 기존 URL 기반 라우팅의 복잡성을 줄이고, Activity라는 개념을 도입해 직관적이고 간결한 라우팅을 제공. 이를 통해 웹뷰 개발을 모바일 개발처럼 느낄 수 있도록 개선.

  1. Warp 배포 플랫폼

당근마켓은 다양한 배포 플랫폼 (vercel, aws etc...)을 경험한 후, 자체 배포 플랫폼인 Warp를 구축. Warp는 AWS S3와 CloudFront를 기반으로 하며, 버전 관리, 프리뷰 배포, 롤백 등의 기능을 제공. 플러그인 기능을 통해 프론트엔드 정책도 관리

프론트엔드에게 배포플랫폼이란

이 세션에서는 기초적이지만 프론트엔드 개발자들이 놓치기 쉽고 항상 인지히고 있어야하는 배포 과정에 필요한 지식들을 잡아주시는 시간이였습니다. 아래 목차를 발표 자료로 좀 더 시각적으로 이해하기 쉽게, 기승전결이 완벽했던 세션이였고 재밌었어요.

  1. HTML 파일 배포 과정
  2. 정적 웹사이트와 동적 웹사이트
  3. 싱글 페이지 애플리케이션(SPA)
  4. AJAX와 비동기 데이터 처리
  5. 캐싱과 성능 최적화

결론 - 웹사이트 배포는 단순히 파일을 서버에 올리는 것이 아니라, 캐싱 정책, CDN 활용, AJAX 등을 통해 성능을 최적화하는 것이 중요합니다. 이러한 최적화 전략을 통해 웹사이트 성능을 개선하고 사용자 경험을 높일 수 있다.

내 타입스크립트 코드가 이렇게 느릴 리 없어!

타입스크립트가 느려질 수 있는 이유는 여러가지지만 (ex 비대한 코드베이스, IDE 확장프로그램 etc...), 이때 타입스크립트 타입 추론으로도 느려질 수 있는데 이때 최적화를 통해 개선한 경험을 공유해주시는 세션이였습니다.

--extendedDiagnostics

  • Typescript 컴파일러가 컴파일 중 소요한 시간을 출력해주는 옵션
  • 각 페이즈 별로 소요된 시간을 알 수 있다

--generateTrace

  • Typescript 4.1 부터 도입된 성능 관련 CLI옵션 내 타입스크립트 코드가 이렇게 느릴 리 없어
  • 컴파일에 소요된 시간 중 오래 걸리는 부분을 쉽게 식별할 수 있도록 trace.json 파일을 출력해준다
  • 컴파일러가 인식한 타입의 목록을 types.json 파일로 출력해준다

@typescript/analyze-trace

  • Typescript 팀에서 제공하는 npm 패키지
  • CLI로 trace를 분석하여 빠르게 hot spot 식별 가능

perfetto

  • Google에서 제공하는 event trace 분석 도구(chrome://tracing 의 후속 프로젝트)
  • GUI로 보다 상세한 분석이 가능

아래와 같은 디버깅 CLI & Tool을 사용해서 직접 데모와 캡쳐본으로 어떻게 디버깅이 나오고 해결해 주셨습니다. 굉장히 인상적이였어요. 타입스크립트 측에서 컴파일이 되기 쉬운 코드 가이드도 한번 짚어주셨습니다.

아이콘, 브랜딩 에셋까지 디자인시스템으로

1. 아이콘 관리 및 자동화:

당근에서는 다양한 플랫폼(iOS, Android, 웹)에서 서로 다른 포맷의 아이콘을 하는데, 피그마 플러그인을 만들어서 통해 아이콘 데이터를 추출하고, 이를 자동으로 변환 및 배포하는 워크플로우를 구축. 연결된 피그마 에셋이 변경이 되고 플러그인을 통해 Push를 하면 포맷에 맞게 아셋들이 코드적으로 생성되고 개발자가 PR을 승인함으로써 재 배포.

2. 브랜딩 에셋 관리 시스템 구축:

당근의 브랜딩 에셋을 효율적으로 관리하기 위해 Sanity CMS를 도입하고, Cloudflare와의 연동을 통해 대역폭 문제를 해결. Sanity는 어드민 도구로, 에셋 관리의 자동화 및 동기화를 제공하며, Cloudflare는 에셋을 유저에게 빠르게 전달하는 역할.

당근에서 디자인시스템 브랜딩 에셋, 아이콘 관리를 어떻게 워크플로우를 개선하였는가에 대한 경험을 공유해주셨습니다. 현재 회사에서 디자인시스템을 구축하려고 생각하는 와중에 많은 인사이트를 가져가는 정말 맛있는 세션이였습니다.


후기

위에 오전 세션 외에도 오후에 세션도 굉장히 좋은 내용이였는데, 웹뷰와 밀접하게 연결되어 있는 부분도 있고, graphQL 관련해서 제가 접해보지 못한 부분이 많아서 정리는 힘들 것 같습니다. 당근을 비롯해서 Toss 같은 큰 기업들은 보면 본인들에게 맞지 않는다면 과감히 새로 만들어내는게 정말 대단한 것 같습니다. 감사하게도 발표자료는 올려두셨더라구요. 관심있으시면 한번 보셔도 정말 좋을 것 같구 다음에 유튜브에 영상 업데이트도 할 예정이라고 합니다.

DND 해커톤 후기

· 6 min read
Jeongmin Lee
FE Developer on the Cutting Edge

poster

계기

해커톤 몇번 해보니까 해커톤 공고가 알고리즘에 자꾸 나오게 되었습니다.

저번 해커톤에서 합이 잘 맞았던 동료에게 다시한번 추파를 던져 보았습니다.

kakaotalk

아니다 다를까 바로 덥석 물어버리는 그...

그렇게 우리는 신청하고 운이 좋게 둘다 합격되어서 참여하게 되었습니다.

팀빌딩

팀으로 지원한 사람들과 개인으로 지원하신 사람들이 각각 있었습니다.

디스코드에 초대가 되서 각자 자기소개 채널에서 본인 PR을 올리는게 1단계였구요.

self_pr

모집글에서 팀원을 구하는 팀에 들어가거나, 본인이 팀원들을 구하는 글을 작성하였습니다.

일단 저와 동료는 팀원 모집글을 작성하였습니다.

team

운좋게 실력있는 디자이너분들과 백엔드분들이 합류해주셨습니다 - !

그리고 바로 시간을 잡아서 팀명과 아이디에이션을 진행하였습니다.

ideation

대신 해커톤의 주제 3가지 중 두가지가 일상, 지역 이였는데요. 나머지 한가지 키워드가 뭔지 몰라서

제 아이디어는

두가지 키워드를 중심으로 지역마다 축제부터 시작해서 본인 강아지 생일같이 사소한 이벤트까지 보여줄 수 있는 서비스였습니다.

다른 팀원들도 좋은 아이디어를 제안했지만 민주적으로 투표해서 제 아이디어가 채택되었습니다. 😉

그렇게 정하고 나서 사실 더 자세하게 구체화는 하지 않았습니다.

해커톤

남서울 터미널 옆에 있는 프로그래머스 교육장에서 해커톤이 진행되었습니다.

처음엔 다들 초면이라서 어색어색했지만 금방 풀어나갔습니다.

first

밝혀진 마지막 키워드는 바로 불편함이였습니다. 제가 냈던 아이디어가 내포되어 있다해도 무방한 키워드라서 변경없이 그대로 갔어요 !

디자이너분들은 이미 해커톤 오기전부터 레퍼런스를 좀 조사해놓으셔서 진짜 UI 찍어내시는게 정말 빨랐습니다.

저는 어떤 맵을 쓸까하다가, 제일 익숙한 카카오 맵을 쓰기로 했습니다.

빠르게 갖다쓸 SDK가 있을까 하다가 찾은게 이 패키지였는데요.

공식 패키지는 아니였는데 굉장히 추상화가 잘되어있어서 진짜 해커톤 내내 잘 사용한거 같습니다.

nightsnack

해커톤의 꽃 야식을 먹고 힘을 내고나서, 진행하는데 문제가 있었습니다.

저희는 가고싶은 이벤트는 계정에 저장을 하고 관리해야하는데, 물론 이를 간단하게 아아디 패스워드로 구현할 수 있었지만

저희는 어째서인지 Oauth로 풀고싶다는 결론이 났었습니다. 그리고 그렇게 몇시간을 끙끙대서 하느라고 다들 죽을 맛이였죠 ㅋㅋㅋ ..

새벽이라 그런가 쉽게 될 것 같은데도 잘 안되더군요. 멋지게 next-auth로 캐리해준 제 동료에게.. 리스펙을 보냅니다.

항상 해커톤은 프론트엔드가 마지막에 똥줄을 타는 것 같습니다. 그렇게 발표까지 계속 달렸어요 하핳..

발표 및 데모

일단 팀장으로써 발표를 맡게 되었습니다. 그런데 마지막까지 프론트쪽 코드짜느라고 디자이너분이 기가막히게 만들어주신

pt

발표자료를 자세히 못봐서 개요와 설명은 디자이너 분에게 발표를 맡기고 데모 및 시연은 제가 맡아서 했습니다.

진짜 운명같이 발표 순서도 마지막이였고 개인적으로 많은 팀들이 해커톤에서 제시한 키워드에 충족하는(?) 서비스를 만들지 않으신거 같았습니다.

그점이 좀 아쉬웠던 것 같아요 ! 그렇게 저희는 프리패스 상을 받게 되었습니다.

prize1

prize2

이제 해커톤은 좀 쉬고..... 프로젝트를 해보려구요.. 하하

dnd

Microsoft 주관 해커톤 후기

· 11 min read
Jeongmin Lee
FE Developer on the Cutting Edge

poster

계기

해커톤을 잠시 내려놓고 있었던 시기였다.

도파민이 점점 부족해 오는 시기였고 회사 생활은 지루했다.

해커톤을 약간 관심 있게 봐와서 그런가 인스타그램 알고리즘은 세상에 모든 해커톤을 보여주기 시작했다.

무려 마이크로소프트가 주관하는 해커톤이였는데 마침 생성형 AI로 하는게 아니던가 !

먼저 구름톤을 다녀올 때, 자기 빼고 갔다고 아쉬워하던 직장 동료에게 바로 플러팅을 했었다

flirting

토요일이 바로 해커톤 시작인데 바로 금요일에 신청 하게 되었다.

주제가 공공부문 혁신이라는 것이었는데 이때 직장 동료가 기가 막힌 아이디어를 그날 제시를 해주었고

우리는 금요일 새벽까지 구체화를 해가며 해커톤을 준비해 갔다.

해커톤 교육

경복궁 옆에 있는 마이크로소프트 본사에 도착 !

진짜 일단 뷰가 너무 끝내줬고, 바로 사진을 부탁했었다.

microsoft

요즘 AI 관련한 해커톤은 항상 먼저 어떻게 사용하는지 간단히 교육해 주고 시작한다.

일단 마이크로소프트답게 azure에서 OpenAI를 가져와서 사용하는 법을 A-Z까지 알려주셨다.

하지만 뭔가 시총 1위라는 말이 무색하게 토큰에 대한 제한이 너무 많아서 어떤 분은 토큰이 다 떨어져서 교육도 진행 못 하는 상황도 발생했었다.

팀빌딩

그렇게 시간은 흘러서 팀빌딩이 시작됬었다. 대부분은 개발자분들이셨지만 전부는 아니었다.

각자 자기소개를 하면서 알게 됐는데 여가부 부장님부터 각종 공공부처의 한자리 하시는 분들도 있었고

본인 업무에서 태스크들을 자동화하고 AI를 배우기 위해서 오신 분들도 더러 계셨다.

하지만 팀빌딩은 차갑다. 마이크로소프트 측에서도 생각은 못 하진 않았겠지만

아무래도 개발자들은 개발자를 찾기때문에 비개발자 분들은 아무래도 팀빌딩을 끝까지 못하신 분들도 있었고

뭔가 낙동강 오리알 되는 경우가 있었다. 마음이 아팠지만 어떡하겠는가 우리도 욕심이 있었다.

사실 우리 두명다 Langchain을 사용해서 간단한 서비스는 만든 경험이 있었기 때문에 여차하면 그냥 둘이 팀할까 했다.

하지만 아무래도 팀원은 다다익선이 아닌가 싶어서 괜찮아 보이는 싶은 분들에게 먼저 다가가서 팀제안을 했었다.

다행히도 우리 아이디어가 맘에 들었는데 AI를 현업에서 다루고 계시다는 분이 팀으로 합류했었다.

해커톤 시작

일단 우리는 무조건 우리 아이디어로 할 생각은 없었지만, 우리가 먼저 온 아이디가 제일 참신하고 좋다고 생각했다.

그렇게 우리는 악성민원 수호자라는 팀이름을 정하고 먼저 어떻게 할지 생각하고 작업에 돌입했다.

아이디어는 민원인이 국민신문고나 각 부처에 민원을 올릴때 악성민원으로 보이면 그걸 필터링 및 순화를 해주는 서비스라고 간단히 말할 수 있겠다.

사실 이런게 가능한 이유는 모델 자체적으로도 인지능력이 상당히 높아졌기 때문이라고 말 할 수 있겠다.

사실 1차적인 목표인 Langchain.js로 내가 직접 로직을 짜서 프로젝트를 하고 싶었지만 AI 개발자분이 Python으로 다 처리할 수 있으니까 프론트쪽에 힘을 주게 되었다.

나머지는 AI 개발자분의 로직을 같이 검토하는 방향으로 진행했었다. 그런데 AI 개발자분은 웹개발쪽 경험은 전무하셔서 API 서비쪽도 FAST API도 급하게 올렸었다.

다행히도 배포는 필수상황이 아니여서 다행인 것 같았다.

아무래도 한국어 특화된 모델을 찾을 수가 없었고, 사람이 듣고 기분 나빠할 만한 비속어에 대한 데이터셋은 터무니 없이 부족하긴했다.

그래서 AI 개발자분은 생각해 내신 게 Jail Breaking이라는 기법인데 GPT-3.5 모델은 해당 기법을 통해 프롬프팅으로 OPENAI 측에서 걸어놓은 제한 범주를 벗어나

비속어를 사용하여 우리가 원하는 상황에 맞는 더미데이터를 잔뜩 만들 수 있었고 이를 토대로 더 상위 모델은 GPT-4.0으로 돌려서 데이터 셋을 만들고

다시 우리 GPT-3.5에 파인튜닝을 해서 성능을 올리려고 노력했다. 그리고 마지막에는 우리 회사 동료의 수파베이스 슈퍼캐리로 임시로 DB 간단하게 만들어서

우리가 생각하던 MVP를 만들 수 있었다.

데모

발표가 거의 11시쯤이었던 같은데 정말 버티기 힘들어서 다른 분들 발표하는데 집중 못 하고 결국엔 잠들었었다.

결국엔 우리 차례가 왔었고 발표를 나눠서 발표를 했습니다.

해커톤 데모

다른 잘하신 분들도 많아서 긴장했는데 생각보다 심사위원분들 반응도 좋았어서 내심 기대를 했던 것 같네요.

운이 좋게 본선에서 올라가는 4팀에 들어가게 되었습니다.

말은 해커톤이였지만 하루밤에 안끝나고 1주 뒤에 있는 본선에 가서 공무원 관계자 명 발표하는 게 진짜 마무리였습니다. 하ㅏㅎㅎ..

1주일동안 저희가 하룻밤에 만든 이 MVP를 더 디벨롭을 할까 말까 하다가 결국엔 안 했었습니다.

한가지 시도는 해봤는데 KISO에서 제공 해주는 비속어 데이터셋을 통해서 학습을 시켜서 비약적인 모델 학습을 해볼까 했었습니다.

하지만...

main

그런 이유로 우리는 발표와 스토리텔링에 더 힘을 주어서 발표 준비를 엄청 열심히 했답니다.

본선 및 후기

본선은 정부세종컨벤션센터에서 진행을 했는데 회사 연차내고 갔다.

가자마자 우리를 기다리는 건 뜬금없는 우리 사진... ㅋㅋㅋ

teamphoto

그리고 우리가 하룻밤만에 만든 MVP를 공무원 400여명 앞에서 발표하고 투표를 받는 식으로 진행이 되었는데

스케일에 압도가 먼저 되었다... ㅋㅋ ;

chairs

다른 3팀의 발표를 보면서 아찔했다.

다들 하나같이 본인들의 MVP를 진짜 엄청나게 발전시켜 가져왔다.

멀티모달부터... 어떤 한팀은 무슨 커스텀 ChatGPT를 만들어와 버렸는데 아찔했다.

하지만 우리의 발표는 공무원들의 감성을 자극했는지 다행이도 2등을 했답니다.

seondPlace

수상한 것도 너무 좋았지만 다른 해커톤과 다르게 심사의원분들이 모든 것을 정하지 않고, 실제 잠재 사용자 ( 약 400명 )에게 현장에서 투표를 받고 진행되어 공공부문에 실제로 도움이 될 것 같다는 것을 인정받으니까 가슴이 뜨거워지는 경험...을 했습니다.

악성민원때문에 속앓이 많으실 공무원분들 꼭 저희 서비스가 아니더라도.. 어떤식으로든 개선되어서 속앓이 안하시는 그런 환경속에서 근무하셨으면 좋겠습니다 - !

구름톤 유니브 벚꽃톤 멘토링 후기

· 5 min read
Jeongmin Lee
FE Developer on the Cutting Edge

groomthon

계기

구름톤을 다녀오고 나서 얼마 안 된 어느 평일..

구름톤 제주에서 같이 신나게 달렸던 동생이 멘토링을 제안을 해왔다.

계기

그런데 아무리 생각해도 내가 갈 자리가 아닌 것 같았습니다.

" 나 따위가 멘토를 ...?"

누군가를 멘토링해줄 위치가 아니였지만 경험자체는 해보고 싶다는 생각이 들었다.

그리고 당시에 마침 구름톤 우승하고난 다음이여서 뽕과 함께 근자감이 있었던 거 같기도 하다.

자리가 사람을 만든다고 했었나... 나도 한번쯤은 멘티가 아닌 멘토로 해커톤에 참여해보면 좋겠다는 생각을 했다.

해커톤 동안

스케일

그렇다, 도착하고 해커톤 시작할 시간이 다가오자 내 생각보다 상상 이상으로 많은 사람들이 내 앞에 있었다.

모두 36개의 팀이였다. 그래서 이때부터 엄청나게 긴장하기 시작했다.

멘토링 전에도 예상은 했지만 프론트엔드는 보통 후반에 바쁘다.

그래서 나는 시작하고 초반에 꽤 한가했다. 실제 현업에서도 그렇고 해커톤에서도 처음에 여유가 있다가

마지막에 똥줄타는게 프론트엔드 아닌가

시작

아니나 다를까 깊은 밤이되니까 슬슬 시작되었었다. 멘티분들마다 질문이 달랐다.

간단한 배포부터 인피니트 스크롤, 그리고 폼 상태관리 등이 있었는데,

다행히도 내가 아는 선에는 다 도움을 줄 수 있었다. 그런데 못 도와준 케이스가 있는데

모바일로 구성된 팀이었다. 안타까웠던점은 모바일쪽은 멘토가 따로 없어서 프론트엔드까지 찾아오게 된 것이었다.

마음이 아팠지만 어떡하겠는가... 나는 모른다 ㅠㅠ

끝으로

해커톤이 마무리되고 나서야 비로소 긴장이 풀리기 시작했다. 내가 경험한 모든 것들이 주마등처럼 스쳐 지나갔다.

처음에는 "과연 내가 멘토 역할을 잘 해낼 수 있을까?"라는

불안감과 긴장감으로 가득했지만, 멘티분들의 감사 인사를 받고 시간이 지나면서 점차 자신감을 얻을 수 있었다.

다들 내가 과거에 비슷하게 했던 고민 혹은 처음 들어본 고민들을 들어보면서 나도 공부가 되고 복습이 되었다.

또한, 다양한 팀의 프로젝트를 보며 여러 가지 새로운 아이디어와 접근 방식을 접할 수 있었다.

전체적으로 이번 멘토링 경험은 나에게 큰 의미가 있었다. 내가 가지고 있는 지식을 나누는 것뿐만 아니라,

다른 사람들의 열정과 노력을 직접 보면서 동기부여도 다시 한번 받게 되었다.

다음에도 기회가 된다면 꼭 다시 참여하고 싶다.

한 명의 개발자로서 계속해서 성장하고 배우는 것이 나의 목표이기 때문이다.

거기서 만났던 모든 인연들과 관련자분들 행복하고 다같이 더 성장했으면 좋겠다.

멘토

제주도에서의 구름톤 9기 후기

· 17 min read
Jeongmin Lee
FE Developer on the Cutting Edge

9oormthon

지원 계기

구름톤은 예전부터 알고있었지만 한번도 지원을 한적은 없었다.. 괜히 지원했다가 1인분도 못하고 팀원에게 피해만 주지 않을까란 괜한 걱정이 계속 들었기 때문이다. 그렇게 운좋게 취업을 하고나서, 벌써 1년이 훌쩍 지나버렸고, 취업하고나서 특별하게 진행했던 사이드 프로젝트가 없었기 때문에 프로젝트를 시작할까라는 생각을 2024년들어서 생각하게 되었고, 마침 인스타그램에서 내 마음을 읽고 구름톤 9기 모집을 지속적으로 보여주었다. 그래서 별 기대 안하고 있었지만 갑자기 문자 한통을 받게 된다. 결론적으로는 연차 4일을 당장 하루안에 결정을 해서 가겠다고 구름톤 측에 전달해야했고, 제주도에서의 해커톤 ? 그렇다 나는 낭만을 택했다.

message

0️⃣ 일차

구름톤에 참가확정이 된다면 먼저 슬랙방에 초대가 된다. 자유롭게 질문이 가능하고, 흔하게들 참여자분들끼리 먼저 호텔을 같이 쉐어해서 예약을 하기도 한다. 교육 2일차때부터 구름톤 측에서 숙소가 제공되기 때문이다. 그리고 9기 기수에서는 벙개가 올라왔었다. 그래서 교육 시작하기전에 다양한 직무의 분들과 먼저 이야기를 할 수 있었고, 나같은 경우도 자기소개 페이지로 본인 PR을 할거라는 내용을 알게되었어서 급하게 수정해서 PR이 안 망할 수 있었던 것 같다. 구름톤동안 팀빌딩이후 다른 분들과 이야기 할 시간이 정말 부족하기 때문에 시간이 되면 여러 사람들과 이야기 해보는 것을 무 적 권 추천한다.

bungae

1️⃣ 일차

제주 시청쪽에서 30분정도 대중교통을 이용하면 1일차 교육 장소인 구름스퀘어에 갈 수 있다. 첫 1일차에서는 교육과 각자 본인들의 PR을 할 수 있는데, 일정을 간단하게 말씀드리면 아래와 같았다.

schedule

1. 아이스 브레이킹

랜덤으로 조를 짜고, 미니 게임을 합니다. 저희는 스피드 퀴즈이였다. ! 저희 팀이 이겨서 아래와 같은 상품을 얻었답니다 하하.

ice-breaking

2. 본인 PR

노션 페이지 하나로 자신에 대한 어필을 해야합니다. 너무 평범하면 기억이 안나긴하지만 아무래도 사람이 많다보니까 그건 어쩔수없는거 같아요. 하지만 다들 이야기들어보면 본인들이 점찍어둔 분들은 따로 적어놓는다구 하더라구요.

PR

3. 구름 디자인 시스템 혹은 클램폴린 IDE 실습 교육

본인은 배포 관련해서 기본지식도 부족하고 들어보고 싶어서 클램폴린 IDE 실습 교육을 택했고, 확실히 나중에 해커톤이 진행되고 배포를 막 하려고할때 도움이 됬었다. 구름톤 참여하기전에 예습을 해오라고 슬랙에 있긴했었는데.. 많은 분들이 (나도포함)해서 하고 온 사람은 거의 없었다.

IDE

4. 멘토와 심사의원분들의 연사

  • 해커톤에서 성장하는 법

    해커톤 관련해서 이를 통해 성장하는 것이란 ? 에 대해서 그래프와 간략한 통계를 보여주시면서 이야기 해주셨고, 해커톤동안 굳이 안했으면 하는것에 대해서도 말씀해주셨다.

  • 오픈소스로 신나는 해커톤

    여기서 제일 기억에 남는 문구 거인의 어깨에 올라타자 였다. 이미 우리가 하려는 기능은 거의다 구현이 되어있기 때문에 짧은 해커톤 기간동안 이를 잘 활용하자 였다. 그리고 나는 카카오에서 AI 관련 API가 있는지 몰랐는데 흥미로워서 문서 좀 찾아 읽어 보았다.

  • 중요한 건 꺽이지 않는 (AI 와의)소통

    나온지 며칠 안된 OPENAI에서 발표한 SORA를 시작으로 다양한 LLM 모델들과 프롬프트 공법 등을 보여주셨다. 이 때 느꼈다. 이번 해커톤에서 이건 AI쓰라는거지 라는 느낌...

lecture

5. 키워드 발표

8기때와 똑같은 스마트관광 (생성형 AI) 이라는 키워드가 주제였다. 이번 주제는 다르겠지 싶었는데 아쉬웠다.

2️⃣ 일차

  • KAKAO Developers 페이지 및 API 소개
  • Cloud Team 및 좋은 개발자란 ..

위와 같이 KAKAO에 관련해서 이야기를 해주셨다. 3... 3년만 기다려주세요.

kakao

대망의 아이데이션 ( IDEATION )

내 아이디어는 OPENAI를 이용해서 무장애관광 관련해서 데이터화가 안되고 수기로 작성한 데이터들을 정제하여 제주도에서의 무장애관광 관련해서 정보 및 장소에 대한 데이터를 만드는 아이디어 였다. 하지만 낭만이 너무 없었다는 것을 추후에 알았다.

ideation

다른분의 아이디어를 보게되었고 한눈에 반하게 되었는데, 신박하고 재밌어보이는 아이디어 스와이프 제주 였다. 바로 발표 다 끝나기전에 슬랙으로 작업을 걸었고 우리는 팀이 되었다. ㅎㅎㅎㅎ

ideation2

팀빌딩은 먼저 간 사람이 임자이기 때문에 무조건 본인이 땡기는 아이디어라면 바로 달려가길 추천한다 !

그 이후에는 팀끼리 단체 사진찍구, 비어파티가 진행되었다. 물론 그 사이에 많은 일들이 있었지만 (카페가서 서로에 대해서 이야기하고 아이디어 고도화정도) 비어파티 때가 이제 해커톤 끝날때까지 마지막으로 여러 사람들과 소통할 순간이니까 이야기 많이하고... 많이 먹어야한다. 낭만을 챙길 수 있는 일차는 이때뿐이다. 그리고 그 날 대강적인 기획을 마치고 나는 자러 들어갔는데 기획자형은 남아서 아래 낙서같은 기획을 플로우차트로 그려주셨다. 역시 기획자 하하ㅏㅎㅎ

group

design

beer

picture

3️⃣ 일차

눈을 뜨자마다 역할을 분담하고 개발을 진행했다. 나는 카드쪽과 생성형 AI를 담당하게 되었다. 우리가 생각하는 틴더 형식의 스와이핑 기능을 이미 구현해놓은 아주 맛있는 패키지 ( 거인의 어깨 )를 사용했고, 해당 패키지는 react-spring에 의존하고 있어서 카드를 뒤집는 기능을 해당 패키지 문서 찾아보고 커스텀해서 내 입맛따라 구현했다. 그리고 처음에는 백엔드쪽에서 OPENAI쪽과 바로 통신하려고 했지만 여의치 않아서 프론트쪽으로 빼서 작업을 하게 되었다. 그리고 개인적으로 Langchain을 사용해서 프로젝트에 직접 넣어서 사용해보고 싶기도 했다. 그리고 정말 백만년만에 jsx로 프로젝트를 진행했는데 진짜 고통스러웠다. 하지만 뚝딱뚝딱 타입 생각없이 진행하기위해 좋은 선택이였던거 같다.

start

구름톤에서는 시간이 정말 순식간에 지나갔다. 별로 하지도 않은 것 같은데 시간이 아주 쭉쭉 지나갔고 3일차에 커피만 3-4잔 마신거 같다. 그리고 구름톤에서 제공해주는 밥도 맛있었다. 고등어도 원 없이 먹었고 배고플만 하면 뭐가 자꾸 들어왔다 ㅎㅎ....

dinner

그리고 엉덩이가 아플때면 저녁을 먹고 팀끼리 산책을 나가기도 했다. ( 조-금씩 미쳐가는 본인 )

pcininc

대망의 프론트 배포.... ! 우리 팀장 갓 희찬 센세가 엄청난 디버깅으로 해냈따... 크램폴린을 사용하면서 많은 팀들이 고통을 받았는데 정말 몇번을 트라이하고 저렇게 기도를 몇번했는지 모르겠다. 하하하핳

pcininc

4️⃣ 일차

생성형 AI쪽 작업을 4일차로 넘어가는 새벽부터 작업한 것 같다. 본격적으로 시작하기에 앞서서, 다른 팀들과 차별점을 두기 위해서 생각한 것은 어플리케이션 내에 우리 프로젝트를 위한 데이터임베딩해서 직접 벡터 데이터 베이스를 빌드 타임에 넣어놓고 OPENAI가 해당 벡터 데이터베이스로 부터 Context를 가져옴으로써, 할루네이션(hallucination)데이터 최신화(Data modernization)를 기대효과로 말 할 수 있었다. 그리고 외부 vector DB보다는 Local로 담은 것은 클램폴린 특성상 외부 DB 통신은 지향하라고 했었다. 이미 Langchain으로 직접 해본 경험이 있었기 때문에 어렵지 않게 해내었다. 사실 데이터가 굉장히 많지는 않아서 OPENAI에게 Question 을 던질때 그 데이터를 다 같이 던져도 무방할 것 같지만, 구조적으로 이게 맞다고 생각했다.

그렇게 아래 2가지를 구현했다.

  • 우리가 가지고 있는 키워드안에서 자연어를 입력 받고 키워드 중에 알맞는 3가지 키워드를 반환
  • 사용자가 선택한 장소를 토대로 평가하여, 결과의 제목과 내용을 재밌게 변환하여 반환

pcininc

그렇게 점점 미쳐갈 무렵

me

그렇게 결국 우리는 대망의 발표를 하게 되었다. 디자이너 주성기획자 경수형 정말... 발표 자료가 아름다웠다. 나도 우리 서비스가 이런거였어 ? 라고 할 정도로.. ㅋㅋㅋ

pre

그렇게 우리는 ..... ! 1등을 하게 되었다.

prize

한명도 모나지 않은 우리 팀원과 각자의 위치에서 최선을 다하고 낭만까지 챙긴 우리 밀감 팀 !! 첫 해커톤인데 너무너무 운이 좋았던 것 같다.

뒤풀이

발표 끝나고 수상을 한 뒤 가야하는 사람은 제외하고 우리팀은 저녁을 같이 먹고 그 다음날까지 먹고 마시고 자고 먹고하면서 서로에 대해서 몰랐던 이야기도 듣게 되고 팀원 그 이상 좋은 인연들을 만나게 된 거 같아서 너무 좋았다.

night

snack

lunch

black

후기

이렇게 짧은 시간 동안 밀도 깊게 협업해본 경험은 없는 것 같다 ( 그것도 제주도에서 ). 그리고 이렇게 다양한 직무와 비슷한 연차들이 모인 해커톤이 또 있을까 싶다. 더 많은 분들과 이야기를 나누고 싶고, 시간이 더 있다면 우리의 프로적트를 더 고도화를 하고 싶은 마음이 계속 들었다... 항상 반복되는 회사일과 별개로 이런식으로 색다른 경험과 짧은 시간내에 이렇게 많은 걸 경험할 수 있는 일이 많을까 ? 만약 다른 사람이 구름톤에 지원을 고민한다면 무조건적으로 추천을 할 거 같고 물론 나는 연차 4일을 사용해서 왔지만 직장인들이라면 더욱 와야한다고 생각한다. 이렇게 결과도 좋았어서 느슨해진 나에게 엄청나게 좋은 동기부여 장작이 되어 주었고 개발이 재밌는 것을 좀 오랜만에 느낀거 같다. 또 좋은 소식이 있는데 우리 밀감은 이 MVP를 기반으로 고도화해서 실제로 서비스를 해보려고 한다.

아쉬웠던 점

막 크게 아쉬웠던 점은 없었지만 굳이 찾아본다면, 멘토 분들은 다 풀스택 개발자이셨지만 뭐랄까 - 프론트엔드도 겸할 수 있는 백엔드 개발자느낌이 강했다. 물론 나도 풀스택을 지향하지만 프론트만이 고민할 수 있는 부분에 대해서 제대로 못 물어본게 아쉬웠고, 클램폴린 IDE경우도 좀 아쉬웠다. 프로젝트를 처음 구성할 당시에 제대로 된 가이드라인 같은게 있었더라면 혹은 보일러 템플릿이 더 잘 되어있었다면 모든 팀들이 뭔가 고생을 덜 했을거 같기는 하다... 그리고 구름톤 관련 노트북 스티커도 생기면 좋을 것 같습니다 ㅎ하하하..

milgam

프론트엔드 개발자로써의 일년

· 12 min read
Jeongmin Lee
FE Developer on the Cutting Edge

들어가며

미국에서 인프라 및 전산 관련한 인턴쉽을 마치고, 막연히 개발 쪽을, 웹 개발이라는 분야, 그리고 프론트엔드쪽을 공부하고, 취업하여 일한 지 벌써 1년이라는 시간이 지났네요. 길다면 길고 짧다면 짧은 1년이었지만, 한번 올해 주로 무슨일을 했었고 어떠했고 무엇을 더 해야하는지 짚어보면서 나름 정리해 보고자 합니다.

내가 했던 일

마이그레이션 ( Redux -> SWR )

취업 준비 당시에는 리덕스 툴킷을 사용한 경험은 있긴 했지만 입사하자마자 나와 동기형을 위해 준비했다는 레거시 리덕스를 SWR 이라는 서버 상태 라이브러리로 마이그레이션 하라는 명을 받게됩니다. 입사 하고 1-2달 정도 몸을 담그다가 다른 프로젝트로 빠져나갔지만 처음으로 회사에서 사용하는 큰 코드베이스에서 상태 관리의 근간을 바꾸는 작업을 직접해보면서 SWR 이라는 서버 상태 라이브러리를 공부했고 전역 상태와 서버 상태에 관해서 한번 더 찾아보고 회사 코드 베이스에 대해서도 좀 더 넓고 얇게 1차적으로 보게 된 계기 같습니다.

migration

설문 조사 폼 빌더

기존에는 monday.com이라는 3rd party 서비스를 이용해서 유저에게 설문 혹은 데이터를 수집해왔습니다. 그러다 보니 데이터는 monday.com에 데이터가 쌓이게 되고 이 데이터를 DB를 다시 옮겨줘야하는 불필요한 작업이 있었고, 이를 개선하기 위해 저희 서비스안에서 설문 조사폼을 생성할 수 있도록 피쳐를 처음으로 혼자 받아서 개발하게 됩니다. 여기서 저희 회사 아쉬운점이 있다면 공식 홈페이지나 비지니스 모델이 있는 플랫폼은 기획과 디자인이 있지만 어드민 관련해서는 일-절 기획과 디자인 없다보니, 처음 구현하는데 굉장히 시행착오와 어려움이 많았었죠. 그리고 아직 React-Hook-Form에 대한 라이브러리에 숙련도도 부족하다보니 타이핑과 여러모로 쉽지 않았네요. useFieldArray API를 사용해서 다이나믹한 폼들을 만들면서 해당 라이브러리 숙련도도 올리고 실제로 RPD까지 올라가고 실제 유저가 사용하는 것을 느끼게 해준 첫번째 고마운 프로젝트 였던 것 같습니다. 글을 쓰는 이 시점에도 그때 그 시절 코드를 보면서 한탄을 하면서 리팩토링 및 기능 개선을 추가로 진행 중 입니다.

노드 API -> Nextjs 어플리케이션으로의 내재화

노드 서버를 기반으로 사용하던 API가 있었는데 비지니스 모델에 직접적으로 관여되는 API이다보니 이를 어드민 페이지에서 직접 넣는 작업 맡게되고, 이를 노드서버를 없애고 Next.js API route에서 돌아가게끔하고 내재화를 하는 것 이였습니다. 없었떤 타입스크립트를 적용하고, API route에 맞게 구조를 고쳐고 에러핸들링에 더 살을 붙여가면서 풀스택 프레임워크의 특징을 몸소보면서 느꼈던 것 같습니다. 하지만 이때, 보안적으로 치명적인 실수를 하나 했었는데 API route에서 아무런 조치를 안해 놓으면 URL을 통한 직접 접근이 가능합니다. http://localhost:3000/api/something/test 이런식으로 접근이 가능하게끔 올려놨다가 이사님이 발견하고 middleware 를 통해서 해당 문제를 처리해서 엄청난 불상사를 막을 수 있었던것 같습니다.

느낀점들

1. 문서화는 중요하다. 🧾

사람은 기억을 다 할 수 없고 그리고 사람과의 소통 그리고 대화는 좋지만 어떠한 업무가 진행되고 해왔고, 그리고 해야하는지 이런 컨텍스트를 전달하는 것은 말이 아닌 정리된 문서로 동료에게 전달해야하고 남겨야한다고 생각한다. 이게 본인의 책임과도 관련되어 있고 서로간의 시간 낭비를 덜 하기 때문이다. 지난 1년을 돌아보면 업무 관련 이슈 정리 및 문서를 남겨놓긴 했지만, 너무 간단명료하거나 전달해야하는 컨텍스트가 너무 추상화가 되있는 경우가 많았고, 개인적으로도 내가 해왔던 일들이 많이 안남아 있는 것을 알게 되었다. 특히나... 연봉협상때 좀 많이 힘들었다. 정말 정말 뼈저리게 이를 느낀 작년이였다.

2. 플러터 그만하고 웹 사이드프로젝트 하자 🚀

사실을 취업하고 나서 제대로 된 웹프로젝트를 시작하지 못했었다. 계속 미루고, 서울에 정착한지 얼마 안되기도 했고 미룰 이유는 너무 많았다. 웃기게도 현재는 플러터 관련된 사이드 프로젝트를 진행 중인데, 처음에는 마냥 쉽고 재밌어서 하게 되었지만 하면 할 수록 정말 정말 어렵다는 생각이 들고 디자인 패턴이나, 기초적인 지식 없이 부딪히면서 프로젝트를 진행하다보니 많이 힘들었다. 물론 지금도 이론적인 지식이 너무 부족한 것 같다. 앱 개발자로써 진로를 갈거면 확실히 노선을 갈아타거나, 아니면 제대로된 웹 프로젝트를 올해에는 들어가서 진행하고 싶다. 심지어 내 프론트엔드 개발자로써 낼 수 있는 포트폴리오 웹사이트가 없는게 나의 유머다. 하하

3. 컨퍼런스는 재밌다. 📚

작년에 인프콘, 데브페스트 등 컨퍼런스를 다녀보면서 동기부여를 여러모로 받을 수 있었다. 물론 이 컨퍼런스라는 것을 통해서 어떤 지식을 얻어가는게 아닌 키워드를 얻어가고 또 이렇게 인사이트를 얻어가려고 열심히 하는 개발자분들 보면서 더 열심히 해야겠다는 생각이 든다.

inflearn

4. 운동은 꾸준히 하자 🏋️

서울 처음올라와서 반년만에 자취를 하게 되었는데, 이때 처음으로 크로스핏을 하게 되었습니다. 그런데 확실히 강제성이 부여되니까 살면서 구경도 할 수 없었던 허벅지 근육이 보이기 시작하고 체력이 좋아진게 느껴진다. 올해도 꾸준히.. 헬스든 크로스핏이든 계속해서 근육량을 늘려가자.. 항상 앉아서 일하니까 위험한 것 같다.

5. 꾸준히 하니까 늘긴는다

반년전에 짯던 코드들을 최근 들어 다시 리팩토링을 하고 있다. 왜 저렇게 짯었는지 이해도 안되고, 숙련도면이나 컨벤션을 못따른 부분도 너무 많이 보여서 부끄러우면서 그래도 계속 일하고 보다보면 느는구나 라는 생각은 든다. 하지만 코드 자체를 더 잘짜졌다기 보다는 뭔가 도메인과 해당 기술에 대한 숙련도에 익숙해진것에 의한것 같다. 내년에는 좀 더 코드 자체에 대한 이해도와 이론적으로도 빠삭한.. 내가 되었으면 좋겠다.

2024년에 하고 싶은 것

플러터

아무래도 웹쪽으로만 하기에는 경쟁력이 없는거 같기도하고, 나의 무기를 늘려서 나쁠게 없다고 생각한다. 그런데 요즘 너도나도 다 배우고 있어가지고 경쟁력 있어질지는 모르겠는데 꾸준히 해야할 것 같습니다 !

CS적 요소 공부하기

가끔 팀원으로써 면접에 들어가기도 하는데, 다시 처음부터 기본기부터 공부해야겠다는 생각이 나는 요즘이다. 이렇게 미루다가 벌서 1년이 지나버렸다. 잘하자 이정민..

사이드 프로젝트

회사에서 사용하는 스택만 사용하니까, 다른 유명한 스택들에 대한 기술적인 부채가 생기는 것 같고 또 기본적인 CICD 지식도 부족한걸 느끼는 요즘이다.. 잘하자 -

개발 관련 도서 읽기

인스타그램에서 서평단을 신청해서 받은 도서들도 있지만 인강보다는 가끔은 정보 획득하는데는 도서가 훨씬 빠르다는 생각이 든다.. 그런데 내가 읽고싶어서 사서 본 책은 없는거 같은데 최소 10권은 읽어보도록 하자 !