- Present
LINE Plus Corp
Frontend Engineer
LandPress Content
- Present
Vite
pnpm
React-Query
- 사내 headless CMS 개발
- Webpack -> Vite 마이그레이션 진행
- CircleCi 적용 및 Cypress Task 분할 작업 진행
- 테스트 시간 16분 -> 5분 단축 성공
- 모노레포 워크스페이스 import 개선
Universal Video Player
-
HTMLVideo
Preact10
Zustand
Turborepo
Storybook
Cypress
Webpack
- 사내 다양한 서비스에서 사용되는 웹 동영상 라이브러리 메인테이닝
- v1: 런타임 -> 컴파일 타임 코드 리팩터링
- 레거시 프로젝트 최신화 작업 주도적 진행
- TypeScript 및 선언적 컴포넌트 적용
- 런타임 이전에 코드 구성을 이해할 수 있도록 개선
- 이벤트 흐름 정리. 컴포넌트 동작의 시각화 및 디버깅 과정 향상
- v2: 배포 안정화 및 DX 향상
- jsx-dom -> Preact 마이그레이션 및 Zustand, Cypress, Jest 도입
- TSDoc 및 Storybook 적용
- IDE 단계에서부터 데모 페이지까지 고려한 문서 작성
- 관련 발표: 개발자를 위한 친절한 UI 컴포넌트 라이브러리 만들기
- v3: 라이브러리 확장성
- Yarn monorepo, Turborepo 적용
- 플러그인 개발이 용이하도록 Repository 전체 아키텍처 변경
- 관련 내용: Turborepo로 모노레포 개발 경험 향상하기
- 플러그인 구조 개발
- 플러그인 템플릿 및 라이프사이클 설계
- 서로 다른 서비스 니즈를 만족시킬 수 있는 유연한 개발 달성
- 성능 향상
- Webpack4 -> Vite 마이그레이션
- 빌드 시간 약 72% 감소
- 모노레포 워크스페이스 import 개선
- Webpack4 -> Vite 마이그레이션
- Yarn monorepo, Turborepo 적용
VOOM Live CMS
-
React18
RTL
React-Query
WebSocket
Chart.js
Jotai
- VOOM Live 방송 CMS 페이지 개발
- 아래 Official Account Live CMS와 동일. 호스트 유저만 다른 서비스
- 서비스 아키텍처 설계 및 일정 산출
- 조금씩 미묘하게 다른 스펙을 위한 컴포넌트 추상화 작업 진행
Official Account Live CMS
-
React18
RTL
React-Query
WebSocket
MSW
Chart.js
Jotai
- LINE Official Account Live 방송 CMS 페이지 개발
- 초기 설계부터 릴리즈까지 진행. 컴포넌트 아키텍처 설계 및 라이브러리 선정
- 라인 패밀리 서비스에서 사용될 수 있도록 확장성있는 컴포넌트 모듈 개발
- MSW 적용. 방송 상태에 따른 다양한 시나리오 테스트 할 수 있도록 개발
- React-Query v4 -> v5 작업 진행
- 방송 페이지 실시간 채팅 WebSocket 개발
- 시각화 페이지 개발. 데이터 가공 최적화 작업 진행
LINE Design System - Calendar
-
React18
Vite
Jotai
- LINE 디자인 시스템이 적용된 React 캘린더 컴포넌트 라이브러리 개발
- 사내 공용 캘린더 라이브러리의 부재로 자발적 개발
- 배포 이후 긍정적인 평가를 받으며 6개 이상의 서비스에서 사용
- 다양한 서비스에서 사용될 수 있도록 높은 추상화를 목표로 개발
- 다국어 및 Timezone 설정 가능
- 모달, 멀티 캘린더, 범위, 시간 등 다양한 옵션 제공
- 웹 접근성 적용
LINE Place
-
Next12
Redux
Redux-Saga
Swiper
- 위치 기반 음식점 추천 및 검색 서비스 개발
- Home, Profile 페이지 개발
- 위치 기반 API Flow 정리 및 개발
- Swiper 버벅임 성능 개선
- Koa 커스텀 서버 개발
- nGrinder 활용, Stress test 진행 후 서버 가용량 산출
- 빌드/배포 개발 환경 세팅
Official Account Profile
-
Next12
- 라인 공식 계정 페이지 개발
- 플러그인 공통화 작업 진행
- 중복 코드 개선
- 일관된 타입 모델 적용
- React -> Next.js 리팩터링 진행
- 커스텀 서버 개발
- 데이터 이관 작업 진행