분류 전체보기131 번들러 정리 번들러란 무엇인가번들러는 여러개의 모듈 파일을 의존성 그래프로 분석해서 브라우저가 효율적으로 로드할 수 있게 하나 또는 여러 번들 파일로 만드는 도구이다. 번들러는 다음의 역할을 수행한다. 1. 모듈 의존성 그래프 생성2. 다양한 자산(JS, CSS, 이미지 등) 변환3. 브라우저 실행 가능한 번들 생성4. 코드 최적화 수행(tree-shaking) 번들러가 중요한 이유는 의존성을 해석하고 최적화하는 점이다. 번들러가 필요한 이유1. 브라우저는 모든 문법을 이해하지 못한다.프론트엔드 코드는 Typescript, Jsx, 최신 ES 문법 등을 포함한다.그러나 브라우저는 그 코드의 상당수를 직접 실행하지 못한다.그래서 번들러는 ts의 js변환, jsx의 js 변환 등을 담당한다.즉, 번들러는 코드를 실행.. 2026. 2. 24. Promise의 구동 원리 Promise란 무엇인가우리가 흔히 프론트엔드에서 다루는 비동기는 async/await을 통해 형성된다.그러나 이 async/await은 단순하게 Promise를 이용하기 편한, syntax sugar에 불과하다. 프론트엔드 개발자들은 async/await은 쉽게 사용할 수 있지만, 직접 Promise를 통한 비동기 제어에는 어려움을 겪는다.단순하게 await 이후를 Promise로 wrap되었다고 이해했다면, 본 글에서는 그 안들 들여다보아 어떻게 unwrap되어 동작하는지 Promise의 원리를 차근차근 파악해보겠다. Promise는 state machine이다Promise는 단순히 비동기 흐름을 제어하는 도구가 아니다.엄밀하게 Promise는 state machine이고, 이 state machin.. 2026. 2. 24. FSD에서 도메인 중심 아키텍처로 전환하며 마주한 현실적인 선택들 본격적인 글을 들어가기 앞서원래는 프로젝트 아키텍쳐의 방향성을 검토하고, 더 나은 아키텍쳐를 고안해내었다. 그리고 적용하는데 드는 비용을 따져서 현재 프로젝트에 개선된 아키텍쳐를 적용하지 않고, 다음 프로젝트에서부터 적용할 예정이었다. 처음에는 전체 코드베이스를 전부 검토하고 리팩토링하는 비용을 계산하였을 때, 전체 프로젝트를 갈아엎는 선택이 득보다는 실이 많다는 생각이 들었었다. 하지만 마침 개발기간이 연장되었기에 썩은 가지를 도려내기 위한 여정을 출발하였고, 이 글은 그 여정의 시작과 끝, 그리고 그 여정의 도중에 마주친 현실적인 고민들을 담기 위해 노력하였다. 사실 아키텍쳐 개선이라는게 현실적으로 무조건 좋은 결과만 driven되는 것은 아니였다. 결과를 예측하고, 개선에 드는 비용을 따져가면서 신.. 2026. 1. 4. Zustand 역설계 Zustand는 왜 React의 바깥에서도 동작하는가React-Router의 loader는 React의 렌더링 사이클에서 벗어나 있다.그래서 이 React-Router의 loader는 React hooks를 사용할 수 없는데, 흥미롭게도 이 loader에서 Zustand는 사용이 가능하다.이게 어떻게 가능한걸까, 항상 의문이 들어 이 자리를 빌어 Zustand 그 자체를 해부하겠다. Zustand의 철학은 createStore에서 드러난다Zustand를 사용할 때, 제일 먼저 호출되는 함수는 createStore다. 흔히들 프론트엔드 개발자들은, 이 createStore를 통해 React의 컴포넌트 트리와 무관하게 전역으로 상태를 관리한다. 그러나 이 createStore의 진가는 단순히 전역 상태 관리.. 2025. 12. 14. Execution Context를 통한 Closure의 이해 ExecutionContext { GlobalExecutioncontext FunctionalExecutionContext EvalFunctionExecutionContext // 보안에 문제있어서 이젠 거의 안씀} Global Execution Context ├─ LexicalEnvironment │ ├─ EnvironmentRecord (GlobalDeclarative + GlobalObject) │ └─ Outer = null ├─ VariableEnvironment └─ ThisBinding = global object (browser=window, node=global) Function Execution Context ├─ LexicalEnvironment (Fu.. 2025. 12. 11. tanstack query 개선기 내가 tanstack-query를 바꾼 이유custom hook 무조건 좋은건 아니다.보통 리액트 쿼리를 사용할 때에는, 아래와 같은 방식을 사용하였었다.import { useQuery } from "@tanstack/react-query";import { getData } from "../Services/http/getData";import { District } from "../Types/CityAndDistrict";import { ApiResponse } from "../Types/ResponseType";function useDistrictQuery(cityId: string) { return useQuery({ queryKey: ["district", cityId], queryFn.. 2025. 12. 7. 이전 1 2 3 4 ··· 22 다음