Soha

Vue.js: Vue 시작하기 Ep.1

Vue CLI, Vetur

• Vue CLI 설치

  Vue CLI Link

  경로 위치 상관없이 해당 명령어를 실행하면 된다. (-g는 전역설치이기 때문에 경로 위치 상관없음)

  npm install -g @vue/cli
  # 또는
  yarn global add @vue/cli
  

• Vue CLI로 폴더 생성

  Vue CLI 설치로 아래와 같은 명령어 사용 가능

  # 간단하게 새로운 프로젝트 생성하기
  ## vue create 폴더명
  vue create hello-world
  

  폴더 생성 후, 다음과 같은 옵션 선택이 뜬다. (화살표로 이동이 가능하며 선택이 가능하다.)

  현재는 옵션 선택에 vue2,3버전 중 어떤 걸 사용할 것인지 묻는다.
  (원하는 버전으로 선택하면 된다.)

  

• package.json

  

  • serve는 dev와 동일한 것이다.

    개발서버를 열고 싶다면 다음과 같은 명령어 사용

    npm run serve
    

  • 제품화 과정에서는 npm run build

  • lint

    vue.js 코드를 어떤 규칙에 맞게 작동이 잘 되었는지 확인하기 위해서 해당 명령어를 사용한다.

    lint를 통해서 코드를 작성하는 규칙을 정할 수 있다.
    하단에서 eslintConfig 에서 기본적인 구성옵션을 확인할 수 있으며, rules 부분에 원하는 규칙을 추가할 수 있다.

  • vue-cli의 경우에는 내부적으로 webpack을 사용하고 있다.

    webpack에 대한 기본적인 구조는 프로젝트 내에서 숨겨져 있다.
    대신, 숨겨진 부분을 vue-cli-service를 통해서 제공한다.

  • browserslist

    프로젝트가 지원할 브라우저의 기본적인 종류를 명시한다.
    vue.js 설치시 자동으로 작성되어져 있으며, babel, postCSS등을 기본적으로 사용할 수 있다.

• Vue CLI 장점과 단점

  장점

  기본적인 부분부터 디테일한 부분까지 vue-cli에서 흡수를 했기 때문에 입문자 입장에서는 구성옵션을 최대한 신경쓰지 않고 문법에 집중해서 프로젝트를 만들 수 있어서 편리하다.

  단점

  vue-cli에서 대부분 관리하기 때문에 세부적인 부분들을 정리하면서 나만의 프로젝트를 관리하기 어렵다.

• public과 src 파일 (Vetur)

  • html 파일

    <div id=”app”></div> 에 vue.js를 연결해서 사용한다.

  • main.js

    import { createApp } from 'vue'
    import App from './App.vue'
        
    createApp(App).mount('#app')
    

    createApp을 vue에서 가져와서(import) 사용을 하고 있다.
    4번째 줄 createApp 앞에는 Vue.이 생략되어져 있으며, 이것을 대신해서 vue 패키지에서 해당하는 내용을 가져와서 직접적으로 실행하는 구조로 되어져 있다.

    mount 메소드를 통해서 html에서 app 아이디를 가진 요소를 선택해서 vue.js 프로젝트를 바로 연결한다.

    App이라는 이름으로 어떤 내용을 가져와서 연결을 하는데, 해당 내용은 주변에 존재하는 App.vue 파일에서 온다.

  • App.vue (확장자 Vetur)

    npm 프로젝트로 시작하게 되면, vue라는 확장자를 가진 파일을 만들어서 vue 프로젝트를 시작할 수 있다.

    App.vue 파일을 열어보면 하이라이팅이 되어있지 않아 내용을 확인하기 어려운데, vscode에서 확장자를 설치하여 하이라이팅을 만들어준다.
    vscode에서 Vetur라는 확장자를 설치해준다.

    • template

      기본적인 html 내용을 작성한다.

    • script

      자바스크립트 내용을 작성한다.

    • style

      css 내용을 작성한다.

Vue3 Webpack Template

이전 webpack 연습에서 사용했던 폴더를 그대로 사용할 것이다.

• src 폴더 생성

  main.js 파일 생성 (기존에 존재했던 js 폴더는 삭제)
  App.vue 파일 생성

  App.vue와 main.js을 연결해서 사용한다.
  해당 내용이 정상적으로 작동할 수 있도록 패키지를 설치한다.

• vue 패키지 설치 (일반 의존성 모드)

  vue 패키지는 기본적인 문법을 해석하기 위한 패키지이다.

  npm i vue@next
  

  @next 없이 설치하면 2 버전이 설치된다. 해당 키워드를 입력해야 최신 버전(3 버전)이 설치된다.

  vue.js는 개발 할 때만 사용하는 것이 아닌 실제 브라우저에서 동작하는 패키지이기 때문에 개발의존성 모드 (-D)로 설치하면 안된다.

