Kakao FE(Front end) meetup, 1st 후기

May 05, 2020

Kakao FE meetup 에 다녀오고 글을 정리해둔지는 꽤 되었는데 이제서야 포스팅을 하게 되었다. 그 때 얻었던 인사이트를 지금까지 적용해본게 있는지 되돌아 보고자 재정리 + 포스팅을 하기로 결심했다.

얼른 생활적 거리두기도 끝나고 모든게 괜찮아져서 세미나를 다시 갈 수 있는 날이 오길. 글로 보는 것과 세미나에서 직접 듣고 질의응답에 참여하는건 정말 다른 것 같다. (글만으로도 충분하지만)

프렌즈타임 웹앱 삽질기 / 카카오게임즈 mark.song(송명현님)

소개

남녀노소 누구나 살면서 한번은 해봤을 놀이 ‘가위바위보’, 전국민이 실시간 대결을 펼친다! 는 간단한 아이디어로 시작된 서비스 ‘프렌즈타임’. 카카오톡 안의 웹앱으로 ‘프렌즈타임’을 개발하면서 경험한 크고 작은 이야기들을 공유합니다.

내용

프렌즈타임이란 게임은 정해진 시간에 실시간으로 모여서 우승자가 결정 될 때 까지 가위바위보를 진행하여 우승자는 상금을 얻는다.

프렌즈타임 처음

Native App? OR 웹앱? 을 고민하던 중 아래와 같은 고민사항들로 인해 웹앱으로 가게 되었다고 합니다.
- 카카오톡 게임별 탭 담당 ( IOS / AOS ) 만 있었음
- 카카오톡 Native app 업데이트 주기는 약 한달의 한번이지만 프렌즈타임 서비스는 매주 진행되어야 함
게임별 브라우저
- 스낵게임을 위해 만들어진 웹 브라우저, 카카오톡을 통해서만 실행시킬 수 있음
- 특정 인터페이스를 통해 디바이스 API 사용가능
- 카카오톡만 깔려있으면 ok
웹앱으로 가기
- 전문 웹 개발자가 없던 팀 내 상황
- Vue.js -> 매력적인 낮은 러닝커브라는 장점
웹앱의 trade-off
- 장점
  - 별도 설치 X
  - 한벌의 코드로 IOS / AOS 모두 지원 가능
- 단점
  - 네트워크 환경에 의존적임
  - 네이티브 앱에 비해 떨어지는 퍼포먼스
SPA
- 사용자 경험
  - 단일 화면으로 구성되어 뷰 사이를 자연스럽게 이동
  - 한순간에 트래픽이 많이 몰려도 비교적 부하가 적다 ( MPA 구조는 안됨 )
  - 초기에 받아오는 정적자원의 최적화가 필요
Webpack ( Bundler )
- 초기에 받아오는 정적자원의 최적화 : Code Splitting, Lazy Loading
- Minify, Tree Shaking
Dynamic import
- component: () => import(link).then( n => n.default)
Webpack 번들 분석
- webpack-bundle-analyzer
  - moment (timezone을 위해 사용했는데 너무 많아서 결국 삭제)
웹앱에서의 이미지 처리
- 전체 asset에서 가장 많은 부분을 차지하는 이미지
- 일반적인 코드와 비교하여 훨씬 큰 용량
- 시작시 꼭 필요한 이미지가 아니라면 일반적으로 비동기로 불러온다.
  - 필요할 때 이미지를 불러오는 Lazy Loading
  - 즉시 보이지 않아도 되는 이미지가 대상
  - 보통 Placeholder / indicator 를 통해 시간을 보여줌
- 다음화면에 필요한 이미지들을 Preload 한다.
Image Preload
자연스러운 애니메이션 처리
- AS-IS
  - 긴 스프라이트 시트를 이용한 애니메이션
  - 다른 이미지보다 용량이 크다
  - 어디까지나 비동기, 100퍼센트 보장 안됨
