JS에 관하여

박지성 ·2025년 6월 15일

-1. 시작하기 전에

참고:
JAVA랑 완전 다른 언어.
햄과 햄스터의 관계 (조코딩)

여담:
Java의 유명세를 타서 흥하려고 의도적으로 그렇게 작명한 것이다. (나무위키)

나무위키_JavaScript
공부를 시작하기 전 꼭 읽어보자. 30분 공부한 느낌이 든다.

HTML CSS JS

짤로 대체한다

0. JavaScript??

자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다

스크립트(JavaScript)는 동적이고, 인터프리트(interpret, 해석) 방식으로 실행되는 고급 프로그래밍 언어다. C나 C++ 같은 언어가 직접 기계어로 컴파일되어 실행되는 반면, JS는 주로 브라우저나 JS 엔진에서 즉시 해석되어 실행된다.

역사는 나무위키-JavaScript-역사
정의를 하나씩 이해해봐야겠다

1. 인터프리터와 컴파일

인터프리터와 컴파일 유튜브 - 개꿀잼

언어	실행방식	설명
C, C++	컴파일 방식	소스코드 → 어셈블리어 → 기계어 → 실행
JavaScript	인터프리트 방식 (JIT)	소스코드 → JS 엔진 해석 및 최적화 → 실행

우선 우리의 컴퓨터는 기계어만 이해하고 처리할 수 있다.

따라서 우리가 작성한 고급언어, 즉 프로그래밍 언어를 기계어로 바꾸는 작업이 필요하다.
이런한 작업을 수행하는 방법은 번역하는 방식에 따라 크게 2가지로 나뉜다.

바로바로

컴파일러(Compiler)
인터프리터(interpreter)

- 컴파일러(Compiler) -

작성된 코드를 한번에 기계어로 바꾸어 처리하는 방식
즉 작성된 모든 코드를 한꺼번에 기계어로 바꾼다

- 인터프리터(interpreter) -

프로그램 코드를 한 줄씩 번역하여 기계어로 바꾸는 작업을 한다

- 차이점을 비교해보기 -

1. 컴파일 언어(c언어)의 실행과정을 보자
1. .c파일 작성
2. 개발자가 Gcc같은 컴파일러 사용
3. 컴파일러가 코드를 기계어로 번역
4. 생성된 .exe파일을 실행 (운영체제가 실행)

2. 인터프리터 언어(JS)의 실행과정을 보자
1. .js 또는 <script> 태그에 작성
2. 브라우저 또는 Node.js가 소스코드를 받는다 (중요)
3. 브라우저 또는 Node.js가 기계어로 번역한다
4. 브라우저가 번역된 기계어를 직접 실행한다!

중요! 이 과정을 통해서 알 수 있는 것이 뭐냐!

우리가 배웠던 C언어는 번역은 Gcc 컴파일러가 수행하고 실행(exe)은 운영체제가 한다!

그럼 Javascript는??

번역은 브라우저 안에 있는 V8엔진이 수행하고, 실행은 브라우저가 한다!

물론 인터프리터언어와 컴파일 언어의 차이의 핵심은 이게 아니지만, 어떤 방식으로 작동하고 돌아가는지 알고 싶어서 알아봤다!

2. V8엔진과 Node.js

V8 : 구글이 개발 중인 JIT 타입 자바스크립트 엔진

V8엔진의 역할은
1. JS 소스코드를 분석해 문법 구조를 이해한다.
2. 컴파일을 진행한다. (JS -> 바이트코드 -> 기계어)
3. 번역한 코드는 CPU가 실행해준다.

따라서 브라우저 Chrome는 V8엔진으로 JS를 실행한다!

Node.js : V8 엔진을 기반으로 만든 JS 런타임 환경으로, 브라우저가 아닌 서버나 CLI에서 JS를 실행할 수 있게 해준다!

원래 JavaScript는 브라우저 전용 언어였다.
그러나 왜 브라우저에서만 써야하는가?

JS로 다른 언어처럼 서버도 만들고, 다 하고 싶은데?