• vue 관리를 위한 패키지 (개발 의존성 모드)

  프로젝트 내부에서 vue 파일을 관리하기 위해서 해당 패키지들을 설치한다.

  npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc
  

  • vue-loader

    뒤에 @next를 붙여서 설치한다. 최신 버전(버전 3)으로 설치하기 위함이다.

  • vue-style-loader

    App.vue와 같이 vue 파일 내부에서 style 태그로 css 내용을 작성할 수 있다. 이런 vue 파일 내부에 있는 style 태그를 해석해서 동작할 수 있도록 만들어준다.

  • @vue/compiler-sfc

    vue 파일을 변환해서 브라우저에서 동작할 수 있는 형태로 바꿔준다.

• webpack.config.js

  rules: [
        {
          test: /\.vue$/,
          use: 'vue-loader'
        },
        {
          test: /\.s?css$/,
          use: [
            'vue-style-loader',
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        }
  

  vue 확장자를 찾아 번역하기 위한 코드를 추가한다.
  scss 부분에 vue-style-loader가 마지막으로 읽히기 위해서 가장 상단에 해당 패키지 명을 작성한다.

  const { VueLoaderPlugin } = require('vue-loader')
  

  상단에 해당 내용을 불러온다. 객체구조분해를 통해서 내용을 가져온다는 것을 주의하도록 하자.

  plugins: [
    ...
    ,
    new VueLoaderPlugin()
  ]
  

  plugins 부분에 불러왔던 내용을 new 키워드를 통해 생성자 함수로 실행한다.

• App.vue

  정상적으로 실행하는지 확인하기 위한 간단한 코드 작성

  <template>
    <h1></h1>
  </template>
    
  <script>
  export default {
    data() {
      return {
        message: "Hello Vue!!"
      }
    }
  }
  </script>
  

• main.js

  import Vue from 'vue'
  import App from './App.vue'
    
  Vue.createApp(App).mount('#app')
  

  Vue 라는 이름으로 vue 패키지를 불러온다.
  App 이라는 이름으로 주변에서 App.vue 파일을 불러온다.

  mount의 인수로 ‘#app’을 넣는다. html에서 아이디 값이 app인 요소를 찾아 Vue.js 프로젝트를 연결한다.

  createApp의 인수로는 App을 넣는다.
  만약 cdn으로 vue를 불러와서 사용했다면 해당 인수로는 우리가 App.vue에서 작성했던 data 부분을 작성했을 것이다. 하지만, 해당 방법에서는 App.vue 파일을 만들어 해당 파일에 data 내용을 작성했기 때문에 불러왔던 이름을 넣어주기만 하면 된다.

  즉, main.js에서 App.vue 파일이 Vue 프로젝트의 시작이 될 수 있도록 설정을 하는 것이다.

  • Vue CLI를 사용해서 작성한다면!

    import { createApp } from 'vue'
    import App from './App.vue'
        
    createApp(App).mount('#app')
    

    Vue. 객체를 작성하지 않아도 되며, import로 가져오기를 할때 객체구조분해를 통해서 바로 createApp을 가져올 수 있다.

vue 확장자를 생략하기

• webpack.config.js

  module.exports = {
    resolve: {
      extensions: ['.js', '.vue']
    },
  }
  

  resolve와 extensions 추가로 js와 vue 확장자를 생략해도 문제없게 만들어주었다.

새로운 component 만들기

App.vue파일에 연결할 component를 만든다.

• src 폴더 내부에 components 폴더 생성

• 해당 폴더 내부에 HelloWorld.vue 파일 생성

  파일명은 첫번째 글자 대문자, 두번째 단어의 첫 글자도 대문자인 방식 (파스칼 표기법 PascalCase)으로 작성한다.

• 이미지 출력하기 (경로 별칭)
  • src 폴더 내부에 assets 폴더를 생성하고 사용하길 원하는 이미지를 해당 폴더에 넣는다.

  • HelloWorld.vue 파일에 다음과 같이 경로를 입력한다.

    <template>
      <img src="~assets/logo.png" alt="">
    </template>
    

    해당 경로에서 사진을 가져와서 vue 파일 내부에서 분석하여 화면에 출력할 수 있게 만들어줘야 한다.

  • 패키지 설치하기

    npm i -D file-loader
    

  • webpack.config.js

    rules 부분에 이미지 파일 확장자들을 찾아서 file-loader 패키지를 실행하도록 한다.

    module: {
        rules: [
          ...
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            use: 'file-loader'
          }
        ]
      }
    

    reslove 부분에 경로 별칭(Alias)을 추가한다.
    기존에는 상대경로를 통해서 파일을 불러왔다. 경로 별칭(~)을 사용하면 해당하는 경로별칭이 지칭하는 실제 경로로 바로 점프해서 해당하는 파일을 찾을 수 있게 한다.
    말 그대로, 경로를 별칭으로 만들어서 사용하는 것이다.

    틸드(물결)부분에는 path의 resolve를 통해서 현재 webpack.config.js가 있는 경로(__dirname 의미)에서 src 폴더를 지칭해준다.

    assets 부분에서는 __dirname으로 src폴더 안에 있는 assets 라는 실제 이미지가 존재하는 폴더를 지칭해준다.

    resolve: {
        // 경로 별칭
        alias: {
          '~': path.resolve(__dirname, 'src'),
          'assets': path.resolve(__dirname, 'src/assets')
        }
      }
    

    우리가 만든 경로 별칭을 통해서 틸드 혹은 틸드의 assets에 손쉽게 접근을 해서 실제 이미지나 파일들을 가지고 올 수 있다.

  • App.vue

    잘 작동하는지 확인하기 위해서 다음과 같이 코드를 작성한다.

    HelloWorld는 경로별칭 사용이 가능하다. 해당 파일은 components 폴더 안에 존재하는데 이 폴더는 src 폴더안에 있기에 틸드(src로 지정) 경로별칭을 사용할 수 있다.

    <template>
      <h1></h1>
      <HelloWorld />
    </template>
        
    <script>
    import HelloWorld from '~/components/HelloWorld'
        
    export default {
      components: {
        HelloWorld
      },
      data() {
        return {
          message: "Hello Vue!!"
        }
      }
    }
    </script>
    

    export default에 components 속성을 객체 데이터로 만들어서 HelloWorld를 연결해준다.

    template에 HelloWorld를 빈 태그처럼 작성해주면 된다.

Bundler: Webpack Ep.3

Autoprefixer(PostCSS)

autoprefixer: 공급업체 접두사를 자동으로 만들어 주는 것

• 패키지 설치

  npm i -D postcss
  npm i -D autoprefixer
  npm i -D postcss-loader
  

  • postcss: 스타일의 후처리를 도와주는 패키지
  • autoprefixer: postcss 안에서 공급업체 접두사를 자동으로 붙여주는 플러그인
  • postcss-loader: webpack에서 위 플러그인이 동작해야 하기 때문에 postcss를 동작시켜줄 수 있는 loader

• webpack.config.js

  스타일을 sass-loader를 통해서 해석을 해야지만 제대로 해석이 될 것이다.
  해석된 내용을 postcss-loader를 통해서 공급업체 접두사를 적용한다. 혹은 그 외의 postcss 플러그인들을 적용할 수 있다.
  다음에 이 부분의 내용을 css-loader로 읽어 드려서 마지막에 style-loader로 index.html에 style 태그로 삽입해준다.

  module: {
      rules: [
        {
          test: /\.s?css$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'sass-loader'
          ]
        }
      ]
    }
  

