Kang-ji

라우터의 폴백기능

속성에 정해지지 않은 없는 url에 대해 반응하는 router 설정해주기

routes/index.js

윗쪽 설정해준 url을 제외한 모든 url에 대해서 반응하겠다.

정의되지 않은 페이지는 아래와 같이 notfound페이지가 뜸.

리다이렉트

현재 초기페이지에 맵핑된 화면이 없다는 

functional 컴포넌트 

localhost:8080 로 갔을때 초기화면에 로그인 페이지로 바로 가게 하기위한

리다이렉트 속성 사용하기

{
  path: '/',
  redirect: '/login',
},

초기 페이지 진입할대마다 login화면 페이지로 리다이렉트로 화면이 뜸. 

• Window History API
• 웹팩 코드 스플리팅 문서
• Vue.js 다이나믹 임포트 문서

Network패널 

일반적인 페이지는 메뉴마다 페이지 가이동할대 마다 서버로가서 해당 html페이지를 받아와서 

화면에 뿌리며 화면전환이 일어나는데 

싱글페이지 애플리케이션의 경우

현재패이지가 윈도우histrory API 를 통해 url을 컨트롤 한다. 

초기에 애플리케이션 로딩속도를 줄이고 사용자의 경험이 향상되는 효과가 있다. 

필요한 자바스크립트 파일을 그때그때 불러옴

git clone

$ git clone https://github.com/joshua1988/vue-til.git

git checkout

$ git checkout 1_setup

package.json에 정의된 라이브러리 설치하기 

npm install

vue에서 파일 절대경로로 세팅하기 

프로젝트 최상위 폴더 위치에 jsconfig.json 파일을 생성 

jsconfig.json

//jsconfig.json

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

지정한 절대경로 @/ 을 사용하여 파일을 import 한다. 

vue create vue-til

Manually select features 

Chose Vue , version Babel , Unit Testing

ESLint + Prettier

Lint on save

Jest

In dedicated config files

No

Unit Test Jest로 선택되어 Jest 문법으로 정의됨.

npm i 

API 설치

npm run dev

파일내 설정된 포트번호 확인 

http://localhost:3000/api/docs/

애플리케이션에 설정할 데이터베이스 연결

MongoDB를 Node.js에연결하는 코드

각각의 에플리케이션 저장소를 가지고 게뱔

몽도DB의 클라우드 버전과 클라우드에서 순차적 세팅

몽도DB에서 제공하는 크라우드 서비스

https://www.mongodb.com/ko-kr/cloud

signup 가입해주기

StartCluster Free 모드로 생성해주기

Node.js 서버연결을 위해 Security에서 네트워크 엑세스를 풀어줘야함

1. Network Access

통신이 될수있도록 네트워크 우회정보를 등록해준다.

2. Database Access

MongoDB 에 접속할수 있는 계정 생성

test / 1234 , read, wirte 기본설정값 확인후 Add User 클릭하여 user생성

드래그한 스트링값을 코드에 넣어주면 데이터베이스가 연결이 됨

스트링값을 덮어쓰고 <password> 를 설정해준 비밀번호 1234로 변경 해준다. 

Try It Out 을 클릭해주면 아래의 Input이 열리게 된다. 

vscode 터미널에서 정상적으로 뜨는 화먄

지난 글에서 NVM 설치내용을 다룸. 

Node 버전변경 방법

프로젝트 경로의 터미널에서 nvm isntall [노드버전] 을 실행하면
해당버전이 설치돠면서 (최근)설치한 버전으로 세팅된다. 
버전 다운그레이드, 버전 업그레이드역시 install를 사용하여 변경해주면 됨. 

현재 Node 버전 12.18.0

추가로 필요한 Node 버전 install

nvm install 10.16.3

원래 버전으로 가고 싶을경우 다시 Install 하면 설치되며 사용 버전도 셋팅됨

nvm install 12.18.0

NVM 소개 및 설치

NVM(Node Version Manager) 

Node.js 의 버전을 관리하는 도구
Node 버전이 다를경우 충돌이 남.
프로젝트마다 사용되는 Node버전이 다를 경우 NVM을 통해 node 버전을 관리할 수 있다.