짜잔!

(V8)을 첨가한 Node.js의 등장!!

야호~ 이제 브라우저 없이 JS를 돌릴 수 있다!!!

Node.js의 구성요소

구성 요소 또한 한번 알아보자

구성 요소	설명
V8 엔진	JS 코드 → 기계어로 변환해서 실행 (구글 크롬의 JS 엔진)
libuv	비동기 I/O 처리 (파일, 네트워크, 타이머 등)
C++ 바인딩	JS 코드와 시스템 자원(파일, TCP 등)을 연결
Node API	개발자가 사용하는 `fs`, `http`, `path` 등의 모듈

자세한 내용은 직접 공부해보자!!

아 물론 JS 엔진이 V8만 있는 것은 아니다. chrome랑 node.js가 V8을 사용하고 있다.

3. npm

Node Package Manager의 약자로, 이름 그대로 전 세계의 자바스크립트 개발자들이 만든 다양한 기능의 코드 묶음(패키지)들을 관리하고 공유하는 도구이자 플랫폼

Node.js를 설치하면 자동으로 같이 설치된다.

주요 기능

패키지 매니저
남이 만든 좋은 코드를 쉽게 가져다 쓰기
공유된 패키지 저장소
온라인 저장소로 전세계 개발자들이 만든 코드를 쓸 수 있도록 모아뒀음 (온라인 코드 도서관)
스크립트 실행
프로젝트에서 반복적으로 사용하는 명령어들을 스크립트로 등록하고 실행할 수 있다.
make check 같은 것. 즉 "미리 약속된 명령어를 실행하는 단축키"

비슷한 친구들도 있다.

이름	언어	설명
npm	JavaScript (Node.js)	Node.js의 기본 패키지 관리자. 가장 거대한 생태계를 자랑합니다.
Yarn	JavaScript (Node.js)	`npm`의 속도와 안정성을 개선하기 위해 페이스북에서 만들었습니다. `npm`과 호환되며, 더 빠르고 안정적인 의존성 관리를 제공했습니다.
pnpm	JavaScript (Node.js)	`npm`과 `Yarn`의 장점을 합치고 디스크 공간 효율성을 극대화했습니다. 중복되는 패키지를 한 곳에 저장하고 링크로 연결하여 디스크를 절약하고 설치 속도가 매우 빠릅니다. 최근 많은 인기를 얻고 있습니다.
Pip	Python	파이썬의 기본 패키지 관리자입니다. 파이썬 라이브러리(예: `requests`, `TensorFlow`)를 설치하고 관리합니다.
Maven/ Gradle	Java	자바 프로젝트의 빌드와 의존성 관리를 책임집니다. 라이브러리를 다운로드하고 컴파일, 테스트, 배포 과정을 자동화합니다.
RubyGems	Ruby	루비 언어로 만들어진 패키지(Gem)를 관리합니다.
Composer	PHP	PHP 프로젝트의 의존성을 관리하는 도구입니다.

시스템 패키지 관리자도 있다.

이름	운영체제	설명
Homebrew	macOS (Linux도 지원)	"macOS용 필수 패키지 관리자"로 불립니다. `npm`을 설치하기 위한 `Node.js` 자체를 Homebrew로 설치할 수 있습니다. 파이썬, 데이터베이스 등 다양한 개발 도구와 프로그램을 명령어 한 줄로 설치/업데이트/삭제할 수 있습니다.
APT	Debian / Ubuntu 계열 Linux	`apt-get` 명령어로 잘 알려져 있습니다. 우분투 리눅스에서 소프트웨어를 설치하고 관리하는 표준 도구입니다.
YUM / DNF	Red Hat / CentOS / Fedora 계열 Linux	Red Hat 계열 리눅스의 표준 패키지 관리자입니다.
Chocolatey	Windows	윈도우 환경에서 커맨드 라인으로 소프트웨어를 설치하고 관리하게 해주는 도구입니다. Homebrew나 apt의 윈도우 버전이라고 생각할 수 있습니다.

패키지 관리자에 대해서 알고가면 좋을 것 같아 정리했다.