• package.json

  현재 우리 프로젝트가 어떤 대상의 브라우저를 지원하는지 명시한다.

  "browserslist": [
      "> 1%",
      "last 2 versions"
    ]
  

• .postcssrc.js 파일 생성

  구성옵션의 내용은 parcel과 동일하다.
  module.exports를 통해서 할당된 내용을 밖으로 내보낸다.
  plugins 옵션에 postcss의 plugins로 사용할 autoprefixer 패키지를 require 함수를 통해 가져와서 직접적으로 연결해준다.

  module.exports = {
    plugins: [
      require('autoprefixer')
    ]
  }
  

babel

• 패키지 설치

  npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime
  

• .babelrc.js 생성

  module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
      ['@babel/plugins-transform-runtime']
    ]
  }
  

  presets: 우리가 일일이 명시해야 하는 자바스크립트 기능을 한번에 지원해주는 패키지

  plugins: 비동기 처리를 위해서 plugin-transform-runtime 패키지 설치.
  plugins는 배열안에 배열이 들어가 있다. 이것을 2차원 배열이라고 부르기도 한다.

• webpack.config.js

  .js로 끝나는 모듈을 매칭해서 그 부분에 패키지들을 사용할 것이다. 해당 패키지는 babel-loader이며, js로 끝나는 확장자들을 webpack에서 babel-loader로 읽어들여서 실제로 babel이 적용될 수 있게 한다.

  module: {
      rules: [
        {
        },
        {
          test: /\.js$/,
          use: [
            'babel-loader'
          ]
        }
      ]
    }
  

• babel-loader 패키지 설치

  npm i -D babel-loader
  

Netlify 배포

