Kakao FE(Front end) meetup

1. 프렌즈 타임 웹앱 개발 삽질기 - 송명현(카카오 게임즈)

웹앱의 장점

카카오톡 서비스만 깔려있으면 바로 접속 가능
업데이트 주기를 카톡이랑 맞출 필요 x

프런트 엔드 선택 (전문 웹 개발자가 없는 상황)

• 러닝 커브가 낮은 vue.js를 사용

spa 구조

• 사용자 경험

• 자연스럽게 이동하는 것이 중요

• 트래픽이 많이 몰려도 부하 적음

• But 초기에 받아오는 정적 자원의 최적화가 필요

Webpack

• 정적 자원들을 웹팩으로 관리함
• code Splitting, Lazy Loading
• Dynamic import
• webpack-bundle-analyzer 분석 툴을 이용

웹앱에서 이미지 처리

• 비동기 처리
• Lazy Loading
• 화면이 바뀔 때마다 보여야 하는 수많은 이미지들 만약 유저가 몰린다면?
  => preload (전화면에서 다음 화면에 보이는 이미지를 불러옴)

자연스러운 애니메이션 처리

• 20장의 자연스러운 라이언 이미지가 필요한데 10장만 로딩되는 상황

• 비동기이기 때문에 라이언 이미지를 보장하기 힘들다. 만약 이미지가 완전히 로드되지 않았다면 정지된 이미지를 보여주자.

• 애니메이션 로더 -> promise 등으로 해결

• ESLint, git pre-commit 훅을이용해 룰을 통과하지 못하면 커밋 x

• Sentry: 클라이언트의 에러도 기록해주는 에러 트래킹 툴

서비스가 커질수록 중요해지는 최적화 이슈

• 웹앱에서는 저전력 모드를 어떻게 해결하나?
• 페이지 이동 간 처리는?

후기

카카오 콘퍼런스 행사를 우연히 알게 되어 신청을 해보았는데 당첨될 줄 몰랐다..
이렇게 추첨을 통하여 당첨되는 경우는 처음이라 신기했는데 정말 운이 좋았던 것 같다.
총 세명의 개발자 분들이 나와 발표를 진행하셨는데 아직 개발자로 일해본 경험이 적고 공부만 해온 나로서는 첫 번째로 강의를 시작하신 '웹/앱 개발 삽질'의 강의 내용이 제일 유익하였다.