4. 서버 (server)

네트워크를 통해 다른 컴퓨터(클라이언트)에게 특정 서비스나 데이터를 제공하는 컴퓨터 또는 프로그램

서버가 되기위한 조건
1. 24시간 켜져있야한다.
2. OS가 있어야한다.
3. 네트워크 연결이 되야한다. (OS에서 해당 조건을 만족)
4. 요청을 처리하는 코드가 있어야한다.

서버는 요청을 받으면 규칙에 따라 처리하고 응답을 보내줄 수 있어야한다!!!

근데
항상 햇갈렸던 부분이 있다.

웹서버, API서버, WAS서버 등등
지금 내가 만들고 있는게 어떤 서버인지 항상 잘 몰랐다.

그러니까 정리해보자.

크게 2가지로 나눠보자.
1. WAS
2. 웹서버

WAS

사용자 요청에 따라 동적으로 데이터를 생성해 응답하는 서버 (애플리케이션 로직 처리)

브라우저의 JS코드에서 was서버로 특정 함수에 대한 요청을 한다.
was서버가 열심히 코드를 돌린다.
결과를 전달한다.

웹서버

HTML, CSS, JS 같은 정적인 웹 자원을 브라우저에 전송하는 서버

웹 브라우저가 (HTML, 이미지, JS 등)을 요청한다.
웹 서버가 index.html, logo.png등 파일을 전달한다.

왜 웹서버 뒤에 WAS가 있을까?

WAS서버에 나눠서 요청할 수도 있고
WAS서버를 웹서버 뒤에 숨길 수도 있다!!!

일단 알아만 두자!!!

궁금하면 공부해보자!!!

5. 라이브러리와 프레임워크

서버의 개념을 적용하기 전에 미리 알아두고 가자!!

- 라이브러리 -

프로그램 개발에 필요한 기능이나 코드 조각들을 모아놓은 모음

개발에서는 정보의 저장소라는 의미
예를 들어, 수학 관련 함수들만 모아서 정리하면 이것이 라이브러리이다.

사용자는 함수단위로 필요한 기능을 쉽게 가져다 쓸 수 있다.

중요한 것은 내가 함수를 호출하는 것. 코드가 사용자 맘대로 내 중심의 흐름이다.

- 프레임 워크 -

전체적인 구조를 프레임 워크가 짰음.

전체적인 구조와 틀을 제공하는 것이 프레임 워크
코드의 흐름 또한 프레임워크가 주도한 방향으로 흐름

사용자는 틀에 맞춰 필요한 코드를 채우는 방식
따라서 특정한 폴더 구조나 파일 설계가 요구된다.

정리해서 보면

라이브러리는 내 코드가 라이브러리를 사용하고
프레임워크는 프레임워크가 내 코드를 사용한다.

- 코드로 이해해보자 -

내가 직접 함수를 호출해서 쓴다. (라이브러리)

int add(int a, int b) {
    return a + b;
}


int main() {
    int result = add(1, 1);  // 내가 라이브러리 함수를 직접 호출
    printf("Result: %d\n", result);
    return 0;
}

run_framework가 프로그램을 주도한다
함수 호출도 프레임워크가 필요할 때 호출한다.

void run_framework(int (*callback)(int, int)) {
    printf("Framework 시작...\n");
    int result = callback(1, 1);  // 사용자가 넘긴 함수를 호출
    printf("결과: %d\n", result);
}

int my_add(int a, int b) {
    return a + b;  // 프레임워크가 호출할 함수
}

int main() {
    run_framework(my_add);  // 프레임워크 실행
    return 0;
}

이런 느낌이다.

추가 - pintos
pintos를 할 때 함수를 불러서 쓰고, 자료구조 list.c, hash.c 등을 불러서 쓰는걸 라이브러리라고 이해하면, pintos자체를 프레임워크로 볼 수 있다. 기본적인 실행 흐름이 정해져 있고, 우리가 짜야하는 코드는 함수만 짜면되고, 위치 또한 정해져 있으니 프레임워크로 이해할 수 있다.