- TO-BE
  - 만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자
  - (애니메이션의 첫 프레임을 보여줌)
  - AnimationLoader <-> ImageLoader ( Promise , resolve (완료 시)
- 웹 환경에서 어쩔 수 없는 부분, UX 를 챙기기
좋은 tool 추천
- ESLint -> airbnb 베이스의 일부 커스터마이징 된 툴을 사용 중
- git pre-commit 훅을 이용해 룰을 통과하지 못하면 커밋을 하지 못하도록 강제
- Sentry
  - 클라이언트의 에러도 기록해주는 에러 트래킹 툴
그 외
- GA 로 사용자패턴 분석해보기
- etc.
그래도 웹앱?
- 서비스가 커질수록 중요해지는 최적화 이슈
- 얼마나 잘 비동기로 처리하느냐 문제
- 퍼포먼스보다는 웹앱에서 대응하기 힘든 문제를 먼저 고려
  - 앱스토어 사용 불가 (검색, 노출 문제)
  - Device API 사용 문제

카카오커머스를 지탱하는 Angular / 카카오커머스 johnny.m(김민형님)

카카오커머스를 지탱하는 Angular

소개

3년간 카카오커머스에서 Angular v2부터 사용하며 겪었던 경험들을 토대로 프레임웍의 특징과 장단점, 그리고 서비스를 안정적으로 운영하기 위한 Best Practice들을 살펴 보고자 합니다.

내용

카카오 커머스는 왜 Angular 를 사용하고 있나
Angular 를 어떻게 사용하고 있는지

카카오 커머스는 왜 Angular 를 사용하고 있나

카카오 커머스는 관리자 ( 판매자, 계정, 검수 ) / 모바일 웹을 React, Vanila -> Angular 로 전환하고 있음
전환할 때, 한번에 전환하는 것이 아닌 점진적으로 전환 (프록시를 통해서 이전 프로젝트/ 신규 프로젝트를 분기별로 호출 함)
복잡한 폼 쉽게 개발하기
- 3개의 class 를 제공한다. FormGroup / FormArray / FormControl
- directive 를 통해 dom element 와 연결시킬 수 있어서 단방향으로 값을 변경하고 변경 받을 수 있다.
- form 은 value 외에 여러가지 상태를 제공한다.
- Validators (유효성 검사 함수)
  - 인스턴스의 값이 변할 때마다 함수를 실행한다.
  - null을 반환하면 통과 / 에러 이유를 같이 return 하면 에러, return 된 값은 에러의 메세지가 됨
- 오류 템플릿, 복잡한 유효성 검사 필요 없어짐
위의 내용 정리 : 복잡한 폼 쉽게 개발하기
- 단순한 클래스들을 조립해 사용
- 중복되는 폼 분리 가능
- 최대한 서버 응답 오류 활용 (어차피 보안 이슈로 필요한 부분)
- 대부분의 페이지에서 오류 템플릿은 작성할 필요 없음
- 입력 중 피드백이 필요한 부분만 별도 API 협의해 사용
모든것이 퍼스트파티
- 코드의 파편화가 없다.
  - 퍼스트 파티 패키지만으로 서비스 개발 가능
  - 개발 패턴이 비슷해서 어렵지않다
- 프레임웍 자체의 업데이트, 의존성 관리가 편하다
  - 모두 ng update 한방에 안전하게 업데이트
  - update.angular.io 에서 새 기능. Breaking changes 를 한눈에 볼 수 있다.
개발이 편리하다
- 자동 change detection
  - 컴포넌트의 프로퍼티 변경을 자동으로 dom에 업데이트
    - zone.js -> onkeyFetching 을 해줌
  - 간단히 성능 최적화 가능
    - 라우팅 단위로 번들링
    - 동적으로 Lazy Loading 을 해주고 Prefetching (when Idle) -> 퍼스트파티로만 가능
- 간편한 서비스 최적화
  - code splitting, lazy loading 등 공식 가이드만 사용하면 잘 됨
- http interceptor (공통 오류 간편 처리)
- rxjs 로 비동기 이벤트를 간편하게 할 수 있음
강력한 CLI 도구
- 파일 생성 및 생성된 클래스 import 문 추가, 기존 코드에 자연스럽게 추가
- 필요하면 의존 패키지 추가까지 자동으로 해줌 (PWA 환경 등)
- @angular/schematics 사용하면 우리도 만들 수 있음
  - 반복되는 비즈니스 로직이 작성 되어있는 컴포넌트 만들기
  - Angular 모듈 트리를 읽어서 실제로 쓰는 컴포넌트의 프로퍼티 변경
  - 기타 등등..
Http Interceptor
- 앱 내 XHR의 요청 전, 응답 직후 시점에 처리 가능
- 서버에서 공통적으로 특정 헤더 원할 때
- 캐시 때문에 query로 타임스탬프 추가해야 할 때
- 서비스 개발 전 공통 오류 코드를 정의하고 여기서 라우팅 및 추가 동작 구현
  - axiom interceptor
  - 403 -> 로그인 페이지
  - 500 -> 일시적인 오류 페이지
rxjs 로 이벤트 처리도 쉽게
- rxjs/operator 를 사용하면 자유롭게 쓸 수 있음
프레임웍의 주요 업데이트
- V9 : Soon
- V8 : Differential Loading
  - Ivy Renderer

V8 -> Differential Loading - Angular CLI 가 브라우저리스트 파일을 읽어서 앱의 지원 범위 파악 - tsconfig.json 의 컴파일 타겟은 ES2015 - 번들 사이즈가 7 ~ 20 % 감소

카카오 커머스는 어떻게 일하고 있는지
- 별도의 패키지로 만들어 관리 (중복되는 코드)
- 패키지는 코드리뷰와 테스트 거쳐서 사내 private npm에 등록해서 npm install 명령으로 install 해서 사용함
- nodejs 로 push, PR 등 알림 어플리케이션 만들어 사용
Angular를 사용할 때 이점 정리
- 개발할때 신경쓸 것이 적다 (+간편한 최적화)
- 폼 컴포넌트 개발 할 때 정말 편리
- 퍼스트파티 패키지라 안정성이 좋고 업데이트도 부담없음
- 모든 프로젝트를 Angular 기반으로 개발할 예정

바닥부터 시작하는 Vue 테스트와 리팩토링 / 카카오 lumi.kim(김아름님)

바닥부터 시작하는 Vue 테스트와 리팩토링

소개

테스트 코드가 한 줄도 없던 Vue 프로젝트의 코드를 리팩토링하기 위해 테스트 코드를 작성한 경험을 공유합니다. 어떻게 시작하게 되었는지부터 과정을 통해 깨달은 것들을 소개하고 생각을 나누어보고자 합니다.

내용

Vue 컴포넌트 테스트 작성방법
테스트를 작성하면서 했던 생각들
FE 파트 안에서 관련 주제로 나눈 대화
Kakao for Business : 카카오 비즈니스 사용자를 위한 통합 비즈니스 플랫폼
Nuxt 기반의 Vue 컴포넌트로 개발된 프로젝트
기존에 구현되어 있었던 덩치가 큰 코드들
- 기존 구조를 유지하면서 기능 추가를 하다보니 수정하는 비용이 추가됨
- 더 수정되기 전에 리팩토링 하고싶다.
- QA를 거치고 운영되는 코드는 귀한 코드이기 때문에 테스트코드 없이 리팩토링 어떻게 보장할것인지? 테스트 코드와 함께 리팩토링 하는게 좋을 것
- 기능 추가와 함께 리팩토링 하지 말 것
운영중인 코드를 리팩토링 할 때
- 테스트코드가 안정성을 도와주고, 가시적으로 볼 수 있어서 좋음
- 운영업무 외의 도전 과제 ( 프로젝트 코드를 대상, 컴포넌트 테스트 학습과 적용 )
환경구성
pages 테스트 당할 파일 / mock 가짜 데이터 / specs 테스트 코드 작성 파일
ava, Simon, @vue/test-utils를 사용함
테스트 코드 작성
시나리오 : 페이지 진입 시 (페이지 컴포넌트 생성) -> 아이디 정보가 없으면, 에러 모달을 보여준다.
given / when / then
- given
- given
  - mount 되기 전 로직 테스트
  - stub -> created, mount 두 번 테스트를 하기 위해 stub 를 사용함 ( test double )
- 컴포넌트 생성 조건 옵션 유틸 추가
테스트더블을 붙이는 시기에 따라, restore () 여부가 달랐음
리팩토링 + 테스트 전략
VUe data 테스트
- 테스트 해야 할 뷰 data 종류