삼바의 2022 회고록

올해 많은 변화들이 있었고 그 변화들 속에서도 꾸준히 공부하고 멘탈을 관리하며 성장하는 한 해였습니다. 회사에서 조금 더 책임을 느끼며 일을 하였고 팀원, 외주분들과 함께 일하기 좋은 방법들을 찾고 개선해나갔습니다. 올해 목표했던 업무들도 해내고 회사에서 인정도 받았지만 나에게 그리고 우리 서비스들에 부족한 점들을 알게되었습니다. 2022년 동안 진행했던 일들에 대해 회고를 진행해보려합니다.

업무

올해는 리액트(React) 생태계 속에서 많은 기능들을 구현하는데 시간을 보낸 한해였습니다. 장고 템플릿(Django Template)에서 구현되어 있는 기능들을 리액트로 리뉴얼하며 디자이너, 기획자와 이야기하며 사용자에게 더 나은 UI/UX를 제공하기 위해 고민하고 직접 구현하여 사용자의 불편을 줄여나갔습니다.

또한 서비스를 위해 레포를 구성하고 CI/CD에 대해 고민하는 시간이 늘어났습니다. 여러명이 일하는 환경속에서 더나은 방법을 고민하고 적용해나갔습니다.

사장님사이트 셀프서비스

올해 대부분의 시간동안 기존 장고 템플릿를 통해 구현되어있던 사장님사이트의 셀프서비스 서비스들(ex. 품절 관리, 메뉴 관리)을 리액트로 전환하는 작업을 진행했습니다. 기획자분들이 각 서비스들의 기능을 파악하는데 도움을 드리고 디자이너와 더 나은 UI/UX에 대해 이야기하고 공통 컴포넌트로 만들 수 있는 부분들을 분리하고 사용처에서 쉽게 사용할 수 있도록 Custom Hook을 만들기도 했습니다.

거의 달마다 서비스 하나씩을 배포했는데 스쿼드에서 함께 일하는 기획자, BE, 디자이너, QE(Quality Engineer) 모두 소통이 잘되고 호흡이 잘맞아 재미있게 일할 수 있었습니다. 자신의 영역이 아니더라도 먼저 의견을 제시하기도 하고 진행하는 일에서 이슈가 있을 경우 슬랙 채널에 메시지를 하거나 허들을 통해 편하게 의견을 나눌 수 있었는데 만들어나가는 서비스에 대한 이해수준을 맞추고 서로의 어려움을 이해할 수 있어서 좋았습니다. 처음에 산정하였던 일정대로 혹은 조금 빠르게 서비스들을 배포할 수 있었고 배포 후에도 큰 이슈없이 잘동작하여 배포에 대한 부담감도 줄어들었습니다.

이전에는 레포내에서 리액트를 통해 특정 기능을 구현하는 일에 중점을 두었었다면 올해부터 사장님향 서비스의 레포들을 관리하게 되어 성능 개선에도 관심을 갖고 개선작업들을 진행하였습니다. 예를 들면 Webpack Config를 통해 관리되는 프로젝트에서 lazy 를 사용한 코드 스플리팅과 트리쉐이킹(Tree Shaking)을 통해 TTI(Time To Interactive)를 어떻게 줄일 수 있는지 공부하고 적용해보았습니다. 작업하며 공통된 레이아웃도 코드 스플리팅을 하여 사용자에게 리로드를 통해 하얀 화면을 보는 불편함을 드리기도 했지만 코드 스플리팅 영역을 수정하며 개선할 수 있었습니다.

대상

대상 :yay:

회사에서 진행한 Awards에서 사장님사이트 셀프서비스가 무려 “대상”에 선정되었습니다. 생각도 못한 일이였고 받으면서도 얼떨떨했습니다. 일년동안 함께 고생한 동료들이 많이 생각났고 상을 받고 있는 동안에도 내일 진행될 배포를 위해 고생하고 있는 팀원들이 생각이났습니다. 사실 상을 받은 후에 행사에 참여하지 못하고 내려가서 내일 배포를 위해 일을 했고 우리가 일하는 것에 변화는 없었습니다. 하지만 그동안 1위 업체에 비교당하고 안좋은 인식을 가지고 있던 사장님사이트의 서비스들을 개선하는 것에 회사에서도 관심을 가지고 응원한다는 느낌을 받아 기분이 좋았습니다. 그리고 리더분중 한 분이 특히나 좋아하셨는데 그 웃음 가득한 얼굴이 잊혀지지가 않습니다.

여러명이 함께 개발하기

FE 조직이 커지면서 한 레포내에서 동시에 일하는 개발자가 5명까지 늘어나게 되었습니다. 여러명이 효율적으로 일할 수 있도록 CI/CD에 대해 관심을 가지게 되었고 작게는 husky를 적용하는 것 부터 브랜치 전략 수정, 멀티 스테이징 지원, 배포 자동화등을 공부하고 적용하였습니다.

