Blog - LINE ENGINEERING

sunderls

sunderls is a front-end engineer

개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기
sunderls2020-07-29
sunderls is a front-end engineer
안녕하세요! sunderls입니다. 저는 2년 전에 페이지 스택을 주제로 'LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기'라는 글을 썼고, 현재 LINE 증권에서도 같은 방식으로 프로젝트를 진행하고 있습니다. 그래서 이번 글에서는 페이지 스택이 어떻게 진화했는지, 어떤 과제를 안고 있는지 함께 알아보겠습니다. 개선된 점 먼저 개선된 사항에 대해 공유드리겠습니다. 헤더 parallax 전환 페이지 스택은 네이티브(native) 앱과 같이 페이지 전환을 해도 DOM(Document Object Model)을 삭제하지 않고 순서대로 쌓아 놓는 구조입니다. DOM을 삭제하지 않기 때문에 이전 페이지로 돌아갈 때 순식간에 넘어가므로 깜빡거리는 문제가 해소됩니다. 아래는 예시입니다. 위 예시를 잘 살펴보면 헤더 부분이 네이티브 앱과 조금 다른데요. 네이티브 앱은&
LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기
sunderls2018-02-08
sunderls is a front-end engineer
안녕하세요, 저는 LINE MANGA 개발을 담당하고 있는 자바 스크립트 개발자, @sunderls입니다.여러분, 혹시 LINE 앱에서 만화를 보실 수 있는 것*, 알고 계셨나요? 금시초문이라면, '더 보기' 버튼을 눌러 LINE MANGA 메뉴를 통해 멋진 만화들을 만끽해 보세요.아래의 그림은 LINE MANGA 서비스의 화면 중 일부입니다. 페이지 전환이 참 매끄럽지 않나요? 여러분께 살짝 귀띔을 해드리자면, LINE MANGA 서비스는 웹 기반으로 개발했습니다. 저희가 보기에는 페이지 전환이 네이티브 앱 못지 않다고 생각하는데, 여러분은 어떻게 생각하세요? 이번 글을 통해서 우리가 이런 결과물을 얻기 위해 어떤 노력을 했는지 여러분께 간단히 소개해 드리고자 합니다.웹을 기반으로 구현하면 발생하는 문제웹앱이나 웹페이지를 구현할 때 흔히 React나 Vue를 사용합니다. React나 Vue를 이용해서 페이지 전환을 구현한다면, 바로 Router를 사용하면 되겠다는 생각이 떠오르실
- LINE MANGA
Code splitting을 쉽게 하기 위해 만든 grow-loader
sunderls2018-02-08
sunderls is a front-end engineer
안녕하세요, 저는 LINE MANGA팀의 자바 스크립트 개발자, @sunderls입니다. 일본에서는 LINE으로 만화를 볼 수 있다는 것, 알고 계셨나요? 혹시 여러분은 LINE MANGA1) 서비스를 이용해 보셨나요? 예전에 블로그를 통해서도 나누었듯이(LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기), LINE MANGA는 웹 기반으로 구현되어 있습니다. 이 서비스는 LINE 앱 안에서 구동되는 서비스이기 때문에, LINE 앱을 이용할 때와 마찬가지로 편안하고 매끄러운 UX를 제공하고자 저희는 많은 노력을 쏟았습니다. 우리는 우리의 목표를 달성하고자 code-splitting을 도입하였는데, 이 글을 통해 code-splitting을 손쉽게 적용할 수 있도록 개발한, LINE의 오픈 소스 프로젝트인 grow-loader를 여러분께 소개하고자 합니다. 코드를 분리하려고 했던 이유 우리 서비스의 자바 스크립트 코드는 단 하나의 번들로 빌드됩니다. 서비스 규모

1