SOSOLOG

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

Scoped Context

React Context API는 React 컴포넌트 트리 내의 전역적(global)인 데이터를 공유할 수 있는 방법이다. Provider가 선언된 컴포넌트 기준으로 하위 컴포넌트에서는 해당 Context의 값을 사용할 수 있다. Provider 하위컴포넌트에서 Context를 사용할 수 있다는 것은, “Consumer는 가장 가까운 Provider기준으…

Select 컴포넌트

Intro 어떤 디자인 시스템에서 컴포넌트를 제공한다면, 어떤 기능들을 기대하시나요? 이 글에서는 Select컴포넌트에게 바라는 기능을 중심으로 구현 방법과 예제 코드를 설명합니다. ⚠️ 이 글에서 소개되는 코드는 모두 수도코드(pseudo code)입니다. 동작여부보다는 소개하고자하는 맥락을 중심으로 작성되었습니다. Table of Contents Wh…

그 많던 import React from ‘react’는 어디로 갔을까

이 글에서는 React 17릴리즈에 포함되었던 JSX Transform의 RFC문서를 살펴보며 이 변경사항이 어떤 의미를 가지고 있는지 정리해 보았습니다. 중간중간 내용에 대한 첨언과 약간의 추측을 덧붙였습니다. 관련하여 피드백이 있으시다면 댓글로 남겨 주시면 감사하겠습니다. 발단 React17은 2020년 10월 20일에 릴리즈되었다. 이 글이 릴리…

Deploy 2021

작년에 썼던 이야기 올해를 돌아보니 작년 회고를 쓸 때 생각했던 방향과는 꽤 다른 방향으로 걸었다. 작년에 생각했던 큰 목표 중 하나는 Infra관련 공부였는데 올해 새로운 곳으로 이직하고 정신없이 보내다 보니 회고를 쓸 즘에야 이 단어를 다시 떠올리는 걸 보면 여러 가지 우선순위 뒤쪽에서 오래 방치해뒀다는 뜻이겠다. 새로운 곳은 당연히 시스템이 다르고,…

Tree Shaking과 Module System

들어가며 어플리케이션은 개발자가 직접 작성한 코드, 외부 라이브러리 등 다양한 코드조각들로 이루어져 있습니다. 어플리케이션이 복잡해질수록 번들 사이즈에 신경을 쓰게 되는데요, 이때 필요한 코드만 남기기 위한 작업, 흔히 Tree Shaking이라고 불리는 과정이 수반되어야 합니다. 이 글에서는 Tree Shaking에 대한 기본 개념과 Tree Shak…

immutable.wedding 개발후기

2021년 10월 23일 결혼을 앞두고 개인적으로 사용할 모바일 청첩장과 함께 immutable.wedding이라는 모바일 청첩장 템플릿을 만들었습니다. COVID-19상황이 악화되면서 결혼식은 취소했지만, 청첩장 개발 후기를 적으며 아쉬운 마음을 달래봅니다. 🔗 GitHub Repository 🐝 나의 immutable.wedding 진행방식 같이 사…

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 …