SOSOLOG

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

Rollup.js 환경설정

이 글에서는 디자인 시스템 개발 환경을 구축하는 단계에서 rollup.js과 라이브러리 설정에 관한 내용을 정리하는 글입니다. 하지만 환경설정에 대한 튜토리얼은 아니기 때문에 필요한 모든 내용을 다루지는 않습니다. 이 글에서 구성한 환경 구축 내용만 보고 싶으시다면 @soyoung/design-system-config 에서 보실 수 있습니다. Table …

Deploy 2020

어김없이 회고 시즌이 돌아왔다. 작년에도 ‘시간이 참 빠르게 지나갔구나’라고 생각한 것 같은데, 올해가 더 그런 것 같다. 되돌아보고, 기록하고, 언젠가 이맘때의 나를 다시 보기 위해 회고 글을 작성한다. 나의 2020년은 어땠을까? 아는 것보다 모르는 것이 많아졌다. Banksalad Product Language(이하 BPL, 설명: Banksalad…

[서평] 파워풀 - 넷플릭스 성장의 비결

‘자율과 책임’이라는 단어가 조직문화에 어떤 영향을 주는지, 좋은 조직문화란 무엇이고 어떤 영향을 주는지에 대해 나만의 대답이 없었다. 이 두 가지 단어를 가장 중요하게 여긴다는 넷플릭스의 이야기가 궁금했고, 연휴 첫날 첫 장을 펴서 단숨에 다 읽었다. 책을 덮는 순간 나의 첫 반응은 ‘대단하다’였다. 넷플릭스의 더 깊은 고민과 시행착오들이 궁금해졌지만,…

비전공자 개발자도 다르지 않아요

⚠️ 이 글은 철저히 개인적 관점에서 작성했으며, 특정 단체나 개인을 타깃으로 하는 글이 아닙니다. 짧은 경험에서 적은 글이기 때문에 보시는 분에 따라 불편하신 부분이 있더라도 너른 양해 부탁드립니다. 들어가며 이 글은 개발을 시작할 때 ‘비전공자여서’ 가질 수 있을 막연한 두려움이나 오해에 관한 개인적 생각을 적은 글이다. 본문에서 언급하게 될 CS지…

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설정을 적용하는지 살펴봅니다. 서비스워커란? 서비스워커는 브라우저가 백그라운드에서 실행하는 스크립트로, 웹페이지와는 별개로 작동하며 웹페이지 또는 사용자의 인터랙션이 …