6. JS의 프레임워크

처음 공부하면 가장 짜증 나는 것이 너무나 많은 프레임워크와 라이브러리들이다.
Express, Next, Nest, react등등 구분하기도 어렵다

하나씩 살펴보자.

- Node.js -

Node.js는 JavaScript를 브라우저 밖에서 실행할 수 있게 해주는 "런타임 환경"

Node.js = "서버를 만들 수 있는 JS 실행 환경"
또한 자체적으로 웹서버 기능이 내장되어 있어 웹서버 역할도 가능하다!!

따라서 Node.js는 웹 서버 기능 + WAS 기능을 모두 직접 구현 가능한 환경!!!!

- 프레임워크가 왜 필요할까? -

왜 필요할까? 순수한 Node.js의 기본 모듈인 Http으로만 서버를 만드는 것은 자동차를 나사와 철판만으로 만드는 느낌이다. 가능은 하지만 매우 힘들고 어려운 작업이 될 것이다.

이때 프레임 워크를 사용하면 기본적인 뼈대가 만들어져 있고. 편의 기능을 제공해서 쉽고 빠르게 서버를 만들 수 있다!!!

- Express -

Node.js의 HTTP 기능을 더 쉽게 사용하게 해주는 프레임워크
REST API 서버, 간단한 WAS 구축용

핵심 기능을 알아보자.

1.라우팅

깔끔한 길 찾기 기능이다.
사용자 요청 URL에 따라 어떤 작업(함수)를 수행할지 연결해주는 기능이다.
순수 Node.js에서는 if/else를 통해서 하나하나 복잡하게 처리해야하지만 Express에서는 URL만 적어주면 알아서 이동해준다.

const server = http.createServer((req, res) => {
    if (req.method === 'GET' && req.url === '/') {
        // 메인 페이지 로직
    } else if (req.method === 'GET' && req.url === '/users') {
        // 사용자 목록 보기 로직
    } else if (req.method === 'POST' && req.url === '/users') {
        // 사용자 생성 로직
    } else {
        // 404 에러 처리
    }
});

이런이런 언제 이러고 있습니까.

const app = express();

app.get('/', (req, res) => { /* 메인 페이지 로직 */ });
app.get('/users', (req, res) => { /* 사용자 목록 보기 로직 */ });
app.post('/users', (req, res) => { /* 사용자 생성 로직 */ });

딸깍.

2.미들웨어

초 핵심 기능.

요청(Request)  ->  [미들웨어1]  ->  [미들웨어2]  ->  ...  ->  최종 처리(Response)

요청이 최종 처리 함수 도착전에 사이사이 지나가는 함수들.
1. 로그 남기기
2. 사용자 인증하기
3. 오류 처리하기 등.

3. 단순화된 요청/응답 객체

그냥 딸깍으로 코드를 짤 수 있다는 말.
1번과 같은 느낌

- Nest.js -

Express는 기초적인 뼈대 위에서 높은 자유도로 맘대로 만들 수 있다.
하지만. 개발자가 여러 명이면 규칙이 없어서 혼란이 생길 수 있다!

헉

그럼 모양까지 미리 만들어 놓고, 규칙까지 미리미리 정해두면 되는거 아닌가?!?!

짜짠!

Nest.js!!
모듈이 미리 설계되어 있고 역할도 다 정해져 있다!!
개발자는 정해진 부품을 찾는 것 처럼 개발하면 된다!!!
따라서 누가 개발하든 일관성있고, 체계적이고, 확장이 쉽다!!!!!!!

핵심 기능을 알아보자!

1. 아키텍쳐

그냥 원칙으로 분리를 잘 해뒀다.
잘 지켜라

2. 타입스크립트 기반

오류를 잡아주는 깐깐한 TS로 써라.
JS는 오류를 실행 전까지 못잡는다.

3. 데코레이터

@ 기호를 써라.
코드가 깔끔해진다.

- 결론 -

