AWS KRUG 프론트엔드 소모임(2022-12-07)에서 진행한 '프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서' 세션의 발표 자료입니다.
프로그래머스에서 프론트엔드 애플리케이션을 개발하면서 경험했던 불편한 점을 개선하기 위해 새로운 프론트엔드 아키텍처를 설계하면서 경험하고 고민했던 이야기를 들려드립니다.
Webpack Manifest, Webpack 5 Module Federation을 활용하여 기존 코드베이스를 벗어나 프론트엔드 애플리케이션을 독립적으로 개발/빌드/배포할 수 있는 구조를 만들었습니다.
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxEunsu Kim
Chrome DevTools를 활용하여 Javascript 메모리 누수(Memory leak)를 디버깅하는 방법을 소개합니다.
Chrome DevTools에서 제공하는 Task Manager, Performance Profile, Memory Heap Snapshot, Memory Allocation Timline 기능을 사용하는 방법을 소개하고, 메모리릭을 진단하고 해결하는 몇 가지 경험적 노하우를 소개합니다.
위 슬라이드는 Grepp의 사내 세미나 불금개에서 활용하는 발표 자료입니다. CCL 라이센스를 따릅니다. 사용시 필수로 저작자를 명시하고, 영리적 사용을 금하며, 내용 변경이 불가합니다.
AWS KRUG 프론트엔드 소모임(2022-12-07)에서 진행한 '프로그래머스 프론트엔드 아키텍처 변천사: 좋은 개발 경험을 찾아서' 세션의 발표 자료입니다.
프로그래머스에서 프론트엔드 애플리케이션을 개발하면서 경험했던 불편한 점을 개선하기 위해 새로운 프론트엔드 아키텍처를 설계하면서 경험하고 고민했던 이야기를 들려드립니다.
Webpack Manifest, Webpack 5 Module Federation을 활용하여 기존 코드베이스를 벗어나 프론트엔드 애플리케이션을 독립적으로 개발/빌드/배포할 수 있는 구조를 만들었습니다.
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)LanarkSeung
프로덕션 환경에서 클라이언트 사이드 렌더링을 고집하기란 힘든 일입니다. 서버를 통해 웹사이트를 제공하면서도 React의 편리함을 누리려면 서버 사이드 렌더링(SSR)을 구현해야 하는데요. Create-React-App을 그대로 유지하면서 SSR을 구현하는 과정을 보여드리고자 합니다. TypeScript로도 가능합니다!
Chrome DevTools로 JS 메모리릭 디버깅하기.pptxEunsu Kim
Chrome DevTools를 활용하여 Javascript 메모리 누수(Memory leak)를 디버깅하는 방법을 소개합니다.
Chrome DevTools에서 제공하는 Task Manager, Performance Profile, Memory Heap Snapshot, Memory Allocation Timline 기능을 사용하는 방법을 소개하고, 메모리릭을 진단하고 해결하는 몇 가지 경험적 노하우를 소개합니다.
위 슬라이드는 Grepp의 사내 세미나 불금개에서 활용하는 발표 자료입니다. CCL 라이센스를 따릅니다. 사용시 필수로 저작자를 명시하고, 영리적 사용을 금하며, 내용 변경이 불가합니다.
커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
■ 일시 및 장소
2023년 6월 22일 목요일 19:00 ~
■ 아젠다
트위터의 추천 시스템 파헤치기
2023년 4월 5일 오픈소스로 공개된 트위터의 추천 시스템에 대해서 살펴봅니다.
트위터의 개인화/랭킹 후보군을 만들어내는 추천 알고리즘부터, 이를 지탱하는 파이프라인까지 모두 소개합니다.
■ 발표자
카카오스타일 데이터사이언티스트 이명휘
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
How to Write the Fastest JSON Parser/Writer in the WorldMilo Yip
How RapidJSON is developed in order to achieve highest performance among 20 C/C++ JSON libraries. Benchmarks, some C++ design, algorithm and low-level optimizations are covered.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
커지고 있는 웹 애플리케이션에서 성능은 점점 더 중요한 요소가 되고 있습니다. 사용자와의 접점에서 긴밀한 상호작용을 요구하는 프런트엔드, 보다 빠르게 로딩되고 부드럽게 구동되어야 하는 웹 애플리케이션을 만들기 위해 노력하는 분들과 함께 이야기를 나눕니다.
목차
1. 로딩 최적화 방법
2. PWA 케이스 소개
3. 렌더링 최적화 방법
대상
- 프런트엔드 성능 개선을 시작하고 싶은 개발자
- 느린 웹 페이지를 빠르게 만드는 데 관심 있는 프런트엔드 개발자
- 로딩/렌더링 최적화에 대한 힌트를 얻고 싶은 개발자
■ 일시 및 장소
2023년 6월 22일 목요일 19:00 ~
■ 아젠다
트위터의 추천 시스템 파헤치기
2023년 4월 5일 오픈소스로 공개된 트위터의 추천 시스템에 대해서 살펴봅니다.
트위터의 개인화/랭킹 후보군을 만들어내는 추천 알고리즘부터, 이를 지탱하는 파이프라인까지 모두 소개합니다.
■ 발표자
카카오스타일 데이터사이언티스트 이명휘
안드로이드 웹뷰의 모든것
이형욱
NAVER / Whale Core
웨일 브라우저 TL로 웨일 브라우저 개발 및 관련 기술을 연구하고 있습니다. 웹엔진 (WebKit, Blink) 오픈소스 활동을 하고 있으며, 현재 브라우저 렌더링 성능 및 메모리 최적화에 관심이 있습니다.
How to Write the Fastest JSON Parser/Writer in the WorldMilo Yip
How RapidJSON is developed in order to achieve highest performance among 20 C/C++ JSON libraries. Benchmarks, some C++ design, algorithm and low-level optimizations are covered.
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
The deck includes a set of techniques and knowledge that can be used when you try to optimize the performance HTML5 app, mobile Web site, JavaScript application running on top of a browser or WebView
85. Angular2 React Vue
구조 프레임워크 라이브러리 라이브러리
언어 TypeScript JSX ES6
Virual DOM X O O
서버사이드렌더링 O O O
장점
구조화가 잘 돼있어 유지보수에 용이
구글의 지원
다양한 이벤트 핸들링에 용이
페이스북의 지원
다양한 플랫폼 개발 가능
낮은 진입장벽
Angular2, React의 장점 적용
단점 높은 러닝커브
Redux, Thunk등 많은 필수 라이브러리
렌더링, 로직이 한곳이엤는 JSX
신규 프레임웍이기 때문에
상대적으로 레퍼런스가 적음
적합한환경 엔터프라이즈 어플리케이션 많은 이벤트가 있는 웹앱(SNS)
빠른 개발속도가 필요하고
많은 교육이 어려울 때