React에서 부모-자식 컴포넌트 간 통신의 핵심은 콜백 props 패턴입니다. 이 글에서는 전체 동작 원리를 단계별로 살펴보고, JavaScript의 "함수는 값이다"라는 핵심 개념부터 TypeScript 타입 시스템, 성능 최적화까지 깊이 있게 다룹니다. 전체 흐름 한눈에 보기이 흐름을 이해한 다음, JavaScript의 "함수는 값이다"라는 핵심 개념을 봐야 합니다. 1. 출발점: "함수는 값이다"이 패턴을 이해하려면 JavaScript의 핵심 성질 하나를 먼저 받아들여야 합니다. JavaScript에서 함수는 숫자나 문자열처럼 값(value) 으로 취급됩니다. 변수에 담을 수 있고, 다른 변수에 대입할 수 있고, 함수의 인자로 넘길 수 있습니다.// 함수를 변수에 담는다const greet =..

프론트엔드 개발을 하다 보면 한 번쯤 이런 질문을 하게 됩니다. "왜 Webpack 대신 Vite를 사용하는 걸까?""Vite는 왜 그렇게 빠른 걸까?" 이 질문에 제대로 답하려면 번들링(Bundling), JavaScript 모듈 시스템, 그리고 브라우저의 ES Module 지원까지 이해해야 합니다. 단순히 "Vite가 빠르다"는 사실을 넘어, 왜 빠른지 그 구조적인 이유를 이해하면 도구를 훨씬 더 잘 활용할 수 있습니다. 이 글에서는 JavaScript 모듈의 역사부터 Vite의 내부 동작 원리까지 차근차근 살펴보겠습니다.1. JavaScript에는 원래 모듈 개념이 없었다초기의 JavaScript는 모듈 시스템이 존재하지 않았습니다. 당시에는 HTML에 예를 들어 다음과 같은 코드가 있다고 가정해보..

0. 목차서론DOM(Document Object Model)이란?Virtual DOM이란?렌더링과 페인팅의 차이Virtual DOM의 Diffing 알고리즘실제 DOM의 수정은 어떻게 일어나는가?결론1. 서론프론트엔드 개발을 공부하면서 처음에는 “어차피 부모가 리렌더링되면 자식도 다 같이 리렌더링 되는 거 아닌가? 그렇다면 Virtual DOM을 쓸 이유가 뭐지?”라는 의문이 있었습니다.지금 생각해보면 그건 제가 React의 “렌더링(rendering)”과 브라우저의 “페인팅(painting)”을 명확히 구분하지 못했기 때문이었습니다. 이번 글에서는 그 과정을 정리하면서, DOM과 Virtual DOM, 그리고 실제 DOM이 어떻게 수정되는지에 대해 이해한 내용을 공유해 보겠습니다.2. DOM(Docum..

0. 목차초창기 React: 함수형 vs 클래스형컴포넌트의 한계Hook의 등장1. 초창기 React: 함수형 vs 클래스형React가 처음 나왔을 때, 컴포넌트에는 두 가지 방식이 있었습니다. 함수형(Function) 컴포넌트function Hello(props) { return Hello, {props.name};} 자바스크립트에서 함수가 호출되면, 그 실행 과정은 실행 컨텍스트(Execution Context) 라는 단위로 **스택(Stack)**에 쌓입니다. 실행이 끝나면 해당 컨텍스트는 스택에서 제거되고, 내부의 지역 변수와 매개변수도 함께 사라집니다.즉, 함수형 컴포넌트가 렌더링될 때마다:새로운 실행 컨텍스트가 스택에 생성되고,함수 내부에서 선언된 변수들은 그 안에 저장되지만,렌더링이 끝나면 ..

0. 목차개요npm이 뭐에요?package.json, node-modules, package-lock.jsonnpm / pnpm / npx 의 차이package.json 구성monorepo ( workspaces )1. 개요최근 폐쇄망 개발 프로젝트에 투입되면서, 독특한 개발 환경 설정 과정을 직접 경험했고 그 과정에서 npm에 대한 다양한 정보를 얻게 되었습니다. 이번 글에서는 그 경험을 기록해두려 합니다. 특히, Nexus에 자체 npm registry를 띄워 프로젝트의 기본 저장소로 설정하고, 모듈 파일을 직접 Nexus에 업로드하는 등 평소라면 접하기 어려운 절차를 거쳤습니다. 이러한 비일상적인 과정 속에서 뜻밖의 인사이트도 많이 얻을 수 있었습니다.2. npm이 뭐에요?npm(Node Pack..

입사 후 1년2024년 7월 22일, 첫 회사에 입사해 C# 엔지니어로 일한 지 어느덧 1년이 지났다. 1년 동안 시뮬레이션 모델을 개발하며 여러 프로젝트에 참여했고, 그 과정에서 기술 외에도 많은 것을 배웠다. 커뮤니케이션 능력 반년 넘게 ‘엔진 고도화’ 프로젝트를 진행하면서 고객과 거의 매일 대화를 나눴다. 그 과정에서 커뮤니케이션 능력이라는 것이 단순히 말을 잘하는 것을 뜻하지 않는다는 걸 절실히 느꼈다. 신기하게도 같은 한국말을 쓰고 있지만, 고객과 개발자의 언어는 달랐다. 고객은 현업의 용어로 이야기했고, 개발자인 나는 변수명과 컬럼명으로 설명했다. 서로 같은 이야기를 하면서도 엇갈리는 순간이 많았다. 그럴 때마다 대화의 목적과 문맥을 먼저 이해하려고 노력해야 했고, 내 언어를 그들의 언어로 ..