Express는 하나의 파일에 모든 로직을 짤 수 있지만.
Nest.js는 역할에 따라 파일이 분리되어 있고, 깐깐하다.

Node.js와 WAS서버에 대해서는 대충 알아봤으니까

React는 따로 알아보자.

7. 프레임워크와 서버

한번 정리해보자.
틀린 부분이 있을 수도 있다.

웹서버 역할을 nginx 또는 node.js 기본 모듈이 역할을 한다.
WAS의 기능은 node.js 런타임 위에 Express.js 또는 Nest 프레임 워크로 만든다.
물론 프레임 워크 없이 node.js만 써서 가능하긴 하다.
node.js 기본 모듈로 웹서버의 역할을 한다면, 하나로 합쳐진 상태로 볼 수 있다.

요런 느낌.

근데 궁금증이 하나 생긴다.
Node.js 기본모듈(http)로 가능한데 왜 nginx를 써야할까?
속도, 성능, 보안, 트래픽 분산등 많은 장점이 있기 때문이당.

Next.js와 Nest.js를 같이 쓰는 경우를 보면 그림과 같다고 볼 수 있다.

Next.js : 페이지 렌더링(SSR/SSG), 정적 파일, 라인트한 API 처리
Nest.js : 백엔드 API 서버, DB 연동, 인증, 로직 처리

정리!!!!

가장 중요한 것은 Node.js
하지만 이걸 어떤 방식으로 쉽게 사용할지 정하는 것이 프레임워크
Node.js가 기본적으로 웹서버 + API 서버가 모두 가능하기 때문에 프레임워크들이 웹서버 + WAS의 기능을 모두 할 수 있다.

다만 어떤 기능에 중점을 두고 만들었는가에 따라 해당 취사선택하여 사용하면 될 것 같다.

따라서 아키텍쳐 구조나, 어떤 프레임워크를 사용할지는 해당 프레임워크가 어떤 이유로 만들어지고, 어떤 기능이 핵심인지 알아보고 적용하면 된다.

이걸 모르면 면접에서 말을 하지 못 할것 같다 왜 쓰는지는 꼭 알아보자.

질문	설명
Node.js가 모든 걸 할 수 있다	Node.js만으로 웹서버, API, 정적 파일 전부 가능
하지만 웹서버는 Nginx가 더 잘한다	속도, 캐시, 보안, 정적 리소스 처리 모두 Nginx가 강함
프레임워크는 목적에 따라 나뉜다 (Nest/Next)	Next는 페이지 중심, Nest는 백엔드 API 중심
Node.js 기반이라 기능이 조금 섞여있다	Next도 API 가능, Nest도 웹서버 역할 가능하지만 "주력 기능"이 다름

가능과 적합을 구분하자.

8. JSX, DOM

React를 알아보기 전에 알아야하는 개념이다.

JSX

JSX : 자바스크립트 안에서 HTML처럼 생긴 문법을 쓸 수 있게 해주는 문법

JS안에서 UI가 어떻게 생겼는지 HTML과 유사한 형태로 작성할 수 있게 해준다!

어?

그럼 UI를 그리는 코드랑 JS로직을 하나의 파일 안에서 직관적으로 작성할 수 있다.

이걸 이해해야 SSR을 이해하기 쉽다!!

DOM

DOM : HTML 문서를 브라우저가 객체 구조로 표현한 트리 구조

브라우저가 HTML 문서를 읽은 뒤, JavaScript가 이해하고 조작할 수 있도록 메모리상에 만들어 놓은 '가상의 모델 하우스' 라고 생각할 수 있다.

우리가 브라우저에서 보는 화면은 모델 하우스의 모습이라고 할 수 있다.
JS는 모델 하우스를 마음대로 바꿀 수 있는 디자이너라고 볼 수 있다.

JS가 인테리어를 바꾸면 우리는 바뀐 모델 하우스를 보는 것이다!!!

아. HTML은 설계도. 설계도를 보고 모델하우스를 만들어야하니까.

HTML (설계도) ↔ DOM (모델하우스) ↔ JavaScript (디자이너)

9. SSR, CSR, SSG

