Category Archives: Front-End

Don’t block the event loop! 매끄러운 경험을 위한 JavaScript 비동기 처리

웹 서비스를 사용하다 보면 갑자기 화면이 멈추거나, 타이핑한 게 화면에 바로바로 반영되지 않는다거나, 애니메이션이 매끄럽게 동작하지 않는 등의 현상을 종종 마주할 수 있습니다. 사용자 경험을 해치는 대표적인 예라고 할 수 있습니다. 이러한 문제를 야기하는 원인에는 여러 가지가 있을 수 있지만, 그중에서 JavaScript 언어의 특징 중 하나인 run-to-completion, JavaScript 코드가 구동되는 JavaScript 엔진, 콜 스택(call stack), 이벤트 루프(event loop), 태스크 큐(task queue) 등을 중점적으로 살피며 원인을 분석해 보고, 분석한 원인을 바탕으로 몇 가지 해결 방법도 제시해 보겠습니다.

UIT Global Workshop 2019 – 3개국 참가자 인터뷰

안녕하세요. LINE UIT(User Interface Technology) 팀 엔지니어 오혜성입니다. LINE에서는 모두가 알고 있는 메신저 서비스를 시작으로 뉴스, 음악, 동영상 서비스와 같은 컨텐츠형 서비스는 물론 LINE Pay, 가계부와 같은 금융 서비스까지 매우 다양한 서비스를 글로벌하게 전개해 나가고 있습니다.

LINE UIT 팀은 이런 다양한 서비스의 웹 프론트엔드 기술을 담당하고 있는 팀입니다. 한국은 물론 일본, 베트남, 대만 등 세계 여러 도시에서 매일 고군분투하며 개발하고 있는데요. 이렇게 평소에는 세계 각지에서 다양한 형태로 일하고 있는 UIT 팀의 LINERs가 1년에 한 번 다같이 모이는 특별한 날이 있습니다. 바로 ‘UIT Global Workshop’이 열리는 날입니다. 2019년에는 이 워크숍이 지난 9월 4일부터 9월 6일까지 한국에서 개최되었는데요. 총 130명의 팀원이 모여 서로의 지식을 공유하며 더욱 넓은 세계를 경험할 수 있었습니다. 이번 글에서는 UIT Global Workshop에 참여했던 팀원과의 인터뷰를 통해 당시의 현장 분위기를 여러분께 공유하고자 합니다.

문제를 해결할 때 사고가 중요한 이유

개발자는 문제에 직면했을 때 코드를 살펴보며 원인을 찾습니다. 하지만 그 문제가 로직에 내재된 버그가 아니라면, ‘문제를 어떻게 해결할 것인가?’에 대한 사고(思考)가 더 중요합니다. 저는 기존에 네이티브(native)로 구현되어 있는 ‘친구/대화’ 탭의 검색 화면을 웹 뷰로 마이그레이션하는 작업을 진행하였습니다. 이번 글에선 이 과정에서 발생한 문제를 사례로 사고의 중요성을 전달하고자 합니다.

LINE의 웹 기반 서비스와 기술 – LINE은 앱 만드는 회사 아닌가요?

안녕하세요. LINE에서 웹 서비스를 개발하고 있는 허석입니다. 오늘은 LINE에서 웹을 기반으로 하는 여러 서비스에 대해 설명을 드리고, 각 서비스를 어떤 아키텍처나 기술 스택, 방법으로 만들고 있는지를 소개하겠습니다.

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

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

LINE Search UI 개선기

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

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

PM2를 활용한 Node.js 무중단 서비스하기

자바스크립트는 가장 널리 사용되는 클라이언트 측 프로그래밍 언어이자 프론트엔드 웹 개발 언어 중 하나입니다. 그리고 Node.js는 Chrome의 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임(runtime)으로 ‘Event Driven’, ‘Non-Blocking I/O’ 모델을 사용해 가볍고 성능이 뛰어나 높은 평가를 받고 있습니다. 실제로 여러 글로벌 기업에선 웹 애플리케이션을 개발할 때 Node.js를 많이 선택하고 있습니다. LINE 역시 웹 테크 파트에서 진행하는 여러 프로젝트에서 SSR(Server Side Rendering)과 BFF(Backend for Frontend)등의 역할을 Node.js로 개발해 서비스하고 있습니다. 이번 글에선 이와 같이 최근에 많은 관심을 받고 있는 Node.js를 활용해서 실제 서비스를 무중단으로 운영해 본 경험을 공유하고자 합니다.

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

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

HTML 같이 레이아웃을 자유롭게 변경할 수 있는 새로운 메시지 유형, ‘Flex Message’를 소개합니다

Flex Message라는 새로운 메시지 유형이 LINE Messaging API에 추가되었습니다. 기존 Messaging API에서도 단순 텍스트 외에 스티커나 이미지, 비디오 같은 미디어 유형, 혹은 다양한 버튼과 URL을 배치할 수 있는 템플릿 유형의 메시지를 사용할 수 있었습니다. 그 중에서도 템플릿은 사용자가 여러 가지 선택지 중에서 답을 골라야 하는 상황에 특히 유용했습니다. 다만, 버튼 템플릿 같은 경우 버튼을 최대 네 개까지만 배치할 수 있다든가, 레이아웃을 제목, 본문, 버튼 순으로만 설정할 수 있다는 제약이 있었습니다.

Flex Message 란?

Flex Message는 바로 이런 제약에서 벗어나 레이아웃을 굉장히 자유롭게 바꿀 수 있는 메시지 유형으로, 변경 가능한 가짓수가 무한대에 가깝습니다. 일정한 디스플레이 프레임이 있으면서도 레이아웃을 HTML처럼 원하는 대로 변경할 수 있고, 각각의 구성 요소도 보기 좋게 정돈되어 나타납니다. 예를 들어, 아래와 같은 메시지를 작성할 수 있습니다.

Webpack 같은 모듈 번들러를 만들어 보자

안녕하세요, LINE에서 프런트엔드 개발을 담당하고 있는 전현제입니다. 이번 포스팅에서는 JavaScript 생태계의 구성 요소 중 하나인 모듈 번들러(module bundler)에 대해 소개하려 합니다. 먼저 모듈 번들러의 개념을 간단하게 소개한 후 모듈 번들러가 실제로 어떻게 작동하는지에 대해 직접 모듈 번들러를 만들어 본 경험담을 함께 나누고자 합니다.

모듈 번들러란?

모듈 시스템이란 규모가 큰 코드 베이스를 모듈이라는 단위로 분할할 수 있게 만드는 구조를 말합니다. 자바스크립트에는 오랫동안 모듈 시스템이 없는 상태였는데, 2009년 Node.js가 CommonJS라는 모듈 시스템을 사용하기 시작한 이후 모듈화된 코딩을 하는 것이 보편화되었습니다. 또, ECMAScript 2015에서 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어 이제는 모듈 없이 자바스크립트로 코딩하기 힘들어졌다고 할 수 있을 정도입니다.