어제 오늘 내일

면접 단골 질문이자, 설명은 들어봤지만 "그래서 이걸 어디에 쓰지?"가 남는 개념. 클로저입니다.사실 클로저는 특별한 문법이 아닙니다. 자바스크립트 함수라면 거의 다 클로저이고, 우리는 이미 매일 클로저를 쓰고 있습니다. 다만 그 동작 방식을 정확히 모르면 반복문에서, 이벤트 핸들러에서, 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는 이 사이 어딘가에 있는 선택지입니..