kakao FE(Front end) meetup 후기

in ETC on Lecture


  • 2019년 11월 13일 (수) 오후 07:00 - 오후 09:00 선릉역 Dcamp에서 열린 Kakao의 Front End Meetup에 다녀온 후기입니다.

행사 개요

img

IF Kakao 라는 컨퍼런스는 들어 보았는데 Kakao FE 라는 이름의 행사는 처음 들어본다.

찾아보니 이번에 열리는 밋업이 처음이라고 한다.

행사는 총 3개의 세션 각 35분간 진행되었고 평일 퇴근 이후 진행되는 행사이다보니, 차분하며 필요한 내용만 딱딱 짚어 진행 한 것 같다.

살짝 아쉬운 점은, 행사 특성상 네트워킹이 없다는 점이었고 어떤 방식으로든 퇴근하고 온 사람들을 조금 활력을 돋을 수 있는 장치가 있었으면 좋았을 듯.

카카오 행사 답게 처음에 오자마자 등록을 하면 카카오 프렌즈 생수를 준다.

중국에 샤오미에게 없는 전자제품이 없듯 한국에 카카오에게는 없는 굿즈가 없는듯

모든게 굿즈화 되어있는 것 같다.

그리고 물과 함께 저녁을 못 먹고 온사람들을 위한 샌드위치를 받았는데, 다행인지 모르겠지만 샌드위치는 카카오가 아니었다.

사진으로 회고 해 보니 이런것만 열심히 찍은 것 같다.

사실 발표하는걸 찍는건 느낌이 없으니 이런 거라도 열심히 찍어야지.. KakaoFE는 그렇지 않았지만

경험상 홍보가 잘 되고 흥하는 행사는 사진찍을 거리가 많았었던 것 같다.

그리고 놀랍게도 내가 다니는 회사가 Dcamp 5층에 있고 행사장이 바로 위층에 있어서, 퇴근하고 바로 올라가서 들을 수 있던게 참 좋았다.

사실 평일 행사는 부담스러우니 잘 안 가려고하는데, 이렇게 바로 위에서 하는 행사를 안 가 볼 수가 없어 신청하고 다녀왔다.

세션 발표 시작!

집에 있는 강아지가 아프기도 하고, 다음날 출근해야되는 리스크도 안고 있었기 때문에 차마 3개의 세션을 모두 들을 수는 없었고,

요새는 컨퍼런스, 밋업을 가도 필요한 부분만 알맹이로 쏙쏙 뽑아듣는게 더 유익하고 집중도 잘 되기때문에 나에게 필요하다고 생각하는 세션으로 2가지를 들었다.

다행히도(?) 마지막 세션은 내가 아직 겪어 보지 않은 Vue, Test, 리팩토링 의 삼합이었기 때문에 과감히 제끼기로 했다.

그렇게 듣게 된 2개의 세션은

  1. 프렌즈타임 웹앱 삽질기 - 송명현
  2. 카카오 커머스를 지탱하는 Angular - 김민형

행사 소개 페이지나 행사장 내에서도 연사자에 대한 어떠한 정보도 없었기에 (심지어 사회자분도 잘 모르셨음) 들은대로 썼지만 2번 연사자분은 잘 못 들었다.

혹시 아시는 분은 댓글로 달아주세요!

프렌즈타임 웹앱

이 세션은 역시 남들 삽질이 제일 재미있어 ! 라는 마인드로 듣기 시작했는데 의외로 들을 구석이 많았다.

프렌즈타임은

카카오톡내에서 정해진 시간에 실시간으로 모여 가위바위보를 하여 상금을 얻는 퀴즈쇼이다.

카카오톡에서 바로 웹앱으로 실행가능!(하지만 카톡 인앱 브라우저에서만)

개발 스택 정하기 ; 네이티브 vs 웹앱 승자는?

카카오톡은 한달의 한번 업데이트를 해서 빈도가 적다. → But, 서비스는 매 주 진행되어야 함

따라서 웹앱으로 진행하기로 했다고 함

프레임워크는 뭘로 ?

전문 웹 개발자가 없어서 러닝커브가 낮은 Vue.js를 선택했다고 한다.

근데 사실 러닝커브는 셋이 비슷하고 개인적으로는 React.js가 더 쉬울 수도 있다고 생각했다.

그럼 웹앱의 장단점은 ?

장점: 별도 설치 불필요, 한 벌의 코드로 크로스 플랫폼

단점: 네트웤 환경에 의존되고 퍼포먼스 구림

SPA를 사용하자!

빠르게 화면 전환이 가능해서 UX 유리

한순간에 트래픽이 몰리면 비교적 부하가 적다.

하지만, 초기에 받아오는 정적자원의 용량이 크기 때문에 최적화가 필요 → Lazy loading 활용

Dynamic import 를 사용해서 Promise로 필요한 시점에 컴포넌트 로드

import("./Export.js").then(({ default: consoleFunction, exString }) => {
  consoleFunction(exString);
});

용량 최적화를 위한 WebPack 번들 분석

  • Bundler Analazer 쓰면 이미지로 어떤게 큰 용량을 차지하는지 볼 수 있어서 분석 쉬움

  • Moment.js를 Timezone 때문에 사용했는데 생각보다 용량이 커서 드러냈다.

    • 하지만 day.js라는 좋은 수단이 있지 않은가? 라는 의문이 들어 질문을 했다.
    • (요새 유튜브를 하고 있어서 이런거 하나하나 놓치지 않으려고 찍었다)
    • 질문샘
      • 답: 본인들도 몰랐는데 moment.js가 원래도 필요 없는 라이브러리 라서 대체제를 넣지 않음

