[Project/JS/개발환경] 자바스크립트로 이미지 슬라이더 직접 만들기 - 개발환경

Templetes(개발 폴더 구조)

• 아래와 같은 구조로, 개발을 진행하겠습니다.
• image 폴더에는 배너로 쓸 이미지가 첨부됩니다.

Webpack 설정

사용 플러그인

• HtmlWebpackPlugin
  • bundling 할 때, html 파일도 같이 번들링하는 Plugin입니다. 많이 쓰이는 PlugIn 이더군요!
• Cssloader, CssMinimizerPlugin, MiniCssExtractPlugin
  • CSS도 같이 bundling하기 위한 Plugin입니다. 
• TeserWebpackPlugin 
  • Bundling 파일 압축을 위한 Plugin입니다.

Module(로더)를 설정할 때, 이미지 로더도 같이 설정해줍니다.

...
module:{
    rules:[
     ... 
      {
        test:/\.(gif|jpe?g|tiff?|png|webp|bmp)$/i,
        type:'asset/inline',
      },
...

esLint, Prettier 설정

• esLint는 구글 eslint를 적용할 것이고, 자동적용 옵션을 끄겠습니다. 구글 javascript eslint는 let을 선언했을 때, 변동이 있는값이 아니라면, 무조건 const로 변수를 선언하게끔 바꿔서 계속 꼬이더라구요 :(
• Airbnb Linter, recommended 등 뭐든 좋습니다!

$ npm install --save-dev eslint eslint-config-google

...
    "extends": ["google","plugin:prettier/recommended"],
...

Prettier, Eslint Ignore 파일 설정

/public
/node_mondules
webpack.config.js

FontAwesome 설정하기

• 아이콘을 위한 곳입니다. 재생/일시정지 버튼을 Fontawesome에서 사용하겠습니다.
• Font Awesome을 설정하는 방법은 많습니다. JS에 넣어줘도 되고, HTML 제일 상단에 import하여, html에서 적용시킬 수있습니다.
• npm을 이용해서 다운로드 하겠습니다.

npm install --save @fortawesome/fontawesome-free

https://fontawesome.com/docs/web/setup/packages

Using A Package Manager

• index.html에 Fontawesome에서 제공하는 아이콘을 복사해서 붙여넣으면 됩니다.