Front-end

결제 제휴를 통해 보다 편하게 결제할 수 있는 세상 만들기

안녕하세요. 이번 글에서는 ‘좀 더 편한 결제 세상 만들기’라는 주제로 LINE Pay의 크로스 보더(cross border) 결제 기능을 소개하겠습니다. 먼저 LINE Pay가 지향하는 크로스 보더 결제의 모습과 그동안의 결과물을 소개한 뒤, LINE Pay의 크로스 보더 결제 플랫폼에서 중요한 역할을 담당하는 두 가지 시스템과 각 시스템의 구조에 대해서 말씀드리겠습니다. 마지막으로 LINE Pay가 앞으로 강화하고자 하는 LINE Pay의 서비스와 그 이유를 말씀드리면서 글을 마무리하겠습니다. 기술 관련 내용보다는 경험 위주의 내용이니 편하게 읽어 주셨으면 좋겠습니다.

Sentry로 사내 에러 로그 수집 시스템 구축하기

안녕하세요. LINE Plus UIT 팀 복다훈입니다. 이번 글에서는 Sentry 온 프레미스(On-Premise) 구축기를 공유하겠습니다. LINE에서 왜 Sentry를 사용하게 됐는지 먼저 말씀드리고 클라우드 대신 온 프레미스 방식으로 구축하게 된 이유를 설명한 뒤 마지막으로 어떻게 구축했는지 말씀드리겠습니다.

requestIdleCallback으로 초기 렌더링 시간 14% 단축하기

안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. 최근 웹 바이탈이 대두되면서 LINE 증권 프런트 엔드에서도 성능 개선에 힘쓰기 시작했습니다. 약 2주 정도 개선 작업을 진행한 뒤 개발 환경에서 계측한 결과, Lighthouse 성능 점수가 기존보다 30점가량 상승했습니다. 성능을 개선하기 위해 다양한 방안을 실시했는데요. 이번 글에서는 그중에서도 흥미로웠던 사례로 requestIdleCallback을 활용해서 레이지 로딩(lazy loading) 가능한 컴포넌트의 로딩을 지연시켜 초기 렌더링 시간을 약 14% 단축할 수 있었던 이야기를 공유하겠습니다.

React 컴포넌트를 커스텀 훅으로 제공하기

안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. LINE 증권에서는 React를 사용하고 있습니다(참고(일본어)). React의 16.8 버전에서 도입된 훅(hook) 기능은 매우 혁신적인데요. 특히 커스텀 훅이라는 개념 덕분에 React에서 컴포넌트를 설계하는 방식이 크게 변화했습니다. 저희 팀에서도 훅의 시대에 컴포넌트를 설계하면서 시행착오를 겪고 있는데요. 이번 글에서는 그중에서도 최근에 저희가 열중하고 있는 ‘커스텀 훅으로 컴포넌트 제공하기’, ‘render hooks’라고 할 수 있는 설계 패턴을 소개하겠습니다.

개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기

안녕하세요! sunderls입니다. 저는 2년 전에 페이지 스택을 주제로 ‘LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기’라는 글을 썼고, 현재 LINE 증권에서도 같은 방식으로 프로젝트를 진행하고 있습니다. 그래서 이번 글에서는 페이지 스택이 어떻게 진화했는지, 어떤 과제를 안고 있는지 함께 알아보겠습니다.

프론트엔드 개발자의 LINE 입사 후기

안녕하세요! LINE의 UIT(User Interface Technology) 팀에서 프론트엔드 개발을 하는 송헌용입니다. 뒤돌아보니 LINE에 입사한 지 벌써 8개월이나 지났더라고요. 그래서 지난 8개월 동안 제가 LINE에서 어떻게 지냈는지 되돌아보는 시간을 가져보았습니다. 입사 후기 겸 회고록이라고 할까요.

LINE Search UI 개선기

안녕하세요. 저는 LINE UIT 조직에서 프론트엔드 업무를 담당하고 있는 이상원입니다. 이번 글에선 제가 LINE Search 프로젝트를 담당할 때 새로 추가된 UI를 조금 더 개선하기 위해 노력했던 내용을 공유하려고 합니다.

첫 구현 결과물
마지막 구현 결과물

TensorFlow.js: 웹 프론트엔드에서 머신러닝 활용하기

안녕하세요! LINE에서 프런트엔드 개발을 담당하고 있는 Jun입니다. 최근 프런트엔드 분야는 흥미로운 기술이 가득해서 전부 다 파악하는 게 힘들 정도인데요. 개인적으로 가장 관심이 가는 건 머신러닝입니다. 오늘은 웹 프런트엔드에서 머신러닝 활용하기를 주제로, TensorFlow.js를 사용해서 간단하게 머신러닝을 구현해 본 경험을 공유하겠습니다.