자연스럽게(?) 이끄는 입장이 되었는데 처음으로 이런 역할을 하다보니 저도 부담감이 있었습니다. 그래서 팀원분들께 솔직하게 저도 이렇게 해보는 것이 처음이라 시행착오가 있을 수 있는데 착오가 없도록 잘 찾아보고 POC(Proof Of Concept)해서 팀원분들께 공유한 후에 하나하나 해보겠다고 했습니다. 그리고 제가 하는 일들에 대해 편하게 의견을 나누고 함께 만들어나가자고 말씀드렸습니다. 이를 위해서 작게는 슬랙채널을 만들어 질문을 편하게 할 수 있도록 하였고 크게는 우리 팀원들끼리 진행되는 내용에 대해 공유할 수 있도록 위클리를 만들기도 했습니다.

브랜치 전략

DTL(Domain Tech Leader) 인호님의 따뜻한 댓글 :)

여러명이 한 레포에서 일하게 되면서 브랜치 전략을 어떻게 가져갈지 고민이 많이 되었습니다. 처음에는 각 기능들이 독립된 환경에서 개발될 수 있고 개발 순서와 배포 순서를 따로 생각할 수 있도록 Gitflow를 도입했고 원했던 목적과는 맞았었지만 사용하면서 공통 작업으로 메인 작업의 흐름이 방해되는 점, master 브랜치와 작업 브랜치의 거리가 멀어지면서 Conflict를 풀어내기 어려워지는 점 등의 단점이 있어 TBD(Trunked Based Development)로 전환하고 있습니다.

브랜치 전략을 도입하며 팀원들과 이해수준을 맞추기 위해 각 전략을 도입하게된 이유, 도입하는 방법, 사용하는 방법, 우려하는 점들을 담은 글을 작성하고 위클리 시간을 통해 공유하였습니다. 이를 준비하며 팀원들에게 시행착오를 하지 않게 하기위해 POC를 진행하고 논리적으로 설득할 수 있게 보다 완성된 글을 작성하려 노력했습니다.

여러 브랜치 전략들을 알아보고 도입, 수정해나가면서 완벽한 브랜치 전략은 없다는 생각을 했습니다. 내년에도 우리 서비스의 특성에 맞추어 팀원들과 함께 도입하고 점점 개선해나갈 것 입니다.

Deployment

Github Actions

주로 AWS의 S3, CF(CloudFront) 서비스를 사용하여 서버리스한 환경속에서 배포를 하고 있는데 우리가 일하는 환경에 맞추어 멀티스테이징을 구성하고 멀티스테이징에 원하는 브랜치를 배포할 수 있도록 작업을 하였습니다. 그동안 만들어둔 Workflow대로 Github Action을 사용하기만 하다가 직접 작성을 해보는 경험을 할 수 있었습니다. 또한 S3, CF, Route53과 같은 서비스들을 DevOps 팀원분들과 생성하고 사용하는 경험을 할 수 있어 좋았습니다. 보안, 오류 페이지 처리, 캐싱등에 대해 고민하고 더 나은 방법들을 적용해나갔습니다.

베트남 외주

하노이 호텔에서 본 전경

회사의 주주가 바뀌고 진행되야하는 프로젝트가 늘어남에따라 회사에서 외주를 시도해보게 되었습니다. 따라서 외주로 진행되는 FE 프로젝트를 위해 서비스 구성, 문서 작성등을 했습니다. 우리 조직이 아닌 외부 조직에게 우리가 일하는 방식에 대해 설명해야했고 제가 직접 일정체크까지 하진 않았지만 작업이 잘진행되고 있는지 확인이 필요했습니다. 외주분들에게 다양한 의견을 듣고 우리가 선택한 것들이 맞는지 다시 생각해볼 수 있는 계기가 되었습니다. 우리가 선택한 라이브러리들에 대해 설명해야되었고 모호한 부분에 대해서는 날카롭게 질문이 들어왔습니다. 이러한 부분들에 이야기하고 더 나은 방법들을 선택하기 위해 공부하는 시간을 갖을 수 있어 좋았습니다.

아무래도 외주라는 특성으로 인해 외주 개발자들은 자신이 하던 방식 그대로 빠르게 개발하는 것에 초점을 가지고 있었는데 이는 우리가 서비스를 생각하는 관점과 달라 부딪히는 부분들이 있었습니다. 또한 영어로도 한국어로도 완전하게 대화하기가 어려워 확인하는 작업이 지속적으로 필요했습니다. 이에 대해 컨벤션, 가이드 등은 문서를 통해 소통하고자 했고 코드리뷰를 통해 지속적으로 서로의 싱크를 맞추는 작업을 했습니다.

채용

올해는 기술면접에 들어가기 시작하기도 했고 작년과 마찬가지로 회사 블로그에 글도 작성하고 채용설명회도 참여하였습니다.

기술면접

