서론

---

현재 Vue.js 를 활용한 프론트엔드 개발과 Node.js 를 활용한 백엔드를 진행하고 있다. 기존의 .Net Web Framework 와 html, css, jQuery 를 이용한 레거시코드들을 프로젝트로 활용했었고, 이번 프로젝트의 경우 내 주도권이 큰 관계로 Vue.js 를 적용하였다. 이번 포스팅을 통해 직접 실무과정에서 겪었었던 고민들이나 공부했었던 다양한 포스팅들을 정리해보고자 한다.

프로젝트 생성과 환경

---

1-1. Vue CLI 를 활용한 프로젝트 생성

• vue-cli 설치

# npm install --save @vue/cli
# vue create [project name]

* Manually select features
* Bable, Linter / Formatter, Unit Testing
* ESLing + Prettier
* Jest 
* In dedicated config files.. 

여러 포스팅들을 보고 위와 같은 순서대로 진행했엇는데 타 블로그를 통해 꼭 확인하고 선택하길 바란다. 더불어 Vue 2.x 보다는 Vue 3.x를 추천하는데 여러가지 이유가 있지만 무엇보다 typescript 를 정식 지원한다는 점이 매우 좋은 것 같다.

1-2. ESLint

• ESLint?
  Javascript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구
  사용자 정의된 규칙을 정의하고 로드할 수 있는 장점이 있다.
• vue.config.js

module.exports = {
	devServer : {
    	overlay : false
    }
}

1-3. Prettier

• 코드 정리 도구
• 여러사람들이 기준을 만들어서 코드를 정리 할 수 있음
• .eslintrc.js

module.exports = {
    ...
    rules: {
        ...
        "prettier/prettier": ['error', {
            singleQuote: true,
            semi: true,
            useTabs: true,
            tabWidth: 2,
            trailingComma: 'all',
            printWidth: 80,
            bracketSpacing: true,
            arrowParens: 'avoid',
        }]
    },
    ...
}

1-4. 절대 경로 설정 찾기

• 파일 위치의 레벨이 깊어질 수록 import 과정에서 상대 경로 찾기가 불편
• webpack의 revolve 옵션을 활용하면 매우 쉽게 문제를 해결할 수 있음
• jsconfig.json(다른 이름일 수도 있음, 오픈소스의 경우 잘 확인)

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./src/*"
      ],
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

Router & library & component

---

2-1. Vue Router 설정

• @/router/index.js (여기서 @는 ..../src 를 의미한다)

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter); // 플러그인 실행

export default new VueRouter(); // VurRouter 인스턴스 생성

또는

// URL splitting Example Code

import LoginPage from '@/view/LoginPage.vue';
import SignupPage from '@/view/SignupPage.vue';
...
export default new VueRouter({
    routes: [
        {
            path: '/login',
            component: LoginPage,
        },
        {
            path: '/signup',
            component: SignupPage,
        },
    ]
});

• @/main.js

import router from "@/router/index";
// ... import modules(middleware)

new Vue({
	...,
    router,
})

2-2. 코드 스플리팅 이론

• login page, project page, edit page 등.. spa 는 기능별로 페이지를 분리하는 경우가 존재
• vue-cli(or webpack) 등을 통해 빌드를 진행시 전부 *.js 로 결과물이 public 디렉토리에 생성됨
• 하지만 모든 페이지별 spa 를 전부 클라이언트한테 전달하는것은 무의미할 가능성이 있고, 모바일이나 웹의 경우 더욱 분리가 필요할 수 있음
• 따라서 2-1 에 소개한 splitting 방식과는 다르게 아래와 같이 사용할 수 있음

• @/router/index.js

...
routes: [
        {
            path: '/login',
            component: () => import ('@/views/LoginPage.vue'),
        },
        {
            path: '/signup',
            component: () => import ('@/views/SignupPage.vue'),
        },
    ]
...

다음과 같이 설정시 화살표 함수로 코드가 스플리팅 된다.

2-3. DocumentRoot

• redirect key 값을 이용할 수 있음
• @/router.index.js

...
routes: [
        {
            path: '/',
            redirect: '/login',
        },
        {
            path: '/login',
            component: () => import ('@/views/LoginPage.vue'),
        },
        {
            path: '/signup',
            component: () => import ('@/views/SignupPage.vue'),
        },
    ]
...

2-4. Not Fount 처리

---

• @/router/index.js

...
routes: [
        ...
        {
            path: '*',
            component: () => import ('@/views/NotFoundPage.vue'),
        },
    ]
...

2-5. History 모드와 Hash 모드

• @/router/index.js

...
export default new VueRouter({
    mode: 'history',
    routes: [
    ...
    ]
});

• mode : history 를 의 경우 URI 에서 # 가 사라지게 됨
• 기본적으로 URI 에는 # 가 붙어있는데 이유는 아래와 같다
  (1) 해시 모드에서 URI 해시를 사용해서 spa 범위 내의 경우 블링크 발생 x
  (2) 히스토리 모드의 경우 서버가 가지고 있는 주소임에도, 해당 url에 한번에 접속이 불가능한 경우가 발생
  (3) 히스토리 모드를 사용하는 경우 서버에서 기본 진입경로에 따라 index.html 이 default 로 정해져있어야 함