Category Archives: Front-End

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

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

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

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

UICollectionView를 이용한 LINE iOS 대화방 리팩토링 – 2

지난 1편에서 UICollectionView의 커스텀 레이아웃 기능을 활용해 대화방 UI를 표시하는 방법에 대해 설명했습니다. 이번 글에서는 대화방에 뷰 모델을 적용한 방법과 비동기 콘텐츠 로딩을 처리한 방법을 설명한 뒤 리팩토링하면서 어려웠던 점과 개선된 점, 그리고 앞으로 더 개선해 나가야 할 점들에 대해서 이야기해 보겠습니다.

UICollectionView를 이용한 LINE iOS 대화방 리팩토링 – 1

LINE의 대화방 화면은 사용자가 가장 많이 사용하는 화면 중 하나이며 새로운 기능이 계속 추가되고 있습니다. 그에 따라 코드가 점점 복잡해지면서 최근에 리팩토링을 진행했고, 그 과정에서 UICollectionView를 도입했습니다. 저희는 이번 리팩토링 과정에서 사용한 iOS 기술과 뷰(view) 모델 도입을 중점으로 대화방의 코드를 어떻게 개선했는지 블로그를 통해 두 번에 걸쳐 공유하려고 합니다.

LINE Free Call에 iOS 다크 모드 적용하기

사용자가 다크 모드를 선택하면 Apple에서 제공하는 기본 앱은 자동으로 색상이 변경되지만, 서드 파티 앱에서는 다크 모드를 지원하기 위해 추가적인 작업을 해주어야만 합니다. 이번 글에서는 LINE Free Call에서 다크 모드를 지원하기 위해 했던 작업과 소소한 팁에 대해 소개해드리고자 합니다.

데이터 기반으로 지속적인 CI/CD 개선 환경 만들기

저는 올해 6월에 LINE에 입사해 LINE 메신저 클라이언트와 관련된 CI(Continuous Integration)/CD(Continuous Delivery) 업무를 지속적으로 개선하고 자동화하는 DevOps 역할을 수행하고 있습니다. 이번 글에서는 지속적인 CI/CD 개선을 위해 데이터를 시각화하고 활용해 나간 경험을 공유하려고 합니다.

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)로 구현되어 있는 ‘친구/대화’ 탭의 검색 화면을 웹 뷰로 마이그레이션하는 작업을 진행하였습니다. 이번 글에선 이 과정에서 발생한 문제를 사례로 사고의 중요성을 전달하고자 합니다.