210909 개발기록: src와 dist 차이

🎁  src/ 와 dist/ 의 차이

리액트 개발을 하면서 src와 dist 가 눈에 자주 밟혔다. src 는 source 라고 어림잡아 생각할 수 있었다.

우리의 소스코드를 작성하는(?) 정도로 여겼는데, dist 는 무엇인지 감이 잡히지 않았다.

 

stackoverflow 에서 둘의 차이를 찾을 수 있어 약간의 의역을 곁들여 기록한다.

 

📌  src/

src/ stands for source, and is the raw code before minification or concatenation or some other compilation - used to read/edit the code.

src/는 소스를 나타내며 축소/연결, 기타 컴파일 되기 전의 원시 코드로, 코드를 읽고 편집하는 데 사용된다.

(즉 개발자가 개발할 때 작성한 소스코드)

 

📌  dist/

dist/ stands for distribution, and is the minified/concatenated version - actually used on production sites. This is a common task that is done for assets on the web to make them smaller.

dist/는 배포를 의미하며, 실제 운영 환경에서 사용되는 축소/연결 버전이다.

이는 웹 상에서 용량(?)을 줄이기 위해 수행하는 일반적인 작업이다.

 

웹팩에서 src 와 dist 는 각각 entry 와 output 에 매칭된다.

src/main.js 를 시작점으로 하여, 번들된 결과물을 dist 경로에 출력한다.

 

 

ref

https://stackoverflow.com/questions/23730882/what-is-the-role-of-src-and-dist-folders