전체 글16 논블로킹 I/O와 Node.js Node.js는 I/O 작업을 어떻게 처리할까?이 글에서는 I/O, 블로킹/논블로킹, Node.js의 I/O 작업 처리 방식에 대해 살펴보려고 한다.I/O란 무엇인가I/O(Input/Output)란 프로세서가 입출력 디바이스(디스크, 네트워크 등)와 데이터를 주고받는 과정이다.사용자 공간(User Space)에서는 보안과 하드웨어 자원 관리 문제로 I/O를 처리할 수 없다. 대신 OS가 제공하는 I/O 시스템 콜을 호출하여 커널 공간(Kernel Space)으로 제어권을 넘긴다. 시스템 콜을 받은 커널은 디바이스에 I/O 작업을 요청하고, 작업이 완료되면 디바이스는 인터럽트를 발생시켜 CPU에게 완료를 알린다.블로킹과 논블로킹블로킹블로킹이란 특정 작업이 완료될 때까지 스레드가 대기 상태로 전환되는 것을 .. 2026. 2. 23. 동시성 프로그래밍과 성능 소프트웨어 개발을 하다 보면 동시성(Concurrency)이란 용어를 많이 듣게 된다. 그런데 동시성이 무엇인가요?, 병렬성과 어떤 차이가 있나요? 라고 물어보면 쉽게 답하기 어렵다. 동시성은 꽤나 복잡한 개념이기 때문이다.이 글에서는 동시성의 개념과 성능을 정량화하는 방법, 그리고 동시성이 성능을 개선하지는 않는 두 가지 상황을 살펴본다. 글의 상당 부분은 과 을 참고했다.동시성동시성(Concurrency)은 여러 작업을 동시에 처리하는 개념을 의미한다. 흔히 동시에 처리한다고 하면 여러 작업을 같은 순간에 실행하는 병렬성(Parallelism)을 떠올린다. 하지만 두 개념은 엄밀히 다르다.병렬성은 멀티코어를 가진 프로세서가 각각 다른 작업을 동시에 수행하는 물리적인 개념이다. 반면 동시성은 한 번에 .. 2026. 2. 17. 왜 Agent Skills가 인기일까? 최근 Skills(Agent Skills)라는 용어가 주목받고 있습니다. Vercel, Anthropic, OpenAI와 같은 기업들에서도 Skills를 오픈소스로 공개하고 있습니다.이번 글에서는 컨텍스트와 Skills에 대한 이야기를 해보려고 합니다.컨텍스트란 무엇인가?Claude Code, Cursor로 개발해본 경험이 있으시다면 컨텍스트(Context)라는 용어를 들어보셨을 겁니다.컨텍스트는 모델이 답변을 생성하기 위해 참고하는 데이터이며, 컨텍스트의 크기는 제한되어 있습니다. 따라서 답변 속도와 성능을 높이려면 컨텍스트의 불필요한 데이터를 최소화해야 합니다.컨텍스트는 어떻게 관리되는가?컨텍스트 관리 방식은 크게 두 가지로 분류할 수 있습니다.1. 정적 컨텍스트정적 컨텍스트는 모델의 컨텍스트에 기본.. 2026. 2. 11. React에서 D3.js를 사용할 때 어떻게 DOM 조작하는게 좋은가? 서론처음으로 React에서 D3(D3.js)를 사용할 때 들었던 궁금점은 "D3와 React 중 어느 쪽에서 DOM을 제어할 것인가?"였습니다. React와 D3 모두 DOM을 변경할 수 있기 때문입니다.이번 글에서는 React에서 D3를 사용하는 방식에 대해 이야기해보려고 합니다.D3.js란 무엇인가?D3는 Data-Driven Documents의 약자로 이름 그대로 데이터 시각화를 위한 라이브러리입니다. D3는 차트를 그리는 기능뿐만 아니라, 데이터 시각화를 위한 수학적인 계산을 처리하는 기능도 함께 제공합니다. (예시: d3-scale)이제 React 환경에서 D3를 사용하는 방식을 알아봅시다.React에서 D3 사용하기D3로 DOM 조작하기useRef로 빈 컨테이너를 생성하고, useEffect.. 2026. 1. 17. React에서 모달 UI 상태 관리에 대한 고찰 서론React에서 모달과 같은 UI는 주로 useState로 상태를 관리하는 예시가 많다. 하지만 관리해야 하는 모달의 개수가 증가할수록 코드의 복잡해진다.이번 글에서는 모달에 대한 상태 관리를 이야기해보려고 한다.모달의 상태관리모달의 상태를 관리하는 대상을 객체로 생각해 보면, 책임을 두 가지 정도로 정의해볼 수 있다.모달의 표시(열림/닫힘) 상태를 알고 있다.모달의 표시 여부를 변경할 수 있다.이 책임을 기반으로 React에서 모달의 상태를 관리하는 방법을 살펴보자.지역 상태지역 상태 방식은 모달을 사용하는 컴포넌트에서 상태를 관리한다. 예시는 다음과 같다.function Component() { const [isOpen, setIsOpen] = useState(false); const openM.. 2025. 8. 16. npm과 pnpm의 차이점 알아보기 서론JavaScript로 프로젝트를 관리할 때, 주로 패키지 매니저로 npm을 사용한다. 특히 React와 같은 유명 패키지에서도 설치 방법을 npm을 기반으로 설명하는 경우가 많다.소규모 프로젝트에서 npm은 적합할 수 있다. 하지만 의존하는 패키지가 많아질수록 물리적인 디스크 사용량이 증가하여 설치 속도가 저하되는 문제를 맞이하게 된다. 이러한 문제를 해결하기 위해 pnpm과 같은 새로운 패키지 매니저들이 등장했다.이번 글에서는 npm의 단점과 pnpm이 이를 해결하는 방법을 소개하려고 한다.npm의 단점유령 의존성(Phantom Dependency) 문제npm은 디스크 사용량을 줄이기 위해 동일한 버전의 패키지는 중복으로 설치하지 않는다.# package.json{ "name": "hello_wo.. 2025. 7. 20. React Streaming SSR 직접 만들어보기 안녕하세요. React Streaming SSR을 직접 구현해 보는 프로젝트를 만들게 되어 공유해 봅니다.Node.js 환경에서 React Server API 기반으로간단하게 Streaming SSR을 구현하는 방법을 소개합니다.상세한 내용은 아래 링크를 확인 부탁드립니다.기여는 언제든지 환영입니다!Github: https://github.com/mugglim/build-your-own-react-streaming-ssr홈페이지: https://mugglim.github.io/build-your-own-react-streaming-ssr Build Your Own React Streaming SSRBuild Your Own React Streaming SSR 밑바닥부터 구현해보기mugglim.github.. 2025. 4. 30. TanStack Query 직접 만들어보기 (React Query 직접 만들어보기) 안녕하세요.TanStack Query를 직접 구현해보는 프로젝트를 만들게 되어 공유해봅니다.https://github.com/mugglim/build-your-own-tanstack-query GitHub - mugglim/build-your-own-tanstack-query: Build your own TanStack Query and useQuery hookBuild your own TanStack Query and useQuery hook. Contribute to mugglim/build-your-own-tanstack-query development by creating an account on GitHub.github.com실제 TanStack Query 코드와 100% 일치하지 않지만 전체적.. 2025. 2. 15. TanStack Query의 FocusManager는 무엇일까? (근데 이제 refetchOnWindowFocus 옵션을 곁들인) 글을 들어가며본 글에서는 TanStack Query에서 제공하는 FocusManager를 기반으로, useQuery의 refetchOnWindowFocus 옵션의 원리를 소개하고자 한다.FocusManager는 무엇인가?The FocusManager manages the focus state within TanStack Query - TanStack Query 공식문서FocusManager는 TanStack Query 내부에서 사용되는 focus 상태를 관리하는 대상으로 설명되어 있다.FocusManager는 어떻게 구현되어 있을까?FocusManager 클래스로 구현되어 있는 객체이다. FocusManager 클래스는 옵저버 패턴을 기반으로 구현되어 있으며, Subscribable 클래스를 상속받고 있.. 2024. 10. 26. 상태 관리와 zustand (zustand 동작 원리를 이해하기) 글을 들어가며본 글에서는 상태 관리에 대한 개념을 소개하고, zustand의 구현 코드를 기반으로 동작 원리를 살펴보려고 한다. 글 내용 중 zustand 코드는 v5 버전을 기준으로 작성되었다.상태와 상태 관리프론트엔드 영역에서 상태란 UI를 표현하기 위해 사용되는 데이터이다. 상태는 시간에 따라 변화될 수 있는 값이다. 상태 관리는 상태 데이터를 관리하는 객체라고 정의하여, 상태 관리 객체의 책임을 생각해보자. 책임은 더 다양할 수 있지만, 4가지 정도로 정의할 수 있다.최신 상태를 알고 있다.최신 상태를 반환할 수 있다.상태를 변경할 수 있다.상태가 변경될 때, 변경된 상태를 전파할 수 있다.상태 관리 객체의 책임을 기억하며, zustand 코드를 살펴보자.zustandzustand는 flux 패턴.. 2024. 10. 12. 이전 1 2 다음
