index.html의 위치
index.html 파일은 웹 애플리케이션의 진입점(entry point)으로, 일반적으로 프로젝트의 루트 디렉토리에 위치한다. 이는 웹 서버가 클라이언트의 요청에 응답할 때 가장 먼저 찾는 파일이기 때문이다. 웹 서버는 대개 루트 디렉토리에 있는 index.html을 찾아 클라이언트에 제공한다.
src 폴더에 index.html 파일을 위치시키는 것은 일반적인 관행이 아니다. src 폴더는 주로 소스 코드 파일(JavaScript, CSS, 이미지 등)을 저장하는 데 사용되며, index.html 같은 정적 파일을 포함시키지 않는다. 하지만 웹팩(Webpack)이나 다른 모듈 번들러를 사용하는 경우, index.html 파일을 src 폴더에 두고 빌드 과정에서 적절한 위치로 이동시키도록 구성할 수 있다.
예를 들어
웹팩을 예로 들면, HtmlWebpackPlugin을 사용하여 src 폴더 내의 index.html 파일을 빌드 시 루트 디렉토리로 복사하고, 필요한 모든 자산(번들된 JavaScript 파일 등)을 자동으로 주입할 수 있다.
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 웹팩 설정
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html' // src 폴더 내의 index.html 파일을 사용
})
]
};
JavaScript
복사
이렇게 설정하면, 빌드 과정에서 src 폴더의 index.html 파일이 최종 빌드 디렉토리(예: dist 또는 build)로 복사되고, 필요한 모든 스크립트와 링크가 자동으로 추가된다.