웹앱에서 이미지처리는 어떻게?

  • 처음에 로딩할때 18.5mb정도인데 너무 크니까 비동기로 처리하려고 함 → Lazy loading
  • 하지만 여러 문제
    • 화면이 바뀌면?
    • 게다가 사람이 몰린다면!?
    • CDN도 한계가 있지

  • 그래서, 다음 화면에 필요한 이미지를 preload한다! → 비동기로

  • 애니메이션은 스프라이트 시트로 이미지를 연결시켜 애니메이션을 실행
    • 화면의 각 라이언별 20장의 사진 → 라이언이 깜빡거리는 문제 발생(모두가 동시에 로딩되지 않기 때문에)
      • 네트워크 문제였음 → 100% 잘 도착한다고 보장 할 수 없네?
      • 만약에 완전히 로드 되지 않았다면 첫 프레임만 보여주자
    • Animation loader와 imageLoader 두개를 둬서 Image loader 가 Promise로 준비중인 상태를 Animation Loader에게 알려줬음 → Resolve 되면 애니메이션 작동

생산성을 올려주는 도구들

ESLint
  • airbnb base 로 린팅
  • 커밋할때 git hook으로 precommit 하여 팀 컨벤션을 해치지 않도록 commit 안되게 강제
Sentry
  • 유저에게 발생한 에러 트래킹 툴 Sentry
  • 유저가 문의하지 않은 에러까지도 모두 알려준다.
  • 유저의 디바이스 정보까지 모두 상세하게 나오기 때문에 유저에게 따로 정보를 받을 필요가 없다.

세션 후기

나는 중간 중간에 공감되는 웃긴 포인트들이 너무 많았는데(예를 들어, 다 된 줄 알았는데 자꾸 문제 생기는 걸 볼때) 행사장이 엄숙해서 소리내서 웃지는 못했다. 전체적인 레벨은 연사자인 송명현님이 말하셨듯 쉬운 레벨이었다고 생각한다.

조금더 딥하고 전문적인 내용을 다뤄주면 좋겠다고 생각했지만 아마 그랬으면 졸았을 것 같다. 힘들때는 역시 다른사람들 삽질하는 얘기를 들으며 나만 고생하는게 아니구나 하며 힐링하는 게 최고!

비동기처리에 대한 부분을 최근에 Promise와 Async-await를 공부하고 적용하며 내가 몰랐던 부분들이 정말 많았다고 느끼고 있던 차에 들었던 세션이라 그런지 몇몇 부분은 영감을 얻기도 했다.

프렌즈타임 이야기 외에도 Sentry라던지 ESLint는 원래도 알고있었지만, 다시한번 더 잘 사용 할 수 있을 것 같다는 생각이 든 세션이었다.

카카오 커머스 Angular

카카오 커머스는 판매자와 소비자를 이어주는 플랫폼

Angular가 너무 좋아서 react, vanila를 Angular로 전환중

앞의 내용은 Angular가 왜 좋은지에 대한 내용이었는데, 사실 이 부분은 다른 프레임워크의 장점이기도 하고 앞 세션과 비슷한 내용도 있어서 나에게는 크게 와 닿지 않았다.

그 이후 뒤에는 여러가지 공부 해 볼만한 Angular에서 지원하는 기능들에 대한 키워드들을 들었는데 이 부분은 다른 프레임웤에도 있을 기능들이라 흥미있게 들었다.

http interceptor

앱 내 XHR 요청 전, 응답 직후 직전 추가 처리 가능

서버에서 특정 헤더를 원할때, 캐시때문에 타임스탬프 추가해야 할때 등

컴포넌트 레벨에서 에러 처리 고민 할 걱정 덜어준다고 한다.

rxjs로 이벤트 처리 쉽게

RxJS는 이벤트 스트림과 데이터를 쉽게 만들고 다룰 수 있도록 돕는 라이브러리다.

복잡하지만 가독성이 좋은 비동기적 코드를 더 쉽게 작성할 수 있도록 돕기 때문에 한번쯤 더 찾아보면 좋을거라 생각했다.

Differencial Loading

브라우저 사양에 맞게 서비스 제공하게 하여 하위 호환 번들 따로 만들어주는 Angular CLI의 기능이라고 하는데 이따금씩 IE 11 이하의 브라우저에서 안되는 기능들이 있다거나, 여러 브라우저 호환성을 고려해야 할 때 유용 해 보였다.

하지만 이에 따른 노력대비 얻는 점들이 적기 때문에 내가 다니는 회사에서는 B2B2C 서비스이기도 해서 그냥 Chrome을 강제하여 사용하도록 한다. 약간 Apple식(?)(불편하면 너네들이 적응해!) 느낌이긴 하지만, 시대의 흐름이 이런것을 어찌하리..

TL;DL

위 글을 요약할 겸 너무 길어 읽지 못한 분들을 위한 3줄 요약

  1. 카카오 FE에 갔는데 피곤해서 세션 2개만 듣고 왔다.
  2. 각 세션이 FE라면 공감할만한 재미 요소가 있어 평일 퇴근 후 쉬운 수준으로 듣기에 좋았다.
  3. 질문해서 에어팟 케이스 받았는데 난 에없찐이다. 다음부턴 더 유용한걸 달라!

P.S 아 그리고 앞으로 행사도 계속 Dcamp에서 해주세요.. 회사가 5층에 있는데 6층에 가서 세션 듣는게 이렇게 행복할 줄은 몰랐어요.


© 2018. by Hyeonseok Seo

Powered by samslow