Blog - LINE ENGINEERING

TAG ARCHIVES: frontend

LINE 프런트엔드 개발자가 사용하는 프레임워크와 툴
Konosu Kazushi2023-02-24
프런트엔드 엔지니어
안녕하세요. LINE UIT(User Interface Technology) Front-end Dev. 9팀에서 주로 LINE 스키마니(LINEスキマニ)와 LINE Creators Market 프런트엔드 개발을 담당하고 있는 Konosu입니다. UIT 조직에서는 사내 프런트엔드 엔지니어 근황 및 툴 이용 현황을 조사하기 위해 매년 사내 설문 조사인 'UIT Survey'를 실시하고 있습니다. UIT Survey는 2018년에 Ashley Nolan 님이 실시하는 Front-end Tooling Survey를 기반으로 시작해 올해로 5번째 진행하고 있는데요. 이번 글에서는 작년 11월에 진행한 2022년 UIT Survey 결과를 소개하겠습니다. UIT Survey 개요 설문 조사 대상과 조사 기간은 다음과 같습니다. ・ 대상: LINE 프런트엔드 엔지니어(한국, 일본, 베트남, 태국 조직 소속)・ 응답자 수: 123명(약 70%가 일본 거점 엔지니
- frontend
- UIT
- Survey
2022년 웹 개발에서 고려해야 할 환경
Alan Davalos2022-02-15
Front-end Engineer - @AlanGDavalos
TL;DR: 2022년 웹 개발에서 고려해야 할 환경은, 성능 측면에서는 저사양의 Android 기기, 웹 표준 측면에서는 2년 전의 Safari, 네트워크 측면에서는 4G입니다. 웹은 대체적으로 이와 같은 니즈에 적절히 대응하지 못하고 있습니다. 특히 성능 관점에서 JavaScript에 과도하게 의존하는 것과 같은 요소들이 웹 사이트의 성능을 끌어내리고 있습니다. 안녕하세요! LINE에서 프런트엔드 엔지니어로 일하고 있는 Alan Dávalos입니다. 이 글의 제목이 그저 클릭을 유도하려는 미끼라고 생각하실 수 있겠지만, 조금만 더 읽어주시길 바랍니다. 분명 읽을 만했다고 생각하실 겁니다. 2021년과 2022년 사이에 웹에는 몇 가지 큰 변화가 있었는데요. 이 변화가 전반적인 웹 개발 방식에 영향을 미치고 있습니다. 그래서 저는 이번 글에서 다양한 데이터를 분석하며 어떤 변화가 있었는지 알아보고, 웹 개
- frontend
- UIT
- JavaScript
- CSS
requestIdleCallback으로 초기 렌더링 시간 14% 단축하기
LINE Engineering2021-03-12
안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. 최근 웹 바이탈이 대두되면서 LINE 증권 프런트 엔드에서도 성능 개선에 힘쓰기 시작했습니다. 약 2주 정도 개선 작업을 진행한 뒤 개발 환경에서 계측한 결과, Lighthouse 성능 점수가 기존보다 30점가량 상승했습니다. 성능을 개선하기 위해 다양한 방안을 실시했는데요. 이번 글에서는 그중에서도 흥미로웠던 사례로 requestIdleCallback을 활용해서 레이지 로딩(lazy loading) 가능한 컴포넌트의 로딩을 지연시켜 초기 렌더링 시간을 약 14% 단축할 수 있었던 이야기를 공유하겠습니다. 작업 환경 LINE 증권의 프런트 엔드는 TypeScript와 React로 구성했고 JavaScript 번들은 webpack으로 생성합니다. 이번 글의 내용은 React와 webpack과 관련이 깊습니다. 글
TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.
LINE Engineering2020-09-10
안녕하세요. LINE Growth Technology UIT 팀의 Keishima(@pittanko_pta)입니다. 이번 글에서는 TypeScript의 enum을 사용하지 않는 편이 좋은 이유를 Tree-shaking 관점에서 소개하겠습니다. 검증 환경 TypeScript에서 JavaScript로 트랜스파일(transpile)은 https://www.typescriptlang.org/play(TypeScript 3.9.2, 타깃은 ESNext)에서 진행했습니다. Tree-shaking의 동작은 https://rollupjs.org/repl/에 트랜스파일한 JavaScript 코드를 붙여서 검증했습니다. Babel을 사용한 트랜스파일은 https://babeljs.io/repl(Babel 7.10.3)에서 검증했습니다. Tree-shaking은 무엇인가요? Tree-shaking이란 간단하게 말
React 컴포넌트를 커스텀 훅으로 제공하기
LINE Engineering2020-08-18
안녕하세요. LINE 증권의 프런트 엔드를 담당하고 있는 파이낸셜 개발 센터의 Suzuki입니다. LINE 증권에서는 React를 사용하고 있습니다(참고(일본어)). React의 16.8 버전에서 도입된 훅(hook) 기능은 매우 혁신적인데요. 특히 커스텀 훅이라는 개념 덕분에 React에서 컴포넌트를 설계하는 방식이 크게 변화했습니다. 저희 팀에서도 훅의 시대에 컴포넌트를 설계하면서 시행착오를 겪고 있는데요. 이번 글에서는 그중에서도 최근에 저희가 열중하고 있는 '커스텀 훅으로 컴포넌트 제공하기', 'render hooks'라고 할 수 있는 설계 패턴을 소개하겠습니다. 문제 정의 '몇 가지 체크박스가 있고, 전부 체크하면 다음으로 넘어간다'는 전형적인 패턴을 예로 들어 설명하겠습니다. 아래 이미지와 같이 3개의 체크박스와 '다음' 버튼이 나열되어 있다고 생각해 봅시다. 현재 2개의 체크박스만 체크
개선된 페이지 스택으로 LINE 증권의 웹 페이지 전환 처리하기
sunderls2020-07-29
sunderls is a front-end engineer
안녕하세요! sunderls입니다. 저는 2년 전에 페이지 스택을 주제로 'LINE MANGA: Page Stack을 이용해서 페이지 전환 처리하기'라는 글을 썼고, 현재 LINE 증권에서도 같은 방식으로 프로젝트를 진행하고 있습니다. 그래서 이번 글에서는 페이지 스택이 어떻게 진화했는지, 어떤 과제를 안고 있는지 함께 알아보겠습니다. 개선된 점 먼저 개선된 사항에 대해 공유드리겠습니다. 헤더 parallax 전환 페이지 스택은 네이티브(native) 앱과 같이 페이지 전환을 해도 DOM(Document Object Model)을 삭제하지 않고 순서대로 쌓아 놓는 구조입니다. DOM을 삭제하지 않기 때문에 이전 페이지로 돌아갈 때 순식간에 넘어가므로 깜빡거리는 문제가 해소됩니다. 아래는 예시입니다. 위 예시를 잘 살펴보면 헤더 부분이 네이티브 앱과 조금 다른데요. 네이티브 앱은&
TensorFlow.js: 웹 프론트엔드에서 머신러닝 활용하기
Jun2019-02-27
LINE에서 프론트엔드 개발자로 일하고 있습니다. 프로그래밍 언어에 관심이 많습니다.
안녕하세요! LINE에서 프런트엔드 개발을 담당하고 있는 Jun입니다. 최근 프런트엔드 분야는 흥미로운 기술이 가득해서 전부 다 파악하는 게 힘들 정도인데요. 개인적으로 가장 관심이 가는 건 머신러닝입니다. 오늘은 웹 프런트엔드에서 머신러닝 활용하기를 주제로, TensorFlow.js를 사용해서 간단하게 머신러닝을 구현해 본 경험을 공유하겠습니다. 들어가기 전에 저는 TensorFlow.js를 사용해서 브라우저에서 동작하는 간단한 classification 모델을 만들어 보았는데요. 제 경험을 말씀드리기 전에 TensorFlow와 classification에 대해 짧게 소개드리겠습니다. TensorFlow란? TensorFlow는 오픈소스 머신러닝 프레임워크입니다. 머신러닝에서 자주 사용되는 모델과 함수 등이 잘 추상화되어 있어서 애플리케이션 프로그래머도 손쉽게 머신러닝을 구현할 수 있는데요. 2018년 중순에 Tenso
- frontend
- UIT
- TensorFlow
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를 여러분께 소개하고자 합니다. 코드를 분리하려고 했던 이유 우리 서비스의 자바 스크립트 코드는 단 하나의 번들로 빌드됩니다. 서비스 규모
LINE Creators Studio 개발에 사용하는 Kotlin 소개
Freddie Wang2017-07-19
현재 LINE Fukuoka에서 Android 개발을 맡고 있습니다. 저는 열렬한 Kotlin 사용자입니다.
시작하기 전에 안녕하세요, 저는 LINE Fukuoka 개발 팀에서 일하는 Freddie Wang입니다. 저는 현재 LINE Creators Studio라는 새로운 Android 앱 개발을 맡고 있습니다. LINE Creators Studio는 누구나 자기만의 스티커를 만들 수 있도록 도와주는 스티커 제작 툴입니다. LINE Creators Studio로 만든 스티커는 LINE Store에서 판매도 할 수 있습니다. 이 블로그에서는 LINE Creators Studio 앱 개발에 전적으로 사용하고 있는 프로그래밍 언어인 Kotlin에 대해 이야기해보려 합니다. 왜 Kotlin을 주요 언어로 선택했는지 설명하고 Kotlin의 어떤 기능을 주로 사용하고 있는지 소개하겠습니다. 참고: LINE Creators Studio는 현재 일본에서만 제공되고 있으며 다른 지역에도 곧 배포될 예정입니다. Kotlin의 장점과 핵심 기능 Google I/O 2017에서 Google은 Android St
커맨드 라인에서 LINE에 메시지를 보낼 수 있는 LINE Notify
Watanabe Hirofumi2016-10-31
LINE Notify 개발을 담당하고 있습니다.
LINE Notify 개발을 담당하고 있는 Watanabe입니다. 개발자를 대상으로 LINE Notify를 사용하여 커맨드 라인에서 메시지를 보내는 방법을 소개하겠습니다. 기존에는 시스템적으로 LINE에 메시지를 보내려면 Bot API Trial 또는 Business Connect를 사용해야 했습니다. 이 기능들은 Messaging API에 의해서 개선되었지만, Messaging API는 기능이 뛰어난 반면 API 호출을 하려면 다소 고도의 구현이 필요합니다. LINE Notify에서는 기능을 메시지 송신으로 한정하여 매우 짧은 단계를 통해 LINE에 메시지를 보낼 수 있는 API를 준비했습니다. curl을 사용하여 메시지 보내기 LINE Notify로 발행할 수 있는 'personal access token'을 사용하여 API의 엔드포인트에 HTTP POST 리퀘스트를 보내기만 하면 메시지를 보낼 수 있습니다. HTTP 리퀘스트가 가능하다면 어떤 방법이든 사용할 수 있는데, 여기
- frontend
- LINE Notify

1 2