[DANO 다노 프론트엔드 인턴기]
프론트엔드 인턴으로 입사한지 네 달 된 이야기
애초에 3개월 인턴으로 7월까지 인턴기간었는게, 8월 말까지로 연장이 됐다. 9월부터는 다노의 정규크루로 일하게 될 예정이다. 오예! 🎉 고로 인턴기는 이번이 마지막 편이다. 정규 크루로서의 일상도 틈틈이 블로깅을 하는 게 좋을지? 어떤 이야기를 쓸지는 고민이다.
이전 글
👉 프론트엔드 인턴으로 입사한지 한 달 된 이야기
👉 프론트엔드 인턴으로 입사한지 두 달 된 이야기
👉 프론트엔드 인턴으로 입사한지 세 달 된 이야기
목 차
1. 지난 한 달 동안 했던 일들
2. 알게 된 것들지난 한 달 동안 했던 일들
- 다노샵 리팩토링 라이브(다른 프론트엔드 개발자분이 코드짜놓은 것에 숟가락만 얻은..)
- 다노샵 리팩토링 코드 배포 후 발견되는 버그 수정
- 팀 OKR 수립
- GTM(google tag manager)에 customize 변수, 태그, 트리거만들어서 페이스북 픽셀로 이벤트 보내기
- 다노샵은 데이터 기반한 의사결정! 지난 한 달동안에도 A/B 테스트들이 진행되었다.
- 다노샵 모바일에서 상품 리스트에서 상품 상세페이지로 이동 후 뒤로가기로 다시 상품 리스트 페이지로 돌아왔을 때 스크롤 위치 복원(코드리뷰 중)
- (내가 한 건 아니지만 다노의 문화인 것) 입사 3주년 축하다 된 리팩토링 코드에 숟가락 얹기
1년 전에 다노에 입사한 프론트엔드 개발자분이 다노샵 코드를 리팩토링 해둔 것이 있었다. 전사에 프론트 개발자가 1명이라 여러 업무에 치여 라이브를 못한 채 1년이 지났는데, 드디어 라이브를 하게 됐다. 나는 여기서 아주 작은 기여도로 몇몇 컴포넌트를 만드는 역할을 했을 뿐이다 😰
리팩토링 후 장점을 적어보자면..
- 리액트 버전이 15.4.2에서 16.8.6으로 올라갔다.
- lint rule을 엄격하게 적용해서 좀 더 가독성 있는 코드를 작성하게 될 수 있고, 2명의 프론트엔드 개발자가 컨벤션을 맞춰가기가 용이해졌다(고 본다).
- store 개념으로만 사용하던 redux가 좀 더 redux스럽게 다른 컴포넌트에 props를 보내거나 받는 일을 하게 되었다.
- 비동기적인 처리(api call) 등을 위해 redux-saga를 미들웨어로 쓰게 되었다.
- 예전에는 데스크탑웹을 위한 repository와 모바일웹을 위한 repository가 따로 있어서 같은 로직도 두 번씩 써야했지만, 이제는 한 repository에서 관리를 하게 됐다.
- container안에 기본적으로 데스크탑/모바일에서 공통적으로 사용하는 로직을 작성하고 render영역에 필요한 component들을 render하는 수조호 바뀌었다. 그래서 기본적으로 비즈니스 로직은 container에서 한 번만 작성해도 된다. 고로 디버깅도 더 편해졌다. 다른 프론트엔드 개발자가 새로 입사해서 리팩토링 코드를 보면 이전 코드를 보는 것보다 가독성이나 코드 이해도가 훨씬 올라갈 것 같다.
- 과거에는 페이지 단위로 작업을 했다면, 이제는 component 단위로 작업이 되었다. component들은 함수형 컴포넌트들이고, 페이지 단위로 작업됐을 때보다 훨씬 재사용성이 높아졌다.
- react 버전이 올라가면서 reach hooks를 사용할 수 있게 됐다. 컴포넌트 단위로 구조를 짜고, 그 함수형 컴포넌트에서 hook을 사용하고 있다. 많은 기능을 쓰진 않고, useState/useEffect/useCallback 정도를 쓴다.
- 다노는 기본적으로 의사결정을 내릴 때 데이터에 근거한 의사결정을 내리기 위해 노력하고 있다. 그래서 프론트 코드에서 마케팅스크립트/gtm/ga이벤트 등을 심어야하는 경우가 많은데, 리팩토링 이전에는 비지니스로직와 마케팅/데이터 관련 코드 상에 뒤섞여있었다면(그래서 수정하면 매번 배포를 다시 해야했다), 이제는 마케팅 관련된 것은 따로 파일을 분리하고 대부분의 데이터 관련해서는 gtm을 활용하고 있다.
내 기여도가 적은 프로젝트였지만 그래도 한 가지 배운 것은 전체 코드를 리팩토링 하려고 하는 것은 테스트를 반드시 철저히 해야한다는 것이다. 이 코드가 1년 동안 배포가 되지 못했던 이유는 테스트를 충분히 하지 못해서였는데, 새로 전체 사이트의 코드를 짜면 테스트할 것이 많기 때문에 꼬옥 부분부분적으로 리팩토링을 해나가는 것이 좋을 것 같다. 나름 테스트를 거친 것임에도 불구하고 지금도 리팩토링 후에 발견되는 이슈들을 수정하고 있다.
팀 OKR 수립
다노는 KPI가 아닌 OKR을 사용한다.
개인적으로 OKR에 대한 설명은 이 브런치가 표로도 정리되어 있어서 좋았다.
(👉 https://brunch.co.kr/@workplays/9)
목표라는 것을 설정한다는 것은 동일하지만, 이것을 달성하느냐가 평가나 보상으로 직접적으로 연계되지 않는다는 점이 가장 큰 차이점 인 것 같다. 평가와 연결되지 않기 때문에 좀 더 공격적인 목표를 세울 수도 있고, 내 스스로 정한다는 점에서 탑다운 방식의 KPI와는 다르다고 생각한다.
개인의 OKR을 정할 때는 팀에서 정한 목표(key result)와 연계해서 세웠다. 팀의 objective는 서비스 안정성 70% 개선하는 것이고, 이를 이루기 위한 방안(key result)들을 세웠다. 이 key result 들중 하나가 프로덕션 이슈가 인입되는 것을 70% 개선한다는 것이 있는데, 이것이 내 OKR의 O(objective)로 정했다. 예를 들면 지금까지는 같은 기간 동안 100개의 Jira 이슈가 들어왔다면, 하반기 동안에는 70개만 들어오도록 개선하기 위해서 하반기에 내가 무엇을 할 것인지 고민해야한다는 것이다. 내가 개발팀원으로서 세운 key result는 “테스트 기간(수정포함)은 개발기간의 최소 30%를 잡도록 한다.”이다. 만약에 한 기능 개발에 들어갈 때 due를 잡게 될텐데 개발하는데 5일이 걸린다면, 그 테스트기간은 1.5일로 계산해서 배포를 하기까지 총 6.5일(5일+1.5일)이 걸릴 것으로 생각하고 듀를 잡고 개발하는 것이다. 사실 지금까지 다노는 개발자 차원에서 테스트를 진행해왔고, 모든 경우에 TDD를 실천한다든지 전문적인 QA가 진행되고 있는 상황은 아니었다. 테스트 기간을 잡는 것만으로도 이슈인입이 개선되지 않을까 생각해서 설정한 개인 OKR이다!
GTM에서 페이스북 픽셀로 이벤트 보내기
GA라는 단어는 듣기는 했지만 GTM(google tag manager)의 존재는 다노에 와서 처음 알았다(이렇게 배워나가는거지!). 변수와 트리거를 만들고, 트리거 요건이 충족되면 태그라는 것을 실행하는 방식으로, 자바스크립트로 할 수 있는 거의 대부분을 처리할 수 있다. 구글은 역시 위대하다!
마케팅이나 데이터는 중요하다는 것에는 100% 동의하지만, 개인적으로 코드에 마케팅이나 데이터 트래킹을 위한 스크립트를 작성하려면 코드가 상당히 지저분해지는 느낌이 들었다. 그러한 것들을 GTM을 이용하면 코드도 깔끔하게 관리하고, 필요한 마케팅 관련 스크립트, 데이터트래킹을 위한 요소들을 심을 수 있어서 좋은 것 같다. 구글은 역시 위대하다! 👍
다노샵에 최근에 새로 생긴 기능 중에 하나가 상품이 품절일 경우 재입고알림신청 버튼이 노출되는 기능이 있다. 마케팅팀에서 트래킹을 원하는 특정 상품이 있었고 그 상품 상세 페이지에서 재입고알림신청 버튼을 눌렀다는 이벤트와 신청을 완료했다는 이벤트(총 2개의 이벤트)를 페이스북 픽셀에 customized event를 보내도록 설정해봤다.
스크롤 기억하기
상품 목록 페이지에서 상품을 클릭해서 상세페이지에 들어갔다가 뒤로가기를 했을 때 이전의 스크롤 위치에 있어야 이어서 쇼핑하기가 편할 것이다. 아직 다노샵에는 그런 기능을 넣지 않은터라 유저분들이 쇼핑할 때 많이 불편할 것 같아서 프로덕트 유닛에서 진행하는 사항은 아니지만 개인적으로 기능을 만들어서 코드리뷰하고 있는 중인데, 회사에서 생기는 기능개발이나 버그들이 우선순위가 높기 때문에 코드리뷰를 아직 반영못했다 (흑 ㅠㅁㅠ)
입사 3주년을 축하해요! (다노버서리)
다노에 입사한지 3주년을 맞이하는 크루(직원을 크루라고 부른다)분들에게는 깜짝 선물로 3이라는 커다란 풍선을 책상에 놓는다. 3주년을 돌아보고, 축하도 받는 시간이니 개인에게는 의미있는 시간이 아닐까!?
개발팀에도 3주년을 맞이한 두 분이 계신다. 크리스챤인데 별명은 붓다인 글로벌마이다노 풀스택 BJ님, 그리고 다노의 심장이라는 별명을 가지고 계신 마이다노 서버개발자 DH님! 내가 빨리 성장해서 이 분들과 같이 일할 수 있는 기회가 더 많아졌으면 좋겠다. 다노에 오지 않았다면 만나지 못했을 좋은 분들 🥰
알게 된 것들
- redux-saga를 쪼오오오오금 알 것 같다. redux는 동기적으로 처리되다보니 비동기로 처리해야하는 api 콜같은 것들을 효율적으로 처리하기 위해서는 미들웨어가 필요하고, action => redux-saga => reducer를 거쳐서 새로운 state가 나온다는 과정을 이해하게 된 것 같다. 지금 다노샵의 코드에 있는 redux-saga 코드를 보고 디버깅할 수 있는 정도는 된 것 같다.
- 다노샵 리팩토링 코드에 살짝 숟가락을 얹으면서 react hooks를 실제로 써본 것은 처음이다. useState, useEffect, useRef, useCallback 정도는 문서보고 따라할 수 있는 정도는 된 것 같은데 아직 내가 원하는대로 완벽하게 활용할 수 있는 수준은 안되서 계속 써보면서 배워나가야할 것 같다.
- 코드스테이츠에서 같이 공부하던 동기들을 만나서 이야기를 들어보니, 다노에 좋은 동료 개발자분들이 많은 것이구나!라는 것을 다시 한 번 느꼈다. 프론트엔드는 정말 아주아주 사소한 코드변경(이미지 주소를 바꿨다든지 typo하나를 수정했다든지)이 아닌 이상은 현재 100%(에 가깝게) 코드리뷰를 하고 있다. 설계리뷰를 하는 것도 최근에 시작했고..! 좋은 개발문화를 갖기 위해 노력하는 다노라는 점을 느꼈다 :)
한달 전에 비해 진전 없는 것들
Python, Server side rendering, 컴퓨터공학 지식, nginx(새로 추가됨!)
