SOSOLOG

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

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…

Saga Pattern과 redux-saga

redux 비동기 처리를 위해 redux-saga를 사용해보신 적이 있으신가요? “The mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects. redux-saga is a redux middlewar…

되돌아보는 index.html - Part 2

Part 1에서는 link tag와 script tag에 대해 알아보았습니다. 이번 편에서는 OpenGraph(이하 og), favicon, charset, lang에 대해 알아봅니다. OpenGraph Protocol OpenGraph Protocol(이하 og)이란, Facebook에서 정의한 HTML문서의 메타 데이터 정보를 적는 방식에 대한 규약…