구분	SSR (서버 사이드 렌더링)	CSR (클라이언트 사이드 렌더링)	SSG (정적 사이트 생성)
렌더링 시점	사용자 요청 시	브라우저에서 (초기 로딩 후)	빌드 시 (미리 생성)
렌더링 장소	서버	클라이언트 (브라우저)	빌드 서버/개발자 컴퓨터
초기 로딩 속도	빠름	느림	가장 빠름
데이터 최신성	실시간	실시간 (클라이언트에서 요청)	정적 (빌드 시점 기준)
서버 부하	높음	낮음	거의 없음
SEO	매우 유리	불리 (개선 중)	매우 유리
비유	주문 즉시 요리하는 식당	재료만 배달되는 밀키트	미리 만들어 놓은 도시락
적합한 사이트	커머스, 뉴스, 커뮤니티	관리자 대시보드, 웹 앱	블로그, 기술 문서, 마케팅 페이지

SSR, CSR, SSG는 JSX로 만든 결과물을 사용자에게 전달하는 '전략'

- CSR -

- SSR -

Next.js는 이런 전략을 혼용하여, 페이지의 성격에 따라 가장 적합한 렌더링 방식을 선택할 수 있도록 하는 것.

10. React

React는 페이스북(현 메타)에서 개발한, 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리.

사용자 눈에 보이는 화면에 집중한 도구.
프레임워크 아님. 라이브러리임.

React는 복잡한 웹 UI를 '컴포넌트(Component)'라는 독립적인 부품 단위로 조립하여 만드는 JavaScript 라이브러리이다.

기본 HTML에는 <p>, <div>, <img> 같은 정해진 태그만 있다. 하지만 만약 우리가 <YoutubePlayer>, <KakaoMap>, <UserProfileCard> 같은 우리만의 똑똑한 HTML 태그를 만들 수 있다면 어떨까??

React는 바로 이것을 가능하게 해주는 기술. 이 '나만의 태그'가 바로 컴포넌트. 이전에 본 JSX는 이 컴포넌트(나만의 태그)의 모습과 동작을 정의하는 언어!!

똑똑한 태그가 될 수 있는 4가지 이유를 알아보자

1. 컴포넌트 (Component) - 재사용 가능한 나만의 부품

React의 모든 것은 컴포넌트 단위로 만들어진다. 예를 들어 '사용자 프로필 카드' 컴포넌트를 하나 잘 만들어두면, 어떤 사용자의 프로필이 필요하든 이 부품을 계속 재사용할 수 있다.

// <UserProfileCard> 라는 나만의 태그(컴포넌트)를 정의
function UserProfileCard(props) {
  return (
    <div className="card">
      <img src={props.imageUrl} alt="profile" />
      <h2>{props.name}</h2>
      <p>{props.job}</p>
    </div>
  );
}

// 필요할 때마다 재사용
function App() {
  return (
    <div>
      <UserProfileCard name="홍길동" job="개발자" imageUrl="gildong.png" />
      <UserProfileCard name="이순신" job="장군" imageUrl="sunsin.png" />
    </div>
  );
}

2. Props (Properties) - 부품에 '정보'를 전달하는 방법

위 예시에서 name, job, imageUrl이 바로 Props. 컴포넌트(부품)에 동적인 정보를 전달하여, 같은 부품이라도 다른 내용과 모습을 갖게 만들 수 있다. <UserProfileCard>라는 똑같은 태그가 '홍길동'의 정보와 '이순신'의 정보를 각각 다르게 보여주는 이유. Props는 부모가 자식에게 주는 값으로, 자식은 이를 바꿀 수 없다.

3. State - 부품이 갖는 '기억력' (내부 상태)

State는 컴포넌트가 내부적으로 기억하고 관리하는 데이터. 이 '기억' 덕분에 컴포넌트는 사용자와 상호작용할 수 있다.

import { useState } from 'react'; // React의 '기억력' 도구

