Dist

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

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

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

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

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

import React from "react";

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

export default App;

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

포함된 코드

Node modules

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

주요 특징

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