• github에 배포하기 원하는 폴더 업로드 (해당 폴더만 존재하는 repository로)
• netlify에 사이트 생성을 클릭한 후, 배포하기 원하는 레퍼지토리 선택
• npm 프로젝트는 일반 배포와 다르기 때문에 옵션을 선택해야 한다.
  • Owner, Branch to deploy: 설정 변경할 필요 없음
  • Basic build settings Build command ⇒ npm run build
    Publish directory ⇒ dist/
    제품화 시킬 명령어를 작성하고 제품화된 것이 어떤 폴더에 들어가져 있는지를 명시한다. 기본적으로는 dist 폴더지만 만약 폴더 명을 다른 것으로 했다면 변경한 폴더명으로 작성해준다.

NPX, Degit

parcel, webpack 템플릿을 터미널을 통해서 손쉽게 다운로드 하기

• 다운 받기를 원하는 경로로 이동

• npx degit

  degit 명령을 통해서 깃허브 저장소에 있는 특정한 저장소를 현재 경로로 다운로드 받는다. degit 명령어를 사용하려면 degit을 다운로드해야 하는데, 설치하지 않고 동작시킬 수 있도록 npx 명령어를 사용한다.

  npx는 node.js에서 쓸 수 있는 명령어이다. node와 npm을 다운했기에 npx도 사용이 가능하다.

  npx degit 불러오고자-하는-깃허브-저장소 다운받은-저장소-담을-폴더명
  

• 다운받은 경로를 확인해보면 명시했던 이름으로 새로운 폴더가 만들어진 것을 확인할 수 있다.

• 해당 방법으로 템플릿을 다운받을 때의 장점

  해당 방법으로 다운로드하면 버전관리가 전혀되어있지 않은 상태이다.
  즉, git init을 하지 않을 상태! 그렇기 때문에 git init을 통해서 처음부터 다시 버전 관리를 할 수 있다.

  degit은 버전관리가 되어있지 않은 상태로 불러오고, git clone은 해당하는 저장소가 가지고 있는 버전의 내역까지 불러온다.

  따라서 해당 템플릿(폴더 내용)을 가지고 새로운 프로젝트를 만들 것이라면, git clone 명령은 적합하지 않다. 이럴때 degit 명령어가 유용하게 사용된다.

Bundler: Webpack Ep.2

정적 파일 연결

• 기본적인 파일 구성

  루트 경로에 static 폴더
  favicon.ico 파일과 images 폴더
  images 폴더 안에 logo.png 파일

• index.html에 img 태그

  <body>
    <img src="./images/logo.png" alt="Soha">
  </body>
  

  logo.png 파일을 찾으려면 static의 images 폴더 안으로 들어가는 경로로 해야 될텐데 static 폴더를 작성 안해도 잘 작동하는가? ⇒ Yes!

  npm run dev를 통해서 해당 파일들이 dist 폴더로 들어가게 되는데, 이때 logo.png 파일의 위치가 dist 폴더 안에서 images 폴더 안에만 존재하게 바뀌기 때문에 해당 경로로 작성해도 문제가 발생하지 않는다!

  다만, 저렇게 경로를 작성하기 위해서 구성옵션을 추가해야 한다.

• copy-webpack-plugin 패키지 설치

  npm i -D copy-webpack-plugin
  

• CopyPlugin

  const CopyPlugin = require('copy-webpack-plugin')
    
  ...
  plugins: [
      new HtmlPlugin({
        template: './index.html'
      }),
      new CopyPlugin({
        patterns: [
          { from: 'static'}
        ]
      })
    ]
  

  plugins에 new 키워드를 통해서 생성자함수를 실행해주고 옵션으로 patterns를 추가하고 배열데이터를 넣어준다. 옵션의 첫번째 아이템으로 객체 데이터를 넣어주고 from 속성에 static이라는 우리가 만든 폴더 이름을 명시해준다.

  CopyPlugin을 통해서 static 안에 들어있는 내용이 copy되어 dist 폴더에 들어갈 수 있게 만들어 준다.

  from을 통해 어디서부터 복사해서 넣을 것인지 patterns 옵션에 넣어 설정한다. 이것이 배열이라는 것은 해당 형식으로 여러개 경로들을 명시할 수 있다.

module

• 별도의 파일 관리

  css 폴더를 static 안에 만들어서 관리한다.
  정적 파일 연결에서 static 폴더 안에 있는 내용들은 dist 폴더에 들어가기 때문에 실제로 실행했을 때, 경로를 css 폴더 안의 main.css 파일 찾기로 해도 잘 출력이 되는 것을 확인할 수 있다.

  <link rel="stylesheet" href="./css/main.css">
  

