SOSOLOG

📝 소소하게 끄적이는 개발로그

You don't know polyfill

Babel은 ES6+ 코드를 ES5로 변환하는 도구이다. 이 문장만 읽으면 Babel이 polyfill과 동일한 개념이라고 오해할 수 있지만, Babel이 곧 polyfill을 의미하는 것은 아니다. ES5에 존재하지 않는 ES6의 메서드나 생성자는 지원하지 않기 때문이다. 예를 들어 , , 등은 ES5로 대체할 Syntax가 없기 때문에 변환되지 않…

Webpack 5, 무엇이 달라졌을까?

이 글은 webpack5 Release 글을 정리한 글이며, 원글의 몇 가지 내용은 포함되지 않았습니다. 모든 변경사항을 알고 싶으신 분은 원글의 내용을 참고해주세요. v4에서 v5 migration에 대한 가이드는 이 글에 정리되어 있습니다. Breaking Changes의 의미 webpack 내부 아키텍처를 업데이트하고 향후 추가될 기능을 위한 기반을…

node modules splitting

web application을 만들 때 여러 기능을 빠르고 쉽게 지원하기 위해 여러 library를 사용합니다. 이 library를 어떻게 build하는지에 따라 초기 페이지 로딩 속도가 크게 좌우될 수 있습니다. 이 글에서는 의 splitChunk 옵션을 수정하여 node module을 여러 개의 bundle file로 나눌 수 있는 방법에 대해 소개합…

팀에 새로운 도구를 도입하고 싶다.

개발 생태계는 빠르게 변화하고 있고, 10년 이상 ‘트렌드’로 자리 잡던 도구와 방식이 한순간에 레거시가 되기도 한다. 개발자는 늘 새로운 것에 끌리기 마련이고 회사에서 새 프로젝트를 기존과 다른 방식으로 진행해보고 싶다는 생각은 누구나 한 번쯤 가져봤을 것이다. 새로운 것에 대한 도입은 팀원들과 협의가 필요하고, 이 과정이 순조롭게 진행될 수도 있고 긴…

Monorepo 환경 구축하기(w. lerna + rollup + typescript)

들어가기 전에 이 글은 Lerna를 사용한 Monorepo에서 package 환경 구축 방법을 소개하는 글입니다. 들어가기에 앞서 Monorepo의 장점에 대해 간단히 소개하면, 프로젝트마다 반복되는 설정을 공유할 수 있고 모듈화된 패키지를 서로 참조할 수 있습니다. Monorepo로 구성되어 있는 대표적인 프로젝트인 babel패키지 중 babel-ext…

ServiceWorker 이모저모 이야기

ServiceWorker는 웹 서비스에서도 백그라운드 동기화, 푸시 알림 등이 가능하도록 지원해주는 도구입니다. 이 글에서는 서비스워커에 대한 소개와 간단하게 CRA기반에서 어떻게 cache설정을 적용하는지 살펴봅니다. 서비스워커란? 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며 웹페이지 또는 사용자의 인터랙션이 …

Tailwindcss를 소개합니다.(with. twin.macro + emotion)

TailwindCSS는 utility-first CSS 프레임워크입니다. 이 글에서는 utility-first CSS에 대한 개념과 TailwindCSS를 어떻게 사용할 수 있는지 소개합니다. 평소 TailwindCSS에 관심이 있으셨거나 도입을 고려하고 계시다면 한번쯤 읽어보시면 좋을 것 같습니다. utility-first CSS utility-firs…

성장에 은탄환은 없다

첫 회사에 입사하기 전부터 ‘같이 성장할 수 있는 회사’를 찾고 싶었고, 내 목표는 개발자로서 ‘멈추지 않고 성장하는 것’이다. 작년에 이 주제로 많이 고민했었고 그 내용을 발표에서 공유하기도 했었다. 지금 다시 생각해본 성장에 ‘은탄환’은 없고 매번 많은 고민을 통해 이뤄진다고 생각한다. 그 내용을 짧게 정리해 보려 한다. 정의 ‘성장’이라는 단어는 …

Cookie Recipes

작년에 발표된 Chrome SameSite 정책과 웹 사이트의 인증 기능을 구현하는 과정에서 ‘쿠키’에 대해 한 번쯤 들어 보셨을 것입니다. 이 포스팅에서는 쿠키가 무엇이고, 어떤 종류가 있는지, 쿠키의 특성과 연관된 브라우저 정책들을 살펴봅니다. 쿠키 쿠키란 웹사이트의 정보를 브라우저 쪽에 저장하는 작은 파일입니다. DB는 클라이언트의 요청에 의해 데이…

알아두면 쓸모 있는 Navigator지식

프런트엔드 개발에서 객체에 대한 사용을 빼놓을 수 없습니다. 이 포스팅에서는 navigator객체의 여러 가지 속성들에 대해 살펴봅니다. 객체는 대표적인 User Agent뿐만 아니라 사용자의 상태에 관한 여러가지 정보를 담고 있습니다. navigator의 속성들은 읽기 전용으로 접근할 수 있습니다. react-adaptive-hooks ChromeL…