안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. 최근 웹 바이탈이 대두되면서 LINE 증권 프런트 엔드에서도 성능 개선에 힘쓰기 시작했습니다. 약 2주 정도 개선 작업을 진행한 뒤 개발 환경에서 계측한 결과, Lighthouse 성능 점수가 기존보다 30점가량 상승했습니다. 성능을 개선하기 위해 다양한 방안을 실시했는데요. 이번 글에서는 그중에서도 흥미로웠던 사례로 requestIdleCallback을 활용해서 레이지 로딩(lazy loading) 가능한 컴포넌트의 로딩을 지연시켜 초기 렌더링 시간을 약 14% 단축할 수 있었던 이야기를 공유하겠습니다. 작업 환경 LINE 증권의 프런트 엔드는 TypeScript와 React로 구성했고 JavaScript 번들은 webpack으로 생성합니다. 이번 글의 내용은 React와 webpack과 관련이 깊습니다. 글
안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. LINE 증권에서는 React를 사용하고 있습니다(참고(일본어)). React의 16.8 버전에서 도입된 훅(hook) 기능은 매우 혁신적인데요. 특히 커스텀 훅이라는 개념 덕분에 React에서 컴포넌트를 설계하는 방식이 크게 변화했습니다. 저희 팀에서도 훅의 시대에 컴포넌트를 설계하면서 시행착오를 겪고 있는데요. 이번 글에서는 그중에서도 최근에 저희가 열중하고 있는 '커스텀 훅으로 컴포넌트 제공하기', 'render hooks'라고 할 수 있는 설계 패턴을 소개하겠습니다. 문제 정의 '몇 가지 체크박스가 있고, 전부 체크하면 다음으로 넘어간다'는 전형적인 패턴을 예로 들어 설명하겠습니다. 아래 이미지와 같이 3개의 체크박스와 '다음' 버튼이 나열되어 있다고 생각해 봅시다. 현재 2개의 체크박스만 체크
sunderls is a front-end engineer
안녕하세요! sunderls입니다. 저는 2년 전에 페이지 스택을 주제로 'LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기'라는 글을 썼고, 현재 LINE 증권에서도 같은 방식으로 프로젝트를 진행하고 있습니다. 그래서 이번 글에서는 페이지 스택이 어떻게 진화했는지, 어떤 과제를 안고 있는지 함께 알아보겠습니다. 개선된 점 먼저 개선된 사항에 대해 공유드리겠습니다. 헤더 parallax 전환 페이지 스택은 네이티브(native) 앱과 같이 페이지 전환을 해도 DOM(Document Object Model)을 삭제하지 않고 순서대로 쌓아 놓는 구조입니다. DOM을 삭제하지 않기 때문에 이전 페이지로 돌아갈 때 순식간에 넘어가므로 깜빡거리는 문제가 해소됩니다. 아래는 예시입니다. 위 예시를 잘 살펴보면 헤더 부분이 네이티브 앱과 조금 다른데요. 네이티브 앱은&
