프론트엔드 개발을 하다 보면 한 번쯤 이런 질문을 하게 됩니다. "왜 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)**에 쌓입니다. 실행이 끝나면 해당 컨텍스트는 스택에서 제거되고, 내부의 지역 변수와 매개변수도 함께 사라집니다.즉, 함수형 컴포넌트가 렌더링될 때마다:새로운 실행 컨텍스트가 스택에 생성되고,함수 내부에서 선언된 변수들은 그 안에 저장되지만,렌더링이 끝나면 ..

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

https://www.acmicpc.net/problem/11444인사이트이번 문제는 우리들이 사랑하는 피보나치 수열이다. 피보나치 수열이 골드2까지 난이도가 책정된 이유에는 입력값의 크기 제한에 있다. 일반적으로 1초에 대략 1억번 정도의 연산이 처리된다는 것을 감안하면, 입력값의 최대값이 1000억이기 때문에 dp를 사용해서 O(N)의 시간 복잡도로 처리해도 시간 초과가 날 것임을 예상할 수 있다. 그렇기 때문에 피보나치 수열의 일반항으로는 어떤 짓을 해도 시간초과를 해결할 수 없을 것이다. 해서, 이 피보나치 수열의 일반항에서 시간 처리를 극적으로 줄일 점화식을 고안해내야 한다. 여기서 한가지 더 생각해보면 1000억이란 숫자를 1억 내로 안정적으로 줄이려면 제곱근으로 접근하는 것 외에는 거의 방법..

https://www.acmicpc.net/problem/17114문제 해설이번 하이퍼 토마토 문제는 지난 토마토 문제에서 배열의 깊이가 2차원에서 11차원으로 변형된 심화 문제입니다.  [백준 / BOJ] 7576번 토마토 ( Node js / Javascript )https://www.acmicpc.net/problem/7576  문제 풀이토마토는 BFS의 대표 문제들 중 하나입니다. 만약 BFS 혹은 그래프 탐색 자체에 대한 지식이 부족하다면 아래 링크를 참고하시길 바랍니다. 너비 우선 탐dnd0707.tistory.com 언뜻 보기에는 11차원이라는 말도 안되는 조건 때문에 괴랄해 보이겠지만 사실은 보이는 것 만큼의 난이도를 가진 문제는 아닙니다. 만약 만약 x축이 이동할 때 동시에 y축도 이동이..