jeonghwan-kim/lecture-frontend-dev-env

"[인프런] 프론트엔드 개발환경의 이해와 실습" 강의 실습 자료입니다.

프론트엔드 개발 환경의 이해

"프론트엔드 개발 환경의 이해와 실습" 강의 자료입니다.

• 강의노트:

  • 프론트엔드 개발 환경의 이해: NPM
  • 프론트엔드 개발 환경의 이해: 웹팩(기본)
  • 프론트엔드 개발 환경의 이해: Babel
  • 프론트엔드 개발 환경의 이해: 린트
  • 프론트엔드 개발 환경의 이해: 웹팩(심화)

• 실습: jeonghwan-kim/lecture-frontend-dev-env

내용

프론트엔드 개발 환경을 구성하는데 필요한 기술을 이해하고 실습을 통해 익힙니다. 프로젝트 전반에 사용되는 노드js, 모듈로 분리하여 코딩할 수 있게 도와주는 웹팩, 최신 자바스크립트 문법을 사용할 때 필요한 바벨이 개발 환경을 구성하는데 필요한 도구들 입니다. 뿐만 아니라 코딩 컨벤션을 유지할 수 있는 린트 도구는 개발자 간의 협업을 도와주는 요긴한 툴입니다.

수업에서 다루는 도구의 버전은 다음과 같습니다. 웬만하면 이 버전과 같은 환경으로 만들어 주세요.

• Node.js 13과 NPM 6 (이 이슈로 인해 Node.js v13.2 이상을 설치해야 합니다.)
• 웹팩 4
• 바벨 7

어플리케이션 개발에 사용되는 라이브러리나 프레임웍, 언어 문법은 다루지 않습니다.

폴더 구성

강의 실습을 위한 폴더는 다음과 같이 구성되어 있습니다.

• src: 검색 어플리케이션 프론트엔드 소스
• server: 검색 어플리케이션 API 서버 코드
• resource: 강의 진행에 필요한 자료. 이미지나 이론 실습용 코드가 있습니다.
• react-sample: 마지막에 순서인 리액트 개발환경 구성을 위한 실습 코드입니다.

브랜치

강의 중 실습은 아래 브랜치 중 하나로 이동하여 진행합니다. 브랜치를 이용하면 각 실습에서 풀어야하는 문제가 TODO 주석으로 기록되어 있습니다.

• 1-webpack/1-entry: 웹팩 엔트리/아웃풋 실습
• 1-webpack/2-loader: 웹팩 로더 실습
• 1-webpack/3-plugin: 웹팩 플러그인 실습
• 2-babel/1-babel: 바벨 실습
• 2-babel/2-sass: 사스 실습
• 3-lint/1-eslint: 린트 실습
• 3-lint/2-prettier: 프리티어 실습
• 4-webpack/1-dev-server: 웹팩 개발 서버 실습
• 4-webpack/2-hot: 웹팩 핫로딩 실습
• 4-webpack/3-optimazation: 웹팩 최적화 실습
• 5-sample/1-react: 리액트 샘플 실습
• master: 최종 결과물

lecture-frontend-dev-env's Issues

윈도우 환경 NODE_ENV 명령 실행 안될때 cross-env패키지로 해결

안녕하세요? 녹화된 영상으로 프론트엔드 개발 환경 이해를 듣고 있습니다.
많은 분들이 아실지도 모르지만 저와 같은 초보자를 위해 이렇게 글을 씁니다.
윈도우 환경에서 NODE_ENV=production && npm run build 명령은 실행되지 않습니다.

이를 실행하기 위해서 cross-env 패키지를 설치해주고 package.json script에 "build": cross-env set NODE_ENV=production npm run build를 설정해주고 해당 명령을 쳐야 실행됩니다.

이 부분을 추가해주시면 저와 같은 또다른 초심자에게 도움이 될거 같아 글을 남깁니다.

답변: "개발환경에서 assets 파일 참조관련 질문"

