dist랑 node_module이 뭐였더라..

Dist

• 다들 Javascript 기반의 어플리케이션을 만들기 위해 build해보고 개발환경에서 실행하면서 dist라는 폴더를 자주 봤을 것이다
  • 보통 애플리케이션을 웹 브라우저에서 실행하려면 dist 디렉토리를 서버에 업로드한다
  • 사실 나는 이 폴더의 용도를 대충 알고 넘어가긴 했었다... 세상이 좋아져서 알 필요가 없었던 것일까..;~
    • vercel, aws s3 등에서 요 빌드 파일(dist)를 올리면 알아서 잘 작동함
• 아무튼 dist 폴더는 JavaScript 애플리케이션을 빌드한 결과물을 포함하는 디렉토리이다.

dist/
├── index.html
├── assets/
│   ├── index.[hash].js       # 빌드된 JavaScript 번들
│   ├── index.[hash].css      # 빌드된 CSS
│   └── 기타 정적 파일

• 이 디렉토리는 보통 다음과 같은 항목을 포함하고 있당

1. HTML 파일: 애플리케이션의 시작점이 되는 HTML 파일 (index.html 등이 포함될 수 있음)
2. JavaScript 번들 파일: 빌드된 JavaScript 코드. 보통 Webpack, Rollup, Vite 같은 도구를 사용해 생성됨
3. CSS 파일: 스타일 정보가 포함된 파일
4. 스타일: 이미지, 폰트, 기타 리소스.

Dist(빌드된 파일)가 어떻게 실행될까

빌드된 파일들은 보통 다음과 같은 과정을 거쳐 실행이 된다

1. 브라우저가 index.html 파일을 읽는다
2. HTML 파일 내부에 <script> 태그로 포함된 JavaScript 번들을 로드한다
3. 번들된 JavaScript는 애플리케이션의 로직을 실행하며, 필요한 경우 API 요청 등을 처리할 수도 있ㄷ다
4. CSS 및 기타 리소스를 불러와 사용자에게 최종 결과를 렌더링한다

리액트로 예시를 들어보자 =)

1. 브라우저가 dist/index.html을 로드한다.
2. <script> 태그를 통해 번들된 JavaScript 파일을 읽는다.
   • dist/assets/*.js → JavaScript 번들
3. React 컴포넌트가 실행되면서 DOM에 동적으로 렌더링된다.
4. 스타일(CSS)과 기타 정적 파일이 로드된다.

dist에 포함되지 않는 것들

1. 개발 도구:
   • Webpack, Babel 등 빌드 도구는 node_modules에 있지만, 실제 애플리케이션 실행에 필요하지 않으므로 dist에 포함되지 않음.
2. 미사용 코드:
   • node_modules 라이브러리 중 사용하지 않은 코드(Tree Shaking 대상)는 빌드 과정에서 제거된다.

dist 파일에 포함된 것은?

• 애플리케이션 코드: 직접 작성한 JavaScript, CSS, HTML.
• 의존성 코드: node_modules에서 가져온 필요한 코드.
• 정적 자원: 이미지, 폰트 등.

 

react에서 어떻게 빌드가 될까 ?!

import React from "react";

const App = () => <h1>Hello, React!</h1>;

export default App;

 

• 이 코드는 node_modules/react에서 React의 필요한 코드(예: React.createElement)를 찾아 사용한다.
• Webpack이나 Vite는 React 전체를 포함하지 않고, 앱에서 사용한 코드만 번들링 될 결과물에 추가!

 

"use strict";
var React = { createElement: ... }; // React 코드 일부
function App() {
  return React.createElement("h1", null, "Hello, React!");
}

 

포함된 코드

• dist 파일에는 React에서 필요한 최소한의 코드만 포함된다.
• React 전체 라이브러리(node_modules/react)가 들어가는 것은 아니며, 사용하지 않은 코드는 제거된다

 

 

---

Node modules

• node_modules는 프로젝트가 의존하는 모든 패키지와 모듈이 저장된 디렉토리이다.
  • 다들 npm install과 yarn add로 필요한 라이브러리를 설치해봤겠죵 ?

주요 특징

• 내용물:
  • package.json 파일에 명시된 의존성(dependencies)에 해당하는 패키지.
  • 패키지가 의존하는 하위 패키지까지 포함된 재귀적 구조.
• 역할:
  • 프로젝트 실행 및 빌드에 필요한 라이브러리를 저장.
  • 예: React, Webpack, Babel, ESLint 같은 라이브러리.
• 생성 방법:
  • npm install 또는 yarn install 명령을 실행하면 생성!
• 사용 예:
  • 애플리케이션 개발 및 빌드 시 사용.

특징 요약

• node_modules는 개발과 실행에 필요한 패키지의 저장소입니다.
• 크기가 매우 크고, 하위 의존성을 모두 포함합니다.
• 배포할 때는 포함하지 않는 것이 일반적이다.