Front-end Engineer - @AlanGDavalos
TL;DR: 2022년 웹 개발에서 고려해야 할 환경은, 성능 측면에서는 저사양의 Android 기기, 웹 표준 측면에서는 2년 전의 Safari, 네트워크 측면에서는 4G입니다. 웹은 대체적으로 이와 같은 니즈에 적절히 대응하지 못하고 있습니다. 특히 성능 관점에서 JavaScript에 과도하게 의존하는 것과 같은 요소들이 웹 사이트의 성능을 끌어내리고 있습니다. 안녕하세요! LINE에서 프런트엔드 엔지니어로 일하고 있는 Alan Dávalos입니다. 이 글의 제목이 그저 클릭을 유도하려는 미끼라고 생각하실 수 있겠지만, 조금만 더 읽어주시길 바랍니다. 분명 읽을 만했다고 생각하실 겁니다. 2021년과 2022년 사이에 웹에는 몇 가지 큰 변화가 있었는데요. 이 변화가 전반적인 웹 개발 방식에 영향을 미치고 있습니다. 그래서 저는 이번 글에서 다양한 데이터를 분석하며 어떤 변화가 있었는지 알아보고, 웹 개
자바스크립트로 웹앱을 개발하고 있습니다.
안녕하세요! LINE의 UIT(User Interface Technology) 팀에서 프론트엔드 개발을 하는 송헌용입니다. 뒤돌아보니 LINE에 입사한 지 벌써 8개월이나 지났더라고요. 그래서 지난 8개월 동안 제가 LINE에서 어떻게 지냈는지 되돌아보는 시간을 가져보았습니다. 입사 후기 겸 회고록이라고 할까요. 저는 개발자로 일한 지 올해로 5년 차가 되었고, 그동안 주로 프론트엔드 개발을 담당했습니다. 예전에는 PC용 웹 애플리케이션을 많이 개발했는데요. LINE에서 일하면서 모바일 개발에 더욱 집중하게 되었습니다. 예전에도 나름대로 최적화에 신경쓴다고 생각하며 개발했지만, 이제와 돌이켜보니 부족한 부분이 있었던 것 같습니다. 한국은 인터넷 속도가 빨라서 네트워크 병목 현상으로 렌더링이 느려지는 일은 흔치 않기 때문에 자연스럽게 그런 측면에서의 최적화를 간과하며 개발했던 것 같습니다. 반면, LINE에서 제공하는 서비스는
Developer Relations팀에서 LINE의 개발자와 개발자 문화를 세상에 알리는 Developer Advocate로 일하고 있습니다.
안녕하세요. 이번 글에서는 지난 12월 11일, Vuetiful Korea Meetup에 다녀온 이야기를 전해드리려고 합니다. Vuetiful Korea는 최근 핫한 프론트엔드 프레임워크인 Vue.js에 대한 관심 주제를 발표하고 서로 관련 경험을 공유하는 네트워킹 모임입니다. 2017년 4월에 시작하여 이번이 여섯 번째 밋업이었는데 90명 정원이 하루만에 마감되었다고 하니 Vue.js의 인기를 실감할 수 있었습니다. LINE은 이번 밋업에 장소와 샌드위치, LINE 캐릭터 상품을 후원했는데요. 귀여운 스티커들이 특히 인기가 많았습니다. 국내에서는 React에 비해 Vue.js의 활용이 상대적으로 적은 편입니다. 그래서 이번 밋업은 국내에서도 더 많은 개발자들이 Vue.js를 사용할&nbs
LINE에서 프론트엔드 개발자로 일하고 있습니다. 프로그래밍 언어에 관심이 많습니다.
안녕하세요, LINE에서 프런트엔드 개발을 담당하고 있는 전현제입니다. 이번 포스팅에서는 JavaScript 생태계의 구성 요소 중 하나인 모듈 번들러(module bundler)에 대해 소개하려 합니다. 먼저 모듈 번들러의 개념을 간단하게 소개한 후 모듈 번들러가 실제로 어떻게 작동하는지에 대해 직접 모듈 번들러를 만들어 본 경험담을 함께 나누고자 합니다. 모듈 번들러란? 모듈 시스템이란 규모가 큰 코드 베이스를 모듈이라는 단위로 분할할 수 있게 만드는 구조를 말합니다. 자바스크립트에는 오랫동안 모듈 시스템이 없는 상태였는데, 2009년 Node.js가 CommonJS라는 모듈 시스템을 사용하기 시작한 이후 모듈화된 코딩을 하는 것이 보편화되었습니다. 또, ECMAScript 2015에서 자바스크립트 언어 사양에 신규 모듈 시스템인 ES Module이 포함되어 이제는 모듈 없이 자바스크립트로 코딩하기 힘들어졌다고 할 수 있을 정도입니다. // ES Module의 예 import "
LINE Engineer
안녕하세요? LINE에서 Developer Advocate를 맡고 있는 Nakajima입니다. 챗봇으로 웹을 스마트 하게 사용하기 여러분, 혹시 다음과 같은 경험 없으셨나요? 스마트폰이 지원되지 않는 웹사이트에서 뭔가 입력할 때면 짜증이 난다. 매번 웹사이트에 로그인하기가 번거롭다. 애초에 스마트폰으로는 입력란에 입력하는 것 자체가 힘들다. 당연한 얘기지만 LINE 앱은 주로 스마트폰으로 이용합니다. 그래서 LINE은 스마트폰 UX를 중요하게 여기고 많은 노력을 기울이고 있습니다. 이에, 앞서 언급한 사례들을 LINE으로 쉽게 이용할 수 있다면 편리하지 않을까라는 생각에서 시작된 한 가지 실험을 본 포스팅에서 소개할까 합니다. 챗봇으로 웹 페이지를 이용할 때는 헤드리스 크롬으로 웹 브라우저 중 하나인 Chrome은 다들 아실텐데요, 혹시 헤드리스 크롬(Headless Chrome)도 알고 계시나요? 일반적으로 Chrome을 GUI(Graphic User Interface) 형태로
프론트엔드 엔지니어입니다. 2016년에 도쿄에서 후쿠오카로 삶의 터전을 옮겼습니다.
자바스크립트가 되어 그 기분을 헤아 릴 수 있다면 안녕하세요? LINE Fukuoka의 프론트엔드 엔지니어 Yonehara입니다. 저는 프론트엔드 개발자로서 아직 웹 브라우저나 자바스크립트의 기분을 헤아려줄 만큼의 경지에는 올라가지 못했다고 생각합니다. 이로 인해 저희 서비스 사용자에게 원하는 만큼의 쾌적한 UX를 제공해 드리지 못할 때가 있어 괴로울 때가 있습니다. 그나마 다행인 것은, 우리가 이 자바스크립트의 속마음을 상당 부분 분석적으로 들여다볼 수 있다는 점입니다. Google이나 Mozilla가 그들의 자바스크립트 엔진 코드를 공개하고 있고, 여러 곳에서 엔진 설계에 대해 풀어 설명하고 있고, 또 트레이싱이나 프로파일링을 할 수 있는 수단도 넉넉히 준비되어 있기 때문이지요. 이번 포스팅에서는 여러분도 잘 아시는 Chrome의 자바스크립트 엔진인 V8에서 최적화를 위한 장치로 도입한 히든 클래스에 대해 살펴볼까 합니다. 동적 타이핑 언어로 구현되는 사전형 객체에 대한 제약 자바
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를 여러분께 소개하고자 합니다. 코드를 분리하려고 했던 이유 우리 서비스의 자바 스크립트 코드는 단 하나의 번들로 빌드됩니다. 서비스 규모
