TIL - Day 33~40 Vue

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - Vue(Feat. webpack, serverless function)

---

🗓 Vue

CSS 과제를 진행하고 바로 Vue 학습을 진행하였다. 시간이 정말 순식간에 흘러간 것 같다. 8일간의 강의를 통해 Vue를 사용한 프로젝트도 하나 진행하였고 이를 통해 배운 점에 대해 간단하게 정리해보려고 한다.

 

Vue 드디어 써봅니다.

이전에 간단하게 찍먹한 정도에서 직접 사용해보며 본인이 느낀 Vue의 장점은 아래와 같다.

 

• 사용 방법이 아주 복잡하지 않다.
• 사용하는 방법이 어느 정도 정해져 있다.
• 공식 문서 정리가 잘되어있다.

짧은 기간 동안 학습해보며 리액트보다 빠르다는 점은 사실 느끼기 힘들었지만 2번과 3번 장점이 공존하기 때문에 다른 페이지를 찾아볼 필요가 많이 없었다. 또한 2번을 통해 왜 Vue가 프레임워크로 분리되는지 느낄 수 있었다.

 

템플릿 문법과 라이프 사이클

뷰가 간편하다고 느낀 점 중 하나는 하나의. vue 파일 안에 HTML, CSS, JS 모두 정리하여 수정이나 관리가 아주 편했다.

리액트에서는 JSX 문법이 있다면 Vue에는 템플릿 문법이 있고 Vue만의 기능들을 HTML 안에서 쉽게 사용할 수 있어 간편했다.

이전에 리액트를 공부할 때에는 정말 간략하게 마운트에 대한 개념만 이해하고 있었으나 Vanilla JS 컴포넌트 방식으로 직접 element를 만들고 append 하는 과정을 통해 라이프 사이클에 대한 내용이 더 이상 막연하게 느껴지지 않았다.

created, mounted, updated, unmounted(before 생략...)와 같은 라이프 사이클 훅들과 virtual DOM에 대한 이해도도 높아졌다고 생각했다.

 

This와 Reactive 상태

Vue extension을 사용하여 Binding에 크게 신경을 쓰지 않아도 자동 완성을 통해 쉽게 접근할 수 있었지만 이 프레임워크를 사용하며 this binding 개념을 이해하고 사용할 때 이해도가 더 높아질 것이라고 생각했고 이와 연관되어 화살표 함수를 언제 사용할 수 있는지에 대한 이해도 자연스럽게 따라올 것이라고 생각된다.

 

Vue 활용법

리스트 렌더링, 이벤트 핸들링 같은 문법들은 보간 사용이나 JavaScript를 어느 정도 이해하고 있다면 Vue를 정말 잘 활용할 수 있을 거라고 생각했고 이외에도 동적 컴포넌트, teleport 등 신박한 기능들에 대해서도 학습할 수 있었다. 이번 과제를 진행하며 신박한 기능은 많이 사용하지 못했지만 기초적인 문법은 거의 다 이해할 수 있었다.

 

vuex, pinia

props의 부모 자식 컴포넌트 간의 상태 값 전달을 통하여 너무 깊지 않다면 어렵지 않게 전달할 수 있지만 이번에는 store를 사용해보고 싶었고 getters, mutations, actions를 작성해보며 지난 노션 클론 프로젝트 때 상태 관리의 어려움을 해소할 수 있었다.

특강을 통해 Pinia에 대한 간략한 강의도 듣게 되었는데 개인적으로는 Pinia의 사용법이 더 간결하다고 느끼게 되었다.

 

번들링 툴 (webpack, parcel, vite)

이전까지는 모두 정해진 내용의 번들링만 사용해봤다면 이번에는 직접 번들링 config를 작성하는 법도 학습하게 되었다. vite가 속도적인 면이나 편의성 부분에서 webpack보다 앞선다고 느끼지만 현업에서는 webpack을 많이 사용한다고 한다. 그리고 사용법에 대해서 잘 알지 못해 문제가 생길 때 구글링을 통해 쉽게 답을 얻을 수 있어서 나뿐만 아니라 다른 분들도 webpack config 작성에 어려움이 있는 것 같았다.