• webpack을 활용한 파일 관리

  css 폴더를 루트 경로로 옮긴다.

  main.js 파일에 다음과 같은 코드를 작성한다.

  import '../css/main.css'
  

  import를 통해 main.css 파일을 불러온다. 변수명과 from은 사용하지 않아도 된다. 변수에 담아도 사용할 수 없기 때문이다. 그렇기에 단순하게 파일만 불러와도 된다.

  우리가 webpack의 진입점으로 설정해 놓은 것은 main.js 파일. 따라서 webpack은 무조건 main.js 파일부터 읽어나가기 시작한다.
  이때, main.js에 css 파일이 연결되어져 있으니 webpack이 main.js와 연결된 main.css도 읽을 수 있게 된 것이다.

  webpack이 main.css를 읽어서 index.html과 섞어서 다시 dist 폴더에 내어주는 구조가 된다.
  어떻게 보면 복잡한 구조지만 해당 구조로 다른 많은 것들을 실행할 수 있기 때문에 해당 방법을 사용하는 것이 좋다.

  단, 해당 방법은 문제점이 존재하는데 webpack은 css 파일을 읽을 수 없다는 것이다. 그래서 우리는 따로 패키지를 설치해줘야 한다.

• CSS 파일 리딩 패키지 설치

  npm i -D css-loader
  npm i -D style-loader
  

• module 옵션

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

  test에는 정규표현식을 작성한다. 해당 정규표현식으로 .css 로 끝나는 확장자를 찾는다.
  $의 의미는 해당 기호 앞에 있는 문자로 끝나는 문자를 찾는 것을 말한다.

  use의 경우에는 배열 데이터로 작성한다. 해당 배열 데이터 안에 설치한 패키지 이름을 작성한다.

  위 내용을 종합하자면, .css 확장자를 가지고 있는 모든 css 파일은 test라는 속성으로 해당하는 내용을 매칭해서 작성한 패키지들을 사용(use)한다는 의미이다.

  • 패키지의 역할과 작성 순서

    먼저 해석되는 것은 css-loader이다.
    css-loader는 main.js에서 import 키워드를 통해 main.css 파일을 가져오고 있는데 js에서는 css를 해석할 수 없으니 해당 내용을 해석할 수 있게끔 해주는 패키지이다.

    style-loader는 해석된 내용을 사용하는 패키지로, html의 style 태그 부분에 style-loader가 해석된 내용을 삽입해 주는 역할을 한다.

    작성 순서는 style-loader를 먼저 작성해줘야 한다.

SCSS

작성했던 css들을 모두 scss로 변경한다.

단, webpack.config.js 파일에서 정규표현식 부분에 해당 내용을 추가한다.

{
  test: /\.s?css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

s뒤의 물음표의 의미는 s가 있을 수도 있고, 없을 수도 있다는 것이다.
혹시라도 우리가 css 파일을 연결하게 되었을 때 발생할 문제를 방지하기 위함이다.
따라서, 해당 정규표현식으로 css, scss 파일 모두 찾을 수 있다.

하지만 해당 패키지들로는 scss 파일을 읽을 수가 없다. 추가 패키지를 설치해야 한다.

• scss 리딩 패키지 설치

  npm i -D sass-loader sass
  

• 패키지의 역할 및 순서

  sass-loader를 통해서 webpack에서 해당하는 css 파일을 읽어낼 수 있다.
  sass는 실제로 해당 내용을 읽을 때, 문법을 해석해 줄 수 있는 실제 sass 모듈이다.

  패키지의 순서는 sass-loader가 가장 먼저 읽어져야 하기 때문에 css-loader 다음에 둔다.

  module: {
      rules: [
        {
          test: /\.s?css$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader'
          ]
        }
      ]
    }
  

Bundler: Webpack Ep.1

프로젝트 생성

• 패키지 설치

  npm init -y
    
  # webpack 설치
  npm i -D webpack webpack-cli webpack-dev-server@next
  

  webpack을 설치하면서 webpack-cli 패키지와 webpack-dev-server 패키지도 같이 설치를 해준다.
  이때 webpack-dev-server 패키지는 webpack-cli 패키지와 버전을 일치시켜야 하기 때문에 뒤에 @next 키워드를 추가로 작성한다.

• package.json

  "scripts": {
      "dev": "webpack-dev-server --mode development",
      "build": "webpack --mode production"
    }
  

  개발용 webpack으로 서버를 열때는 webpack-dev-server 명령을 통해서 동작을 시킨다. 그리고 뒤에 —mode 옵션을 추가하고 옵션 값으로 development를 넣어준다. 현재 개발모드라는 것을 명시해 준 것이다.

  제품용은 webpack 명령어의 mode 값으로 production을 넣어준다.
  제품모드라는 것을 명시한 것이다.

  • webpack

    번들러가 동작하기 위한 핵심적인 패키지

  • webpack-cli

    커맨드 라인 인터페이스(터미널에서 입력하는 여러가지 명령들)를 지원하는 패키지. parcel에서는 기본적으로 지원했던 것이지만 webpack은 따로 설정해야 했기에 해당 패캐지를 설치한 것이다.

    해당 패키지 설치로 터미널에서 webpack 명령어 사용이 가능해진다.

  • webpack-dev-server

    dev 명령어를 통해서 개발서버를 오픈할 때(저장) 페이지를 바로 새로고침할 수 있도록 해주는 패키지이다.

    해당 패키지도 터미널에서 명령이 동작해야 하기 때문에 webpack-cli에 영향을 받는다. 그래서 패키지를 설치할 때 webpack-cli와 버전이 일치시켜야 했던 것이다.