면접에 대한 생각을 정리하기 위해 호수공원을 50바퀴는 돌았을겁니다. 우리와 함께 일하는 개발자를 채용하기 위해 어떤 자세로 면접에 임해야하는지 면접을 보시는 분께 어떤 것들을 여쭤봐야할지 고민이 많았습니다. 이러한 고민들이 이어지다보니 면접 스크립트를 여러차례 수정하기도 하고 어떤 질문들이 핵심을 꼬집을 수 있는지 고민하게 되었습니다. 면접을 통해 하게된 생각들에 대해서는 추후에 글을 따로 작성하도록 하겠습니다.

블로그

JS Conf에 앞서서 회사의 FE 조직을 소개하기 위해 회사 블로그에 “요기요의 FE Chapter를 소개합니다.”을 작성하였습니다. FE 조직이 어떤 일들을 어떻게 진행하고 있고 어떠한 문화를 가지고 있는지 소개하는 내용을 담고 있습니다.

채용설명회

상상을 현실로 FE벤져스” 캡쳐

사내에서 진행한 채용설명회의 “상상을 현실로 FE벤져스”라는 세션에 참여햐였습니다. 카메라 앞에서 엄청 떨렸는데 나름(?) 경력자라고 최대한 떨지 않고 같이간 팀원들에게 힘을주려고 노력했던 것이 기억에 남습니다. FE 개발자로 지원하게될 분들에게 도움이 되기를 바라며 참여했습니다.

외부활동

개발자 교육에 관심을 가지고 멘토링, 리뷰어 등에 참여해보았습니다. 개발자로 성장해나가시는 분들의 다양한 관점을 볼 수 있었고 함께 고민하고 나아가며 저 또한 성장할 수 있었습니다.

부스트캠프 FE 리뷰어

추가된 Organizations!

네이버 커넥트에서 진행하는 부스트캠프 웹, 모바일 7기에 리뷰어로 참여했습니다. 약 2달의 시간동안 3개의 프로젝트에 대해 4명의 캠퍼(수강생)분들과 리뷰를 하는 시간을 가졌습니다. FE 마스터가 이전 세미나에서 뵈었던 조은님이라 신기했고 규모가 엄청 커서 놀라웠습니다. 각 프로젝트 전후로 킥오프 미팅과 회고미팅을 가지며 캠퍼분들과 많은 이야기를 할 수 있었고 저의 경험들을 전해드릴 수 있어서 좋았습니다. 바닐라 JS로 진행되는 프로젝트부터 리액트를 사용한 프로젝트들을 보며 저 또한 기본기에 대해 배울 수 있었고 구현하는데 다양한 방법들을 사용하는 것을 보고 배울 수 있었습니다. 캠퍼분들이 진행하는 것에 대해 제가 리팩토링 하는 방법, 사용하는 라이브러리와 선정 이유, 리액트에 대한 생각등을 전달해드릴 수 있어서 좋았습니다.

고용과 미래 멘토링

인천에서 개발자를 꿈꾸는 분들과 멘토링을 진행하였습니다. FE 개발자가 되기 위해 어떤 것들을 학습해야하는지 어떤 준비들을 해야하는지 이야기하는 시간을 가졌습니다. 코로나 확진자가 줄어드는 시기여서 대면으로 진행할 수 있어 좋았습니다.

마무리

정말 다이나믹한 한해였습니다. 개인적으로는 결혼을 하기도 했고 업무에서는 작년보다 더 책임감을 가지고 진행해야하는 일들이 많았습니다. 그리고 동시에 진행되는 일들이 많기도 했습니다.(생각해보니 베트남도 다녀왔어요!) 부족함을 알기에 일들을 꾸준히 해내기 위해 낮에는 일하고 밤에는 인강보고 공부하고 정리했습니다. 덕분에 상도 받아보고 주변사람들에게 칭찬받는 한 해가 된거같아 뿌듯합니다.

올해 디자인 시스템에서 컴포넌트들을 만든 이야기, FE 스터디, 함수형 프로그래밍 스터디한 이야기(코틀린 해봤어요!) 등도 담고 싶었지만 내용이 너무 커질거같아 다 담지는 못했습니다. 코로나로 인한 거리두기가 해제되며 오프라인 컨퍼런스도 참여하고 배우게 된 것도 많고 동기부여된 점에 대해서도 적고싶은데 아쉽습니다.

어쩌면 주니어의 마지막일지 모르는 이제 시니어가 되어야하는 경계선에 서있는지 모르겠습니다. 하는 말과 행동에 책임이 더 커지고 더 나은 서비스와 팀을 위해 알아야할 것이 많아졌습니다. 부족할 수 있겠지만 이러한 일들을 해낼 수 있도록 내년에도 꾸준히 공부하고 일하며 나아가도록 하겠습니다.

 

2022년 제 기나긴 회고록을 읽어주셔서 감사합니다. 🙇