가상 키보드

# 추후 도전 과제

• 기능키 기능 추가해보기
• 한글 입력 기능 추가해보기
• 키보드 사이즈 변경 기능 추가해보기
• 디자인 변경 기능 추가해보기
• 다크모드 배경/전경 컨텍스트 기반의 컬러 팔레트로 구현해보기(CSS variable)

# git link : Keyboard

# 개발 환경 : HTML5, CSS, Vanilla JS, Webpack

1. 개발환경 설정하기

1) npm & webpack 설정

- npm 기본 json 설치 : npm init -y
- webpack basic setting & plugin

• webpack 설치 : npm i -D webpack webpack-cli webpack-dev-server
• 사용하려는 webpack과 설치된 버전이 다를경우
  - npm json에서 해당 버전 수정 후 저장
  - terminal에서 npm i 입력하면 해당 버전으로 다시 설치됨
• creat bundle plugin: npm i -D terser-webpack-plugin
• html setting plugin : npm i -D html-webpack-plugin
• css setting plugin : npm i -D mini-css-extract-plugin css-loader css-minimizer-webpack-plugin

2) 빌드환경 설정하기

- webpack.config.js

• 기본 번들 파일 루트 및 종류 셋팅

  entry: "./src/js/index.js",
  output : {
    filename : "bundle.js",
    path: path.resolve(__dirname,"./dist"),
    clean: true
  },
  devtool: "source-map",
  mode: "development",

• plugin 설정

  plugins: [
    new HtmlWebpackPlugin({
      title: "keyboard",
      template: "./index.html",
      inject: "body",
      favicon: "./flag.svg"
    }),
    new MiniCssExtractPlugin({filename:"style.css"})
  ]

• css 파일 로더 설정

  module: {
    rules: [{
    	test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
   	}]
  },

• optimization 설정

  optimization: {
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin()
    ]
  }

- package.json

• scripts 설정
  • build 명령어 지정 : "build": "webpack --mode-production"
  • bundle 파일 정리옵션 : --mode-production
  • dev 명령어 지정 : "dev": "webpack-dev-server"

3) webpack 실행

- 일반 실행

• webpack project build 하기 : npx webpack
• package.json script 설정 후 : npm run build

- 개발서버 띄우기

• webpack.config.js 설정

  devServer: {
    host: "localhost",
    port: 8080,
    open: true,
    watchFiles: 'index.html'
  }

• dev server 띄우기(localhost) : npx webpack-dev-server
• package.json script 설정 후 : npm run dev

4) eslint & prettier 설정

• eslint : npm i -D eslint

2. 기본 html, css 구조 잡기

• 기본 구조 틀 잡기 : display:flex
• 슬라이드 버튼 : input:checked + .slider::before {transform: translateX(26px);}

3. 다크 모드 구현

• 간단한 다크 모드 : filter: invert(100%) hue-rotate(180deg); (색 반전 흑백 변경)

export class Keyboard {
  #switchEl; //다크모트 버튼 객체
  constructor(){
    this.#aasignElement();
    this.#addEvent();
  }

  #aasignElement(){ // 객체 가져오는 함수
    this.#switchEl = document.getElementById('switch');
  }
  #addEvent(){ // 이벤트 실행 함수
    // change 이벤트로 document에 theme 속성 적용
    this.#switchEl.addEventListener("change", (event) => {
    document.documentElement.setAttribute("theme",event.target.checked ? "dark-mode" : "")
    })
  }
}