function LikeButton() {
  // 'likes'라는 기억(State)을 만들고, 초기값을 0으로 설정
  const [likes, setLikes] = useState(0);

  function handleClick() {
    // 버튼을 누르면 기억(State)을 1 증가시킴
    setLikes(likes + 1);
  }

  return (
    <button onClick={handleClick}>
      👍 좋아요 {likes}
    </button>
  );
}

useState는 '기억'을 만드는 도구. 사용자가 버튼을 누르면 handleClick 함수가 실행되어 setLikes를 통해 likes라는 기억(State)을 바꾼다.

가장 중요한 점: React는 State가 바뀌면, 그 컴포넌트의 모습을 알아서 화면에 다시 그려준다. 이것이 React가 동적으로 작동하는 핵심 원리.

4. Virtual DOM - 똑똑한 '매니저'

State가 바뀔 때마다 화면 전체를 새로 그리는 것은 매우 비효율적. React는 Virtual DOM(가상돔)이라는 똑똑한 매니저를 통해 이 문제를 해결한다.

기억(State) 변경: '좋아요' 버튼이 눌려 likes State가 0에서 1로 바뀐다.
가상돔에 미리 그려보기: React는 실제 화면이 아닌, 메모리상의 가상 화면(Virtual DOM)에 변경된 모습을 미리 그려본다.
변경점 비교: 이전 가상돔과 새로운 가상돔을 비교하여, "아, 다른 건 다 똑같고 '좋아요' 숫자 0이 1로만 바뀌었네!" 라는 사실을 정확히 찾아낸다.
최종 반영: 이 최소한의 변경점('0'을 '1'로 바꾸는 작업)만 실제 화면(DOM)에 딱 한 번 적용한다.

11. 빌드(Vite)

빌드 : 개발용 코드를 배포용 코드로 변환하는 과정

우리는 JSX, TypeScript, 여러 파일로 나누어 import하는 모듈 시스템 등 편리한 최신 기술들을 사용하고 있다. 하지만 안타깝게도 웹 브라우저는 이런 코드들을 직접 이해하지 못한다.

빌드(Build)란, 개발자가 작성한 '개발용 소스 코드'를, 웹 브라우저가 이해하고 실행할 수 있는 '배포용 완성 파일'로 변환하는 전체 과정.

개발용 코드 (재료): JSX, TypeScript, 여러 개의 JS 파일, SCSS 등은 신선하지만 날것 그대로인 '재료'.

빌드 과정 (요리): 이 재료들을 다듬고, 익히고, 섞고, 보기 좋게 플레이팅하는 '요리' 과정.

배포용 코드 (완성된 음식): 브라우저라는 손님이 바로 먹을 수 있도록 최적화된 HTML, CSS, JavaScript '완성된 음식'.

- 빌드 과정에서 일어나는 주요 작업들 -

컴파일 & 트랜스파일 (Compile & Transpile):

JSX → JavaScript: React의 JSX 문법을 일반 JavaScript React.createElement() 함수 호출로 변환.
TypeScript → JavaScript: 타입이 있는 TypeScript 코드를 타입이 없는 일반 JavaScript로 변환합니다.
최신 JavaScript → 구형 JavaScript: 최신 문법(ES6+)을 구형 브라우저에서도 동작하는 문법(ES5)으로 변환합니다. (Babel이라는 도구가 주로 이 역할을 합니다.)

번들링 (Bundling):

개발 시에는 기능별로 수십, 수백 개의 파일로 나누어 작업하지만, 이 파일들을 브라우저가 하나씩 요청하면 매우 비효율적
번들러(Webpack, Rollup 등)는 import, export 관계를 분석하여 여러 개의 파일들을 하나의 거대한 JavaScript 파일로 합쳐준다.

최적화 (Optimization):

공백/주석 제거, 변수 이름 축소 (Minification): 코드의 기능은 유지하면서 불필요한 공백, 주석 등을 모두 제거하고, 변수 이름을 a, b처럼 짧게 바꿔 파일 크기를 극단적으로 줄인다.
이미지, 폰트 최적화: 이미지 크기를 줄이거나 폰트 파일을 가볍게 만든다.