이전에 진행했던 노션 프로젝트는 ES modules를 활용한 즉 컴포넌트 방식으로 진행하였는데 배포에서 문제가 생겼고  이를 해결하기 위해서는 번들링이 필요하였다. 아직도 사용해보거나 설정해본 부분이 많지 않지만 더 자주 다뤄보아야겠다고 생각했다.

나도 아직 익숙하지 않기 때문에 나중을 위한 config를 공유하려고 한다.

 

//webpack.config.js
//for vue, sass
const { VueLoaderPlugin } = require('vue-loader')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const Dotenv = require('dotenv-webpack')

module.exports = {
  resolve: {
    extensions: ['.vue', '.js'],
    alias: {
      '~': `${__dirname}/src`,
    },
  },
  entry: './src/main.js',
  output: {
    path: `${__dirname}/dist`,
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.s?css$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlPlugin({
      template: './src/index.html',
    }),
    new CopyPlugin({
      patterns: [{ from: 'static' }],
    }),
    new Dotenv({
      systemvars: true
    }),
  ],
}

 

Serverless function

구현한 프로젝트의 api키를 숨기고 배포하기 위해서는 Serverless function을 이용해야 했고 많은 실패를 통해 사용법과 개념에 대해 이해하게 되었다.

키를 숨기고자 할 때 env파일을 만들고 gitignore하여 파일을 숨기고 배포하는 것은 이미 익숙하지만 vercel이나 netlify와 같은 사이트를 통해 배포하는 경우 해당 방법은 제대로 동작하지 않았다. 이전 커피 챗과 문서를 조금 읽어보며 내가 이해한 내용을 간단하게 정리하자면

• vercel이나 netlify는 Environment Variables 기능을 지원하고 이를 사용하기 위해서는 각 페이지에서나 cli를 통해 지정해야 한다.
• 이렇게 지정된 내용들은 단순히 아무 곳에서나 process.env와 함께 사용할 수 있는 것은 아니다.
• 해당 내용들을 사용하기 위해 Serverless function을 사용해야 하고 개발자가 지정한 곳(default: root의 api 폴더)에서 접근이 가능하다.
• serverless function에서 fetch를 사용할 때 node.js에서는 fetch 기능이 없기에 node-fetch를 인스톨해야 한다.(webpack을 사용한 경우에는 2.6.7 버전을 사용해야 인식이 가능했다.)   

이러한 내용들을 알게 되었고 결과적으로 따로 작성한 serverless function들을 호출할 때 어떠한 서버에서 함수가 호출되고 이 과정에서 배포 사이트가 필요한 환경변수들을 주입하고 함수가 실행되게 된다.

함수가 저장된 서버 환경 혹은 너무 먼 곳에서 로드한다면 실행 속도에도 영향을 줄 수 있다는 문제점이 있다. (이를 개선하기 위한 serverless edge function이라는 개념이 있다.)

새롭게 배운 것

• Vue가 지향하는 Progressive Framework의 개념
• Vue의 기본 디렉티브 사용법
• Vue의 라이프 사이클
• Vue의 상태 관리 라이브러리 사용법
• 번들링 툴 사용법
• serverless function 사용법과 개념
• ESLint 사용법

깨달은 점

• Vue 다른 라이브러리와 프로젝트와 결합이 쉽고 부분만 지원도 가능하여 점진적인 도입이 가능하다.
• v-if와 v-show 사용 시 초기 비용, 전환 비용의 차이
• head 태그에 script를 작성하는 것이 권장되지만 런타임에 문제가 있을 수 있기에 defer를 사용하여 나중에 실행되도록 유도해야 한다.
• package.json 파일에 작성된 버전이나 라이브러리들을 npm i로 그대로 로컬 환경에 세팅이 가능하다.
• webpack을 통한 번들링 설정 시 css 관련 내용은 순서가 중요하다.
• pinia는 차세대 vuex로 언급되고 있고 사용법 또한 vuex보다 간단하다.

참고했던 자료

멘토님이 작성하신 prettier-eslint 구분해서 사용하는 방법

prettier와 eslint를 구분해서 사용하자

serverless-functions

Serverless Functions