1. Webpack 개발환경

  1. npm init -y : package json 초기화

  2. npm i -D webpack wepback-cli webpack-dev-server : webpack 패키지들 설치

  3. webpack.config.js

    1. entry 속성은 자바스크립트의 진입점을 나타낸다.

    2. output속성은 build를 했을때 bundle파일 관련속성을 다룰수 있다.

      1. path는 bundle될 파일의 경로를 나타낸다. ( path부분에는 상대경로를 적으면 webpack이 인식을 못하기 때문에, path모듈을 불러와서 webpack이 절대경로를 찾을 수 있도록 setting 해주었다.)
      2. clean속성은 기존 파일을 지우고 새로 생성하는 속성

    3. devtool: 'source-map' : build한 파일과 원본파일을 연결해주는 기능을 한다.

    4. mode : “development” or “production” : webpack이 build할때 production이면 코드 난독화를 시킨다.

    5. npm i -D terser-webpack-plugin : 이건 한번 찾아보자

    6. html과 css관련 모듈들을 설치해 준다.

      1. npm i -D html-webpack-plugin : 이 플러그인을 사용하게 되면 lodash 문법을 사용할 수 있게 된다.

        plugins: [
    new HtmlWebpackPlugin({
      title: 'keyboard',
      // webpack 파일 기준 상대경로에 위치한 index.html을 사용한다.
      template: './index.html',
      // js파일을 build했을때 bundle.js파일을 body에 넣어줄거냐 head에 넣어줄거냐 설정 가능 (기본적으로 head에 inject된다.)
      inject: 'body',
      favicon: './favicon.ico',
    }),
  ],

        <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

      2. css-loader

      3. css-minimizer-webpack-plugin : CSS 사이즈를 압축하기 위한 플러그인

      4. mini-css-extract-plugin : html에 CSS를 붙여넣기 위해서 사용하는 플러그인

    7. 따로 스크립트에 development인지, production인지 mode를 적어주지 않으면 development환경에서 build가 진행된다 → 코드의 난독화가 진행되지 않는다.

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

      <aside> 💡 production 환경에서의 build는 컴팩트하게 최적화 시켜준다. (줄바꿈 제거 등등)

      </aside>

    8. webpack-dev-sever

    devServer: {
    host: 'localhost',
    port: '8080',
    open: true,
		// index.html 변화가 있을때마다 리로드 시켜준다.
    watchFiles: 'index.html',
  },

    2. Eslint와 Prettier 설정

    1. Eslint : 자바스크립트 린터중 하나로, 코드를 실행하지 않아도 문법적 에러를 잡아준다.

    2. Prettier :

    3. npm i -D eslint

    4. npm i -D prettier —-save-exact : ^표시가 없이 설치가 되고, 이것은 npm i를 했을시 최신버전으로 업데이트 안하겠다 라는 것을 의미한다.

      1. prettier는 정확한 버전을 설치하기 위해서 —save-exact 옵션을 붙여 설치하였다.

    5. npm i -D eslint-config-prettier eslint-plugin-prettier

      • eslint-config-prettier 는 eslint와 prettier의 코드 포맷팅이 겹치는 부분을 없애주는 기능을한다.
      • eslint-plugin-prettier 는 eslint에 prettier에 코드 포맷팅을 추가하는 역할

    6. npx eslint —init : eslint 설정파일을 초기화 할수 있게 해준다.

      스크린샷 2023-01-23 오후 2.45.59.png

      • 이렇게 설정하고 나면 .eslintrc.json
      {
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", **"plugin:prettier/recommend"**],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {}
}
      • eslint 설정파일에 prettier 포맷팅 플러그인을 추가해준다.
      • 만약에 airbnb룰을 사용하고 싶다면? → extends부분에다가 “eslint-config-airbnb”를 넣어주면된다.

    7. eslintIgnore 파일을 만든다.

      1. eslint를 적용하고 싶지 않은 경로나 파일들을 설정할 수 있다 like gitIgnore
      // eslintIgnore
/node_modules
/dist
/webpack.config.js

    8. prettier.json파일을 만든다. → prettier 설정파일

3. HTML, CSS 파악하기

4. Dark theme 기능

  1. CSS의 filter 속성 : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
/* 현재 요소의 색상에서 반전된 색상을 보여준다 */
filter : invert(100%); 

/* 현재 요소의 색상에서 색상표의 반대편에 있는 색상을 보여줌 */
filter : hue-rotate(360deg);
  1. html, css, js를 이용해서 색상 반전을 일으킬 예정

4. Event에 대한 이해

스크린샷 2023-01-24 오후 4.57.41.png