Front-End

사내 클라이언트 개발자 행사, LINE Client Day 2021 후기

안녕하세요. LINE 클라이언트 개발자 신윤권, 김윤재입니다. 저희는 지난 10월 27일과 28일, 양일간 LINE Platform Engineering 1 센터에서 사내 기술 공유 행사로 개최한 ‘LINE Client Day 2021’를 진행했습니다. 먼저 행사에서 다양한 주제를 공유해 주신 발표자분들과 행사에 참여해 주신 분들께 다시 한 번 진심으로 감사드립니다. 이번 글에선 LINE Client Day 2021 행사에서 발표됐던 주제와 참가자들의 소감, 그리고 사내 행사를 진행하면서 저희가 느꼈던 점을 공유하겠습니다.

LINE Web Timeline 이미지 얼굴 인식 기능 적용

안녕하세요. 저희는 LINE UIT 조직에서 프런트엔드 업무를 담당하고 있는 김은재, 이상원입니다. 이번 글에서는 저희가 LINE Web Timeline에서 얼굴 인식을 통해 전달받은 좌표를 CSS로 표현하기 위해 고민했던 내용을 공유하려고 합니다.

Swift 타입 시스템 탐험기

안녕하세요. 김유진입니다. 이번 글에서는 Swift의 제네릭스와 프로토콜 타입, opaque result 타입이 어떻게 맞물려 코드 재사용 문제를 풀어 나가고 있는지 살펴보고, 타입 시스템이 앞으로 나아갈 방향을 소개하겠습니다.

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

안녕하세요. 이번 글에서는 ‘좀 더 편한 결제 세상 만들기’라는 주제로 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% 단축할 수 있었던 이야기를 공유하겠습니다.

LINE 메신저 프로필 꾸미기에 CSS Flexbox를 활용한 Flex 레이아웃 적용하기

안녕하세요. LINE 프로필과 스토리를 담당하고 있는 조영준, 박현민입니다. 올해 진행한 여러 프로젝트 중에서 ‘프로필 꾸미기’라는 프로젝트를 여러분들과 공유하고 싶어서 이렇게 글로 전하게 되었습니다. 혹시 비슷한 상황에서 저희와 같은 고민을 하시는 분들에게 이 글이 도움이 되기를 바라며, 즐겁고 재미있게 읽어주시길 바라겠습니다.

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

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

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

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