안녕하세요. 리디 제품센터의 웹팀에서 프론트엔드 엔지니어로 근무하고 있는 이재준이라고 합니다. 리디북스/ 셀렉트/ 페이퍼의 웹 전반에 관련된 업무를 담당하고 있습니다. 리디를 첫 회사로 시작해 이제 3개월 차인 주니어 개발자인데요. 지금까지 너무 만족스러웠던 리디 라이프(!)를 입사부터 첫 배포까지의 과정과 함께 얘기해보려 합니다!
입사와 온보딩 과제
리디에 입사한 개발자는 보통 온보딩 과제를 받게 됩니다. 현재 리디가 제공하는 서비스의 코드 베이스에 익숙해질 수 있도록 하기 위함이며 약 1~2주 정도 간단한 과제를 수행하는 식으로 진행됩니다. 제가 받은 과제는 React를 기반으로 한 CMS(Content Management System)를 수정해주는 일이었습니다. 아래와 같이 중복 도서를 표시해 주고 중복일 시 자동으로 ‘오픈 종료’ 상태가 될 수 있도록 해주는 간단한 작업이었죠.
하지만 언제나 그렇듯이 새로운 코드 베이스를 파악하는 건 그리 간단하지 않았습니다. 상태관리 라이브러리를 별도로 적용하지 않고 최상위 컴포넌트부터 최하위 컴포넌트까지 prop이 오르락내리락하는 롤러코스터 패턴(..?)을 준수하며 짜여있었죠. EditModal에서 state로 가지고 있는 값과 함수를 각각의 행으로 표현된 EditSelectionItem까지 내려주고, EditSelectionItem에서 값을 변경할 시 wrapping되어 내려간 함수를 이용해 EditModal의 state을 조작하여 최상위부터 재렌더링하는 다소 비효율적인 형태였기 때문에 주어진 과제를 처리하는 것 외에도 추가적인 수정이 필요했습니다.
먼저 중복 표시 이슈를 중복 도서에 대한 정보를 담은 해시테이블을 구현해서 빠르게 처리하고, 자동 오픈 종료 기능을 구현하면서 상태관리를 효율적으로 하기 위해 context API, Redux tool-kit를 적용해보기도 했습니다. 결과적으로는 상태관리가 메인 이슈가 아니었기 때문에 EditSelectionItem의 state 조작에 debounce를 걸어 불필요한 재렌더링을 줄인 정도로 마무리하였습니다. 이를 통해 리디북스 CMS의 코드 베이스를 면밀히 파악하고 기존의 Redux에서 다소 개선된 Redux tool-kit도 다뤄볼 좋은 기회였습니다.
이렇게 이슈를 마무리하고 개발 인생 처음으로 (아직 한 달도 채 되지 않았는데..!) 제가 만든 코드를 살아 움직이는 서비스에 배포를 하게 되었어요. 내부 관리자들이 주로 사용하는 CMS 특성상 장애가 나더라도 리스크는 적지만, 혹시나 하는 마음에 계속 모니터링을 했던 기억이 있습니다. 다행히 아무 이슈 없이 잘 배포되었고 지금까지 잘 운영되고 있다고 합니다! 새삼 뿌듯하네요ㅎㅎ
이후 진행한 일들
웹 야간 시간대 안내 문구 변경
다음으로 진행한 업무는 야간 시간대 푸시 알림 정책 변경에 따라, 관련 있는 야간 시간대 안내 문구를 찾아서 변경하는 업무였습니다. twig 템플릿에 하드 코딩 되어있는 해당 문구들만 찾아서 바꿔주면 되는 아주 간단한 업무였죠.
하지만 굉장히 떨렸는데요. 그동안 다룬 CMS가 내부에서만 사용하는 온실 속 화초라면, 실제 유저들이 사용하는 서비스는 다소 야생(!) 같은 느낌이었거든요. 당연히 문제없을 줄 알면서도 배포 후 반영되기까지 분 단위로 페이지를 새로 고침했던 뉴비스러운 기억이 있네요.
리팩토링 프로젝트
위 업무들을 수행하는 동안 장기적으로 진행할 웹 리팩토링 프로젝트가 설정됐고 이를 병행하고 있습니다. 아래 사진처럼 전혀 차이가 없는 똑같은 페이지를 열심히 만들고 있죠. 🙂 (개발자 친구들은 다들 재미없지 않냐는 데 저는 이상하게 재밌습니다.)
<Before(Vue)>, (오른쪽) <After(React)>웹에 존재하는 레거시 코드들을 Next.js, React, Redux Toolkit 등의 기술 스택으로 전환하여 더 직관성, 확장성 좋은 코드로 변환하는 작업인데요. 잘 짜인 현재 리디북스의 웹을 최신 기술 스택을 이용하여 바닥부터 다시 올리면서 기본적인 컨벤션 룰을 세우는 법부터 기술에 대한 깊은 이해까지 정말 많은 것을 배우고 있습니다.
리디에서 경험한 개발 문화
아마 테크 블로그를 읽고 있는 많은 분들이 리디의 개발 문화를 궁금해하실 거라고 생각합니다. 개인적으로 크게 동기부여를 받은 두 가지를 얘기해보려고 합니다.
데일리 스탠드 업 미팅 & 스프린트 미팅
리디 제품 센터는 아침마다 스크럼 미팅을 가집니다. 사내 라운지에 모여 각자 어제의 성과와 오늘의 목표를 간단히 얘기하고 업무의 진행 상황을 공유함으로써 서로에게 동기부여가 되고, 짧은 시간이나마 스크럼 미팅을 준비하면서 주어진 업무를 잘게 쪼개고 효율적으로 진행할 수 있도록 합니다.
또한 제가 속한 웹팀의 경우 매주 금요일 스프린트 미팅을 가지는데요. 스프린트 미팅 때는 지난 일주일을 회고하면서 아쉬운 점과 좋았던 점에 대해 얘기합니다. 더 나아질 수 있는 방법을 함께 간단하게 얘기하고 다음 주의 목표를 세우면서 매주 발전해나가는 팀이 되기 위해 고민합니다.
스터디 지원과 새로운 기술 도입에 개방적인 환경
많은 개발자분들이 업무 외적으로도 개인의 성장을 위해 개발에 관련된 다양한 공부를 하고 계실 텐데요. 제가 속한 웹팀에서도 함수형 프로그래밍에 대한 스터디를 진행했습니다. 현재 React 진영이 함수형 컴포넌트 등 함수형 패러다임을 따라가고 있는 추세이기 때문에, 관련된 스터디를 통해 좀 더 깊이 있는 이해를 해보자는 의견이 있었기 때문입니다.
실제로 쾌적한 회의실과 도서, 샌드위치, 커피 등의 지원을 받으며 약 3주간 진행하였는데 map, reduce, 클로저, 커링, 제너레이터 등 익숙하게 사용하고 있던 js 문법들에 녹아있는 함수형 프로그래밍의 이론을 공부할 수 있는 유익한 시간이었습니다.
또한 현재 리팩토링 프로젝트의 service 레이어는 함수형 프로그래밍의 아이디어를 일부 차용하여 response model과 error model을 분리하는 방식으로 구현되어 있는데요. 스터디한 내용을 실제 프로덕트에도 적용을 하니 감회가 새로웠습니다.
마무리
개인적으로 웹팀에서 자발적으로 진행한 스터디가 가장 기억에 남는 것 같아요. 각자 주제에 대해 공부해와서 아침 9시에 발표를 한다는 것이 쉬운 일이 아닌데 모두들 열심히 참여하는 모습을 보며 자기 계발에 대한 큰 동기부여를 받았고 js의 util함수를 분석해보며 얻은 지식도 알찼습니다.
지금까지 제가 경험했던 리디에서의 수습 기간과 웹팀의 일원으로써 진행한 업무에 대해 정리해보았습니다. 리디의 개발부서는 어떤 분위기에서 어떤 업무들을 진행하고 있는지, 조금은 와닿는 글이었기를 바랍니다! 이 글을 읽고 리디의 일원이 되는 것에 조금 더 관심이 생기셨길 바라며 이만 마치겠습니다. 감사합니다!
고객과 발맞춰 새로운 콘텐츠 경험을 선보이는
리디와 함께할 당신을 기다립니다.
