SOSOLOG

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

CSS-in-JS, 무엇이 다른가요?

Table of Contents CSS in JS? Critical CSS와 CSS-in-JS Performance Atomic CSS 마무리 References CSS in JS? CSS-in-JS는 단어 그대로 JavaScript코드에서 CSS를 작성하는 방식을 말합니다. 2014년 Facebook 개발자인 Christopher Chedeau aka…

입력을 다루는 다양한 방법

웹 애플리케이션에서 복잡한 문제 중 하나는 사용자의 입력 데이터를 받아 처리하는 Form입니다. 이 글에서는 Form을 다루는 여러 방법과 대표적 form 라이브러리 중 하나인 react-hook-form에 대해 소개합니다. 간단한 Form Form에서 떠올릴 수 있는 단순한 예시는 Email과 Password를 받는 Login Form이다. 이 경우 …

이직.log('SoYoung')

이직 여정을 마무리하며 준비하고, 경험했던 것들에 대해 정리해보려고 합니다. 개인적으로는 약 두 달간의 여정을 되돌아보고자 하고, 이직을 고민하시거나 진행 중이신 분들에게는 하나의 경험 공유가 되었으면 하는 바람으로 글을 적어봅니다. 왜 이직을 하는가? 이직 여정을 시작하기에 앞서, 이 질문에 답을 찾는 것은 매우 중요하다. 이 질문에 대한 답은 옮기게 …

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로 나눌 수 있는 방법에 대해 소개합…