• webpack.config.js

  parcel과는 다르게 서버를 열어주려면 구성파일을 제공해줘야 한다.
  webpack.config.js 라는 이름의 파일을 만들어 준다.

  해당 파일에 webpack의 구성옵션들을 작성해주면 된다.
  parcel은 구성옵션을 따로 정리할 필요가 없이 자동으로 되어있었지만 webpack은 자유도가 높은만큼 개발자가 따로 구성옵션을 작성해서 사용해야 한다.

entry, output

Concepts 웹팩 Link

webpack.config.js 파일은 브라우저에서 동작하는 것이 아니라 node.js 환경에서 동작한다. 우리가 저번에 봤던 것 처럼 파일을 내보낼 때 export가 아닌 module.exports를 이용해서 파일을 내보낸다.

여기서 entry와 output은 옵션이다.

• entry

  파일을 읽어들이기 시작하는 진입점을 설정하는 옵션이다.

  parcel의 경우 parcel index.html 작성하는 것으로 진입점을 설정할 수 있다. webpack의 경우에는 parcel처럼 cli 명령으로 하는 것이 아니라 구성옵션을 통해서 진입점 파일 설정을 해줘야 한다.

  entry 부분에 index.html 파일을 명시할 수 있겠지만, webpack은 기본적으로 html이 아닌 js를 진입점으로 사용한다.
  그래서 우리가 현재 가지고 있는 js 폴더의 main.js 파일을 진입점으로 설정해준다.

  module.exports = {
    // 파일을 읽어들이기 시작하는 진입점 설정
    entry: './js/main.js'
  }
  

• output

  entry 옵션을 통해서 읽어들인 파일의 기본적인 연결관계를 webpack이 분석을 해서 결과(번들)를 반환하는 설정하는 옵션이다.

  // import
  const path = require('path')
    
  // export
  module.exports = {
    entry: './js/main.js',
      
    // 결과물(번들)을 반환하는 설정
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js'
    }
  }
  

  • path

    경로. 어떠한 경로에 결과물을 만들어서 내어줄 것인지를 명시할 수 있다.
    path 속성에는 node.js에서 요구하는 절대경로를 필요로 한다.

    우리는 node.js에서 언제든지 가져와서 사용할 수 있는 path라는 전역모듈을 require를 통해 가지고와서 path라는 변수에 할당을 한다.
    이것을 아래쪽에서 사용하는데, path 변수에 resolve 메소드를 사용한다. resolve에는 첫번째 인수와 두번째 인수에 있는 기본적인 경로를 합쳐주는 역할을 한다.

    이때 첫번째 인수의 __dirname은 node.js에서 전역적으로 사용할 수 있는 변수이다. (따로 설정 없이 언제든지 불러올 수 있다.)
    __dirname은 현재 파일이 있는 그 경로를 지칭한다. 즉 webpack.config.js 파일이 있는 해당 경로가 __dirname의 경로인 것이다.

    __dirname의 경로와 dist 폴더(두번째 인수)의 경로가 합쳐져서 절대경로가 만들어지는 것이다.

  • filename

    해당 결과를 main.js에 entry해서 읽어들이기 시작하는 파일의 이름과 동일하게 지정한다.

    dist 폴더에 main.js라는 파일이름으로, entry에서 진입점으로 사용한 main.js에 연결된 모든 내용들을 번들로 만들어서 합쳐서 내어준다.

  • path와 filename의 default

    두 옵션은 따로 명시해줄 필요가 없다.

    기본적으로 webpack은 path로 dist 폴더에 결과물을 만들어준다. 따라서 dist 폴더에 결과물을 넣을 것이라면 따로 입력하지 않아도 작동한다.

    filename의 경우 entry에 지정한 파일의 이름으로 만들어지기 때문에 이것 역시 따로 지정하지 않아도 된다면 해당 옵션을 명시하지 않아도 된다.

  • 동작 확인

    내용이 잘 동작하는 지 확인한다.

    npm run build
    

    dev가 아닌 build를 통해 잘 동작하는지 확인을 해준다.

    처리가 완료되면 dist 폴더가 생성된다. 우리가 설정해뒀던 main.js 파일이 잘 들어와 있는 것을 확인할 수 있다.

  • clean

    우리가 내용을 바꿔서 저장한다면 어떻게 될까?

    폴더 이름은 public으로 변경하고 파일이름은 main.js로 설정한뒤 저장을 해준다. 그러면 public 폴더가 새로 생성되고 해당 폴더 안에 main.js 파일이 만들어진다.

    module.exports = {
      entry: './js/main.js',
      output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'main.js'
      }
    }
    

    폴더 명은 그대로 public으로 두고 파일 이름은 app.js로 변경하고 다시 저장하면 어떻게 될까?

    module.exports = {
      entry: './js/main.js',
      output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'app.js'
      }
    }
    

    public 폴더 안에 main.js 파일과 app.js 파일 두개가 동시에 존재하게 된다.

    우리가 구성옵션을 바꾸게 되면 바꾸기 이전의 파일들이 그대로 존재하게 되는 문제가 발생하게 되었다. 이것을 해결하는 옵션이 clean 옵션이다.

    clean을 true로 설정하게 되면 기존에 만들었던 내용들을 제거하고 새롭게 설정한 내용만이 존재하게 된다.

