Kakao FE(Front end) meetup

nibble·2019년 11월 13일
1

컨퍼런스

목록 보기
1/2

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: 클라이언트의 에러도 기록해주는 에러 트래킹 툴

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

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

후기

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

profile
안녕하세요. 개발공부를 하고있는 nibble입니다.

2개의 댓글

comment-user-thumbnail
2019년 11월 14일

프렌즈 타임 잘만들었다 생각했는데 ㅋㅋ
공유 감사합니다   😀

1개의 답글