방법1. 설치하기 (- 이방법이 안될 경우 아래로 이동해서 방법 2로!!!! )

1. Git Bash 터미널 환경에서 NVM 공식 홈페이지에서 제공되는 명령을 실행하여 클론한다.

(윈도우의 경우 PowerShell 일 수 있는데 Bash로 변경해줘야함)

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

2. 설치가 완료되면 nvm -v 로 버전확인

$ nvm -v

3. 'nvm: command not found' 에러가 발생하게 되는데

명령어을 이용할때마다 NVM이 입력될 수 있게 세팅이 되지 않아 발생하는 에러.

4. 터미널 창에서 vi 편집기를 이용해서 home 디렉토리 밑에 있는 .bash_profile 또는 .bashrc 파일을 설정 해줘야한다.

vi ~/.bashrc 를 입력해주고 Enter. 
i 를 입력하여 삽입(Insert)쓰기모드로 전환한다.

$ vi ~/.bashrc

i

설정해줄 아래 구문을 복사하여 터미널창에 붙여준다. (이미 설정된 내용이 있을 경우 뒷쪽에 붙여준다. )

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

5. ESC를 눌러서 쓰기모드를 해제.

 : wq 를 입력하여 편집된 파일을 저장해준다.

! 저장이 됬는지 확인하려면  vi ~/.bashrc 를 재실행하면 수정한파일 확인가능.
! 수정이력이 없을 때는 :q 를 입력하여 편집종료해준다.  (강제종료는 :q!)

6. 프로젝트 경로의 새터미널에서 nvm 또는  nvm -v 을 치면 성공적으로 실행되는 것을 볼 수 있음..!!!!!!!!!

본문자료 - NVM 깃헙 https://github.com/nvm-sh/nvm

방법2. 직접 설치하기

PC를 포맷해서 방법1. 대로 재설치를 해봤는데

갑자기 git관련 SSL 인증서 오류관련 메세지로 설치에 계속 오류가뜸... 

직접 설치 방법으로 간단하게 해결가능했다.

윈도우용 NVM 설치 URL

https://github.com/coreybutler/nvm-windows/releases

이때 릴리즈 이슈 업데이트 시간때마다 node지원 버전대가 다르다. 

사용가능한 node 버전 조회하기

nvm list available

변경할 Node 버전 설치 

$nvm install [node버전]

nvm install 14.16.1

로컬에 설치된 node버전 조회

nvm list

변경할 node버전 사용하기

$nvm use [node버전]

nvm use 14.16.1

설정된 node버전 확인

node -v

https://devbirdfeet.tistory.com/101

git clone

$ git clone https://github.com/joshua1988/vue-til-server.git

$cd vue-til-server

Vuter

Vue VSCode Snippets

ESLint

TSLint

https://swagger.io/

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

Polyfill 

Vue 3.X 이상의 경우 ES6사용으로 인해 IE브라우저를 지원하지 않는다 
IE 지원을 위해 polyfill등의 추가 세팅이 필요

• @babel/polyfill, @babel/preset-env 설치 

npm install --save @babel/polyfill
npm install --save-dev @babel/preset-env

• main.js (※ 최상단에 위치할 것)

//main.js

import '@babel/polyfill'
import Vue from 'vue'

• vue.config.js 세팅된 선언이 많을 경우 하단에 ' , ' 입력 후 이어서 붙여주기

//vue.config.js

const ansiRegex = require('ansi-regex');

module.exports = {
	transpileDependencies: [ansiRegex]
}

• babel.config.js

// babel.config.js

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

vue.config.js

- vue.config.js 파일에 configureWebpack 옵션을 추가

- 프로젝트 bulid 시 css 와 js 파일 단일파일로 추출 (컴파일)

// vue.config.js
module.exports = {
  css: {
  	extract: {
    	filename: 'portfolio_ui' +"-"+ require("./package.json").version + '.min.css'
    },
  },
  configureWebpack: {
    output: {
        filename: 'portfolio_ui' +"-"+ require("./package.json").version + '.min.js'
    },
    optimization: {
        splitChunks: false
    }
  },
}