plugins

우리는 진입점으로 main.js를 설정했는데 이 main.js에 index.html을 삽입해서 개발서버를 오픈해 줄 수 있다.

• html-webpack-plugin 패키지 설치

  개발 의존성모드로 html-webpack-plugin 패키지를 설치해 준다.

  npm i -D html-webpack-plugin
  

• plugins

  번들링 후 결과물의 처리 방식 등의 다양한 내용을 지정해주는 플러그인들을 설정해 줄 수 있는 옵션이다.

  // import
  const path = require('path')
  const HtmlPlugin = require('html-webpack-plugin')
    
  // export
  module.exports = {
    ...
    
    // 번들링 후 결과물의 처리 방식 등 다양한 플러그인들을 설정
    plugins: [
      new HtmlPlugin({
        template: './index.html'
      })
    ]
  }
  

  HtmlPlugin 변수를 생성하여 해당 패키지를 불러온다.

  export의 구성옵션으로 plugins를 추가해주고 배열 데이터를 할당한다.
  배열 데이터의 첫번째 아이템으로 위에서 가져왔던 html plugin을 new라는 키워드로 생성자 함수처럼 실행을 해준다.

  생성자 함수가 실행이 되면서 해당 자리에 어떠한 결과가 반환이 되는데, 이때 반환된 결과가 plugins의 첫번째 배열의 아이템으로 사용된다는 것이다.

  생성자 함수의 데이터로 객체 데이터를 생성하여 template 옵션에 index.html 파일을 명시해 준다.
  명시한 index.html 파일은 루트경로에 만들어둔 index.html을 지칭한다.

  webpack이 entry로 시작해서 js 폴더의 main.js 파일을 읽어서 그것에 대한 결과를 output에 있는 옵션으로 만들어낸다. 이걸 만들어내는 과정에서 plugins에 명시되어져 있는 여러가지 plugin들을 활용하게 된다.
  이때, HtmlPlugin을 통해서 template로 루트경로에 만들어두었던 index.html을 지정한 것이다.
  이 index.html과 결과물을 만들어내는 main.js에 대한 합본은 dist 폴더에 만들어두는 역할을 한다.

• dev 서버 실행 시 localhost가 뜨지 않는다면

  devServer 옵션을 추가해준다.

  // export
  module.exports = {
    ...
      
    devServer: {
      host: 'localhost'
    }
  }
  

Bundler: Parcel Bundler Ep.2

babel

자바스크립트의 표준은 ECMA Script라고 하며 간단하게 ES라고 부른다. 이게 2016년에 새로 나왔는데 ES6라고 부른다. 2015년을 기준으로 이전에 사용했던 것은 ES5 혹은 ES4이다.
우리가 요즘 사용하는 것들은 ES6, ES7, ES8의 최신의 문법들이다. 이런 최신의 문법들은 구형 브라우저에서 동작하지 않을 수 있다.

그래서 우리는 최신의 자바스크립트 코드를 babel을 통해서 구형 브라우저에서도 동작할 수 있는 ES5로 변환 시켜줄 수 있다.
변환을 컴파일이라고도 부르며 babel을 컴파일러라고 부른다.

• babel 설치하기

  # 두가지 패키지 설치
  npm i -D @babel/core @babel/preset-env
  

• .babelrc.js 파일 생성

  구형 브라우저로 변환하는 코드 작성

  module.exports = {
    presets: ["@babel/preset-env"]
  }
  

  이제부터 우리가 작성하는 자바스크립트는 babel을 통해서 ES5의 문법으로 변환이 되어 구형 브라우저에서도 동작을 하게 된다.

