어제 오늘 내일

면접 단골 질문이자, 설명은 들어봤지만 "그래서 이걸 어디에 쓰지?"가 남는 개념. 클로저입니다.사실 클로저는 특별한 문법이 아닙니다. 자바스크립트 함수라면 거의 다 클로저이고, 우리는 이미 매일 클로저를 쓰고 있습니다. 다만 그 동작 방식을 정확히 모르면 반복문에서, 이벤트 핸들러에서, React 훅에서 이해할 수 없는 버그를 만나게 됩니다.이 글은 원리 → 함정 → 실전 패턴 순서로 정리합니다.클로저란 무엇인가한 줄 정의는 이렇습니다. 클로저 = 함수 + 그 함수가 선언된 렉시컬 환경(lexical environment)의 조합 말이 어려우니 코드로 봅시다. 먼저 평범한 경우부터요.function normal() { const message = "안녕하세요"; // normal의 지역 변수}n..

자바스크립트에서 객체를 "바꾸지 못하게" 만드는 가장 익숙한 방법은 Object.freeze입니다. 이름만 보면 모든 게 해결될 것 같지만, 실제로는 딱 한 겹만 얼립니다. 이 사실을 모르고 쓰면 오히려 안전하다고 착각한 채 버그를 안고 가게 됩니다.이 글에서는 Object.freeze가 정확히 무엇을 막고 무엇을 못 막는지, 그리고 실무에서 어떻게 쓰면 좋을지 정리합니다.기본 동작const config = { host: "localhost", port: 3000 };Object.freeze(config);config.port = 8080; // 무시됨delete config.host; // 무시됨config.protocol = "https"; // 무시됨console.log(c..

자바스크립트 코드를 읽다 보면 파일 맨 위에 덩그러니 놓인 이 한 줄을 종종 만나게 됩니다."use strict";문법도 아니고 함수 호출도 아닌, 그냥 문자열 하나. 처음 보면 "이게 왜 여기 있지?" 싶습니다. 이 글에서는 이 한 줄이 정확히 무엇을 바꾸는지, 그리고 모던 자바스크립트에서도 여전히 필요한지 정리해 보겠습니다. 왜 생겼나자바스크립트는 초창기부터 "관대한" 언어였습니다. 오타를 내도, 말이 안 되는 코드를 써도 최대한 에러 없이 굴러가게 만들어졌죠. 브라우저 입장에서는 스크립트 하나 잘못됐다고 페이지 전체가 멈추는 것보다 나은 선택이었습니다.문제는 이 관대함이 곧 버그 은폐 장치로 작동한다는 점입니다. 오타 하나가 조용히 전역 변수를 만들고, 잘못된 대입이 아무 일도 없었다는 듯 무시됩니..

1. 들어가며: 어떤 문제를 해결하는가React에서 서버 데이터를 가져오는 가장 흔한 방법은 useEffect와 useState를 조합하는 것입니다.function TodoList() { const [todos, setTodos] = useState([]) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) useEffect(() => { setLoading(true) fetch('/api/todos') .then((res) => res.json()) .then((data) => setTodos(data)) .catch((err) => setError(err)..

1. 들어가며: 어떤 문제를 해결하는가React에서 여러 컴포넌트가 같은 상태를 공유해야 할 때, 가장 먼저 마주치는 선택지는 useState를 최상위 컴포넌트로 끌어올리고 props로 내려주는 방식입니다. 하지만 컴포넌트 트리가 깊어지면 중간 컴포넌트들이 사용하지도 않는 props를 계속 전달만 하는 props drilling 문제가 생깁니다.Context API로 이 문제를 해결할 수도 있지만, Context는 값이 하나라도 바뀌면 그 Context를 구독하는 모든 컴포넌트가 리렌더링된다는 한계가 있습니다. Redux는 이런 문제를 정교하게 해결하지만, 그 대가로 action, reducer, dispatch 같은 보일러플레이트 코드가 많이 필요합니다.Zustand는 이 사이 어딘가에 있는 선택지입니..

1. 들어가며: 어떤 문제를 해결하는가React 컴포넌트를 만들다 보면 props나 state 값에 따라 className을 다르게 줘야 하는 경우가 정말 많습니다. 처음에는 템플릿 리터럴이나 삼항 연산자로 충분해 보이지만, 조건이 두세 개만 넘어가도 코드가 금방 지저분해집니다.// 조건이 늘어날수록 읽기 힘들어지는 예function Button({ variant, disabled, fullWidth }) { return ( 버튼 )}문자열 연결 사이에 공백을 빠뜨리거나, 조건이 false일 때 빈 문자열을 제대로 처리하는지 신경 쓰다 보면 정작 스타일 로직보다 문자열 조립에 더 많은 신경을 쓰게 됩니다. clsx는 바로 이 문제를 해결하기 위한, 아주 작지만 실용적인 유틸리티..

1. 들어가며: 어떤 문제를 해결하는가Tailwind CSS로 컴포넌트를 만들다 보면 이런 상황을 자주 마주칩니다.function Box({ className }) { return 내용}// 사용하는 쪽에서 padding을 다르게 주고 싶어서이렇게 문자열을 단순히 이어 붙이면 최종 className은 p-4 bg-white rounded-lg p-8이 됩니다. 문제는 CSS에서 p-4와 p-8이 같은 우선순위를 가진 클래스라서, 어떤 게 이길지는 CSS가 실제로 로드되는 순서에 달려있다는 점입니다. Tailwind가 빌드 시 클래스를 어떤 순서로 정렬하느냐에 따라 p-4가 이길 수도, p-8이 이길 수도 있어서 예측이 어렵고 버그로 이어지기 쉽습니다.tailwind-merge는 바로 이 문제, 즉 같은..

1. 들어가며Tailwind CSS란 무엇인가Tailwind CSS는 미리 정의된 유틸리티 클래스를 조합해서 스타일을 만드는 utility-first CSS 프레임워크입니다. Bootstrap처럼 완성된 컴포넌트(버튼, 카드 등)를 제공하는 대신, flex, p-4, text-center, bg-blue-500 같은 작은 단위의 클래스를 조합해서 원하는 디자인을 직접 만들어가는 방식이에요. 버튼별도의 CSS 파일을 오가지 않고 마크업 안에서 스타일을 완결할 수 있다는 게 가장 큰 특징입니다.왜 React와 함께 많이 쓰이는가React는 컴포넌트 단위로 UI를 쪼개서 개발합니다. 이때 CSS도 컴포넌트 단위로 캡슐화되어야 관리가 편한데, Tailwind는 클래스 자체가 컴포넌트의 스타일 명세서 역할을 하..

useState를 쓰다 보면 상태가 점점 복잡해지는 순간이 옵니다. 상태 값이 여러 개로 늘어나고, 상태를 바꾸는 로직이 컴포넌트 곳곳에 흩어지기 시작하죠. 이럴 때 상태 관리를 한곳으로 모아 체계적으로 다룰 수 있게 해주는 것이 바로 useReducer Hook입니다. 이 글에서는 useReducer가 무엇인지, useState와 어떻게 다른지, 언제 쓰면 좋은지 알아보겠습니다.useReducer란?useReducer는 상태 업데이트 로직을 컴포넌트 바깥으로 분리해서 관리할 수 있게 해주는 Hook입니다. Redux를 써본 적이 있다면 익숙할 텐데, 사실 useReducer는 Redux의 핵심 개념을 React 내장 기능으로 가져온 것입니다.핵심 등장인물은 세 가지입니다.state: 현재 상태 값dis..

이전 글에서 "useCallback은 useMemo로 함수를 감싼 것과 같다"고 잠깐 언급했었죠. 이번 글에서는 그 이야기를 이어서 useCallback을 자세히 다뤄보겠습니다. useCallback은 함수를 메모이제이션하는 Hook으로, React.memo와 함께 쓰일 때 진가를 발휘합니다. 이 글에서는 useCallback이 왜 필요한지, 언제 써야 하는지 예제와 함께 알아보겠습니다.문제의 시작: 함수는 매번 새로 만들어진다먼저 자바스크립트의 기본 성질부터 짚고 가야 합니다. 함수도 객체이기 때문에, 컴포넌트가 렌더링될 때마다 함수는 매번 새로 생성됩니다.function Parent() { // 이 handleClick 함수는 Parent가 렌더링될 때마다 새로 만들어짐 // 내용은 똑같지만, 자..