들어가며최근 AWS에 서비스를 배포하고 데이터베이스에 접속하는 업무를 하면서, 단순히 “서버에 프로그램을 올린다”는 이해만으로는 전체 구조를 파악하기 어렵다는 것을 느꼈습니다. EC2, Nginx, 로드 밸런서, 대상 그룹, 보안 그룹, Route 53까지. 각각의 용어도 낯설었지만, 무엇보다 이 구성요소들이 서로 어떻게 연결되어 하나의 서비스를 만드는지 이해하는 것이 어려웠습니다. 이 글은 그 과정에서 제가 겪은 어려움과, 하나씩 공부하며 얻은 인사이트를 정리한 개인적인 학습 기록입니다. 체계적인 AWS 입문서라기보다는 실제 업무에서 궁금했던 점을 따라가며 이해한 내용을 풀어놓은 글에 가깝습니다. 경험에서 얻은 생각들을 정리하다 보니 내용이 다소 두서없이 나열되거나 비슷한 설명이 반복될 수 있습니다. ..

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..