Dev Diary

바닐라 자바스크립트 프로젝트 초기 환경 설정 본문

Projects

바닐라 자바스크립트 프로젝트 초기 환경 설정

sik9252 2024. 11. 11. 18:44
SMALL

1. ./src 폴더와 하위에 index.html과 Index.js 파일 생성

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Daily Schedule</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
  </head>
  <body>
  </body>
</html>

 

크로스 브라우징에서 동일한 폰트가 Pretendard 웹 폰트를 적용했다.

 

2. package.json 생성

npm init

 

프로젝트에 사용할 패키지 매니저를 이용해 init 명령어를 사용한다.

 

npm install -D

 

사용할 패키지 매니저를 이용해 필요한 패키지들을 다운로드한다. 나는 아래와 같은 패키지들을 설치했다.

-D를 붙이면 devDependencies에 패키지들이 설치되고, 이는 배포가 아닌개발 중에 사용할 패키지들임을 의미한다.

webpack webpack-cli webpack-dev-server @babel/cli @babel/core @babel/preset-env babel-loader clean-webpack-plugin copy-webpack-plugin core-js html-webpack-plugin source-map-loader terser-webpack-plugin style-loader css-loader

 

3. webpack.config.js 설정

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        type: "asset/resource",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  devServer: {
    static: "./dist",
    open: true,
    port: 3000,
  },
};

 

  • mode: 'development', 'production', 'none' 중 선택, production으로 설정하면 최적화된 파일로 빌드된다.
  • entry: 시작점 파일
  • output: 빌드 파일이 생성될 경로와 파일 이름
  • module.rules: 각종 loader, parser 설정
    • 모든 .js 파일에 대해 Babel 로더를 사용해 구형에서도 최신 문법을 사용할 수 있도록 함
    • 모든 .css 파일에 대해 css-loader, style-loader를 순차적으로 사용할 수 있도록 함
    • 이미지 파일 처리 (file-loader를 설치하는 대신 asset/resource로 내장 기능을 사용함)
  • plugins: 플러그인 설정
    • html파일에 js 번들을 자동으로 묶어주는 플러그인 설정 -> HTML에서 script를 수동으로 추가할 필요가 없다!
  • devServer: 개발 서버가 정적 파일을 제공할 경로와 서버 시작 시 브라우저를 자동으로 열도록 한다. port는 3000에서 열리도록 지정해준다. (localhost:3000)

 

HtmlWebpackPlugin에 여러개의 HTML 파일을 적용하려면 ?

plugins: [
  new HtmlWebpackPlugin({
    template: HTML_TEMPLATE,
    filename: "home.html",
    chunks: ["home"],
  }),
  new HtmlWebpackPlugin({
    template: HTML_TEMPLATE,
    filename: "about.html",
    chunks: ["about"],
  }),
],

 

4. babel.config.js 설정

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: "> 0.25%, not dead",
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
  ],
};

 

  • targets: 여러 브라우저를 타겟팅하여 지원
  • useBuiltIns: 필요한 폴리필만 자동으로 포함
  • corejs: corejs 버전

 

5. package.json에 script 추가

  "scripts": {
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

 

  • npm run dev를 입력하면 Webpack Dev Server를 실행해 개발 환경으로 실행한다.
  • npm run build를 입력하면 프로덕션 모드로 Webpack을 실행해 최적화된 빌드 파일을 생성한다.

마주친 에러

Refused to apply style from 'http://localhost:3000/reset.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

 

처음에는 index.html에 <link> 태그로 reset.css를 넣어주었는데 지원하지 않는 stylesheet라는 오류가 콘솔에 떠 있었다. 오류가 떠 있긴 했지만, 실제로 프로젝트에 reset.css가 잘 적용되어 있었다. 어차피 HtmlWebpackPlugin를 사용하고 있었기 때문에 index.js에 reset.css를 import 해주고 index.html에서는 제거해주었다.

설정하며 알게된 그 외 지식

https://ko.javascript.info/script-async-defer

 

defer, async 스크립트

 

ko.javascript.info

 

브라우저는 HTML 파싱 도중 <script> 태그를 만나면 파싱을 멈추고 스크립트를 먼저 실행하고 다시 파싱을 재개한다.

따라서 <body> 의 하단에 <script> 태그를 위치시켰고, index.js를 연결해 주었다.

 

또한, defer 속성을 적용해 백그라운드에서 다운로드 하도록 하여 스크립트의 다운로드 중에서 HTML 파싱이 멈추지 않도록 했다. 이렇게 defer을 적용한 스크립트를 지연 스크립트라고 한다. 이들은 DOM이 준비된 후에 실행되긴 하지만, DOMContentLoaded 이벤트가 발생하기 전에 실행된다. (defer가 적용되려면 해당 스크립트는 src가 붙은 외부 스크립트여야한다.)

 

다만, defer를 사용하는 경우 스크립트가 실행되기 전에 페이지가 화면에 출력되므로, 지연 스크립트가 영향을 주는 영역에는 Loading Indicator를 넣거나 상호작용할 수 있는 버튼을 disabled 처리하는 과정을 수행해야 한다.

LIST
저작자표시 (새창열림)

'Projects' 카테고리의 다른 글

[Question Cloud] 회원가입 만들기 (3)  (1) 2024.10.10
[Question Cloud] 회원가입 만들기 (2)  (9) 2024.10.09
[Question Cloud] 회원가입 만들기 (1)  (2) 2024.10.06
[Question Cloud] Chromatic을 활용한 Storybook 배포  (0) 2024.09.03
[Question Cloud] Storybook 과 Testing 설정하기  (0) 2024.08.23
'Projects' Related Articles more