인프런 질문: 개발환경에서 assets 파일 참조관련 질문에 대한 답변입니다.

webpack.config.js:

const path = require("path");
// const { BannerPlugin, DefinePlugin } = require("webpack");
// const childProcess = require("child_process");
const HtmlWebpackPlugin = require("html-webpack-plugin");
// const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const isDevMode =
  (process.env.NODE_ENV || "development").trim() === "development";

console.log("is DEV mode?", isDevMode);
console.log("__dirname: ", __dirname);

module.exports = {
  mode: isDevMode ? "development" : "production",
  // entry: webpack 시작되는 부분이라고 생각하면 된다.
  entry: {
    main: "./src/index.js",
  },
  /**
   *  output
   * entry point를 기준으로
   * 모든 .js 파일을 합쳐서 하나의 bundle 파일로 만드는데,
   * 이걸 어디에 저장할 것인지 지정하는 option
   */
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: isDevMode ? "[name].js" : "main.[contenthash].js",
    chunkFilename: "[id].chunk.js",
    assetModuleFilename: "images/[hash][ext][query]",
    clean: true,
  },
  devServer: {
    port: 3000,
    hot: true,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    // static: {
    //   directory: path.resolve(__dirname, './src/assets/'),
    // },
  },
  /**
   * module
   * test에 설정한 파일들을 inspect 하여,
   * 조건에 맞는 파일들에 대해 loader 들을 실행하여 해석함
   */
  module: {
    rules: [
      // {
      //   test: /\.(sa|sc|c)ss$/i,
      //   exclude: [/node_modules/],
      //   use: [
      //     // creates 'style' nodes from JS strings
      //     isDevMode
      //       ? 'style-loader'
      //       : {
      //           loader: MiniCssExtractPlugin.loader,
      //           options: {
      //             publicPath: '',
      //           },
      //         },
      //     // translates css into common JS
      //     'css-loader',
      //     'postcss-loader',
      //     // complies sass to css
      //     'sass-loader',
      //   ],
      // },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        exclude: [/node_modules/],
        type: "asset/resource",
        parser: {
          dataUrlCondition: {
            // 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리됩니다.
            maxSize: 4 * 1042,
          },
        },
        // generator: {
        //   publicPath: './assets/',
        //   outputPath: './assets/',
        // },
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
      },
      // {
      //   test: /\.(woff|woff2|eot|ttf|otf)$/i,
      //   exclude: [/node_modules/],
      //   type: 'asset/resource',
      // },
    ],
  },
  plugins: [
    /**
     * 개발할 때 API 서버주소,
     * 배포했을 때 API 서버주소를 설정하는 Plugin
     */
    // new DefinePlugin({
    //   NODE_ENV: 'development',
    // }),
    //   new BannerPlugin({
    //     banner: `Build Date: ${new Date().toLocaleString()}
    //     Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}
    //     Author: ${childProcess.execSync('git config user.name')}`,
    //   }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      templateParameters: {
        env: isDevMode ? "개발용" : "배포용",
      },
      minify: !isDevMode
        ? {
            collapseWhitespace: true,
            removeComments: true,
          }
        : false,
    }),
    //   ...(!isDevMode
    //     ? [
    //         new MiniCssExtractPlugin({
    //           filename: isDevMode ? '[name].css' : '[name].[contenthash].css',
    //           chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',
    //         }),
    //       ]
    //     : []),
  ],
};

src/index.js

// 이미지 파일도 모듈로 가져옵니다.
// 웹팩 module 설정에 이미지 파일에 대한 규칙을 추가했기 때문에 가능합니다.
// 이렇게 가져온 이미지파일을 빌드하면 아웃풋 폴더에 지정한 이름 규칙으로 파일이 생성될 것입니다.
import image from "./assets/image.png";

document.addEventListener("DOMContentLoaded", () => {
  const imgEl = document.createElement("img");
  imgEl.src = image;
  document.body.appendChild(imgEl);
});