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

서론SPA의 정의 및 기본 개념SPA(Single Page Application)는 단일 HTML 페이지로 구성된 웹 애플리케이션을 의미합니다. 사용자가 웹 페이지를 탐색할 때, 전체 페이지를 다시 로드하지 않고 현재 페이지 내에서 필요한 콘텐츠만 동적으로 로드하여 빠르고 원활한 사용자 경험을 제공합니다. 이는 주로 JavaScript 프레임워크와 라이브러리를 활용하여 구현됩니다. SPA의 동작 원리기존의 다중 페이지 애플리케이션(MPA)에서는 사용자가 다른 페이지로 이동할 때마다 서버로부터 새로운 HTML 페이지를 받아오고 전체 페이지를 새로 고칩니다. 반면에 SPA에서는 처음에 한 번만 전체 페이지를 로드하고, 이후의 페이지 전환은 서버와 비동기적 통신(AJAX)을 통해 필요한 데이터만 받아와 화면을..

https://www.acmicpc.net/problem/10986누적합(prefix sum)먼저 누적합이란 나열된 수의 누적된 합을 말한다. 만약 [1, 2, 3, 4, 5] 라는 배열이 있고, 이 배열을 누적합으로 나타낸다면 [1, 3, 6, 10, 15] 가 된다. 보통 반복문을 통해 `0번 index부터 4번 index까지의 누적합`을 구한다면 5번의 수행동작이 필요하다. 즉 O(N)의 시간 복잡도를 갖는 것이다. 하지만 누적합을 사용하여 `0번 index부터 4번 index까지의 누적합`을 구한다면 누적합 배열의 4번 index 값을 꺼내오기만 하면 되기 때문에 O(1)의 시간 복잡도를 갖는다. 그렇다면 `2번 index부터 4번 index까지의 누적합`을 구하기 위해서는 어떻게 해야할까? (1..