• package.json, browserslist 옵션 추가하기

  "browserslist": [
      "> 1%",
      "last 2 versions"
    ]
  

  기존에 postcss를 적용한 적이 있다면, 해당 옵션이 잘 적혀있는지 확인만 하고 넘어가면 된다.
  작성한 적이 없다면 해당 내용 추가 작성을 해준다.

• 오류 없이 잘 작동하는지 확인하기 npm run dev

비동기 문법 동작하게 하기

• 비동기 함수 만들기

  함수 앞에 async를 붙여 비동기 함수로 만들어준다.

  async를 통해서 test라는 이름의 비동기 함수를 만들었고 내부에서 await 키워드를 통해 실제로 무엇인가를 기다리는(promise) 내용을 만들었다.

• regeneratorRuntime is not defined 에러가 발생했다면

  npm i -D @babel/plugin-transform-runtime
  

  • .babelrc.js

    module.exports = {
      presets: ["@babel/preset-env"],
      plugins: [
        ["@babel/plugin-transform-runtime"]
      ]
    }
    

    해당 플러그인을 통해서 async, await가 동작하게 된다.

CLI

구글에 parcel 검색 후, parcel 한국어판에 접속하면 해당 내용을 확인할 수 있다.

🖥 커맨드 라인 인터페이스(CLI) Link

CLI (Comman Line Interface)

대표적으로 터미널에서 어떤 글자에 해당하는 명령어로 여러 내용들을 실행한다. npm i로 패키지 설치라던가 git으로 버전관리라던가. 이런 것들을 CLI라고 부른다.

위 문서는 parcel bundler를 통해서 CLI로 할 수 있는 여러가지 명령어들을 정리해둔 것이다.

명령어

• Serve

  개발용 명령어이다. 개발용 서버를 시작한다.

  parcel index.html
  

• Build

  제품용 명령어이다.

  parcel build index.html
  

옵션

• 결과물 디렉토리

  기본값은 dist 폴더이다.
  dist 폴더 이름을 다른 이름으로 변경하고 싶다면 아래와 같이 명령어를 실행한다.

  parcel build entry.js --out-dir build/output
    
  # entry.js == index.html
  # build/output => dist를 대신하는 폴더 구조. ouput이 변경한 이름
  

• 포트 번호

  기본값은 1234이다.
  포트 번호를 변경하고 싶다면 serve 명령어를 통해 변경한다.

  parcel serve entry.js --port 1111
    
  ### 1111 -> 변경하고자 하는 포트 번호
  

• 브라우저에서 열기

  해당 옵션은 npm run dev를 실행했을 때 직접 브라우저에서 포트번호로 이동을 해줘야 했다. 해당 옵션을 사용하면 우리가 따로 열어줄 필요없이 자동으로 브라우저가 열린다.

  기본값을 비활성 되어있다.

  parcel entry.js --open
  

• 빠른 모듈 교체의 비활성화

  기본값은 HMR 활성화이다.

  HMR은 빠른 모듈 교체(Hot Module Replacement)로, 런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식을 말한다.
  실제 프로젝트에서 어떤 코드를 고치고 저장하면 바로 브라우저에 반영이 되는데 이게 HMR이다.
  해당 옵션을 비활성화 하고 싶다면 다음과 같이 명령어를 작성한다.

  parcel entry.js --no-hmr
  

• 파일시스템 캐시 비활성화

  기본값을 캐시 활성이다.

  캐시활성이 되어 있어서 우리가 개발서버를 열거나 제품화를 시킬때 이미 캐시가 되어져 있는 내용때문에 훨씬 빠르게 내용이 처리될 수 있다.
  다만, 가끔씩 캐시 활성으로 인해 문제가 발생하는 경우가 있다. 그럴때 해당 옵션을 사용하여 파일시스템 캐시를 비활성화 시켜준다.

  캐시 비활성화로 속도는 저하될 수 있지만 매번 새로운 내용으로 결과를 만들어 낼 수 있다.

  parcel build entry.js --no-cache
  

옵션 변경 적용해보기

• 포트 번호 바꾸기

  package.json 파일

  "scripts": {
      "dev": "parcel index.html --port 9876",
      "build": "parcel build index.html"
    }
  

• 주의!

  구성옵션 변경은 꼭 필요에 따라서만 사용하는 것이 좋다.
  parcel bundler는 개발자가 따로 구성옵션을 제공하지 않고 자동으로 기본적인 내용을 동작 시키는 것이 핵심이기 때문에 필요하지 않다면 구성 옵션 변경은 자제하자.

저장소 업로드

• .gitignore 파일 생성

  .cache
  .DS_Store
  node_modules
  dist
  

• git(저장소) 업로드

  # 버전관리 초기화
  git init
    
  # 변경 내용 확인
  git status
    
  # 버전관리 시작
  git add .
    
  # 버전 생성
  git commit -m "내용"
    
  # 버전 생성 확인
  git log
  # 빠져나갈때는 Q키