Kang-ji

components/LoginForm.vue

views/LoginPage.vue

App.vue

components/common/AppHeader.vue

컴포넌트 간 데이터전달 방법

1. 기본 컴포넌트 통신 방법

LoginForm안의 데이터 값을 LoginPage를 거쳐서 APP 로 보낸 후 다시 AppHeader로 전달

LoginForm에서 이벤트를 2번 올리고 App에서 1번 내린다

2. EventBus

로그인폼에서 APP헤더로 보내서 스트링값으로 표현하는 방법

3. Store - Vuex (추천)

Data를 Store에 담아 꺼내서 어디서든 자유롭게 사용

규모가 커질수록 스토어를 통해 상태괸라를 하면 편하게 관리할 수 있다. 

• 뷰 라우터 Programmatic Navigation 문서

router.push(location, onComplete?, onAbort?)

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: '123' } })

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

const userId = '123'
router.push({ name: 'user', params: { userId } }) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// This will NOT work
router.push({ path: '/user', params: { userId } }) // -> /user

Vue CLI 3.X 부터 적용되는 내용

지난포스팅에서 .env파일에 Vue Cli 3부터 제공되는 VUE_APP_ 접두사를 활용하여 환경변수를 설정 

로컬호스트 3000번으로 설정해준 상태이지만

실무에선 Public한 도메인에 오픈되기 때문에 배포하게되면 맞지 않게 된다.

프로토타이핑시엔  http://localhost:3000/ 을쓰고

서버배포시 들어갈때 아래의 도메인.com 으로 사용하게됨.

이와같이 배포용과 개발용 매번환경변수들을  따로 관리하게되는데

아래의 예 처럼 키를 따로 분리하여 관리하는것이 아닌 Vue CLI에서 제공하는 방법으로 설정해주면 편리하다.

예시 (X)

VUE_APP_API_URL_DEPLOYMENT = https://vue-til.com/
VUE_APP_API_URL = http://localhost:3000/

.env파일과 마찬가지로 프로젝트 루트에 .env.development 파일생성

.env 파일보다 .env.development 파일이 최 우선순위로 설정됨

.env / .env.development  / .env.production  가 제공됨.

.env.development 은 개발시에 띄울 로컬서버(호스트), 

.env.production 은 npm run build 에 적용된 production모드이고

.env 에는 위의 개발모드와 프로덕션모드가 없을때 공통으로 들어갈 변수를 설정해주는 기본 파일이다.

설정파일을 변경했을땐 서버 재실행이 필요함. 

서버 엔드포인트 API 주소를 환경변수로 관리하는 방법

프로젝트 Root돌더 위치에 .env 파일 생성. 키 = 값 의 형태로 작성한다. (환경변수 파일)

.env

API_URL = http://localhost:3000/

기존 axios API 파일 

설정한 .env환경변수 파일을 api/ index.js에서 가져오는 방법

vue-cli 2.X 까지는 .env팡리을 애플리케이션 소스코드에서 들고올려면 웹펙의 DefinePugin을 사용해줘야했다. 
vue-cli 3.X 부턴 사용자 편리를 위해 자체로 규칙을 제공하는데 
VUE_APP_ 접두가사 붙은 변수는 자동 로드된다.

.env환경변수의 파일은 자동으로  axois api/index.js에서 들고올 수 있게 된다.

index.js 에서 .env 파일내 소스 사용하기

// api/index.js

// url 공통화
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
});

// .env
VUE_APP_API_URL = http://localhost:3000/

https://webpack.js.org/plugins/define-plugin/

API 설정 공통화

기존 url전체 로컬호스트 3000을 바라보는 반복되는 url 소스를 각각 연결하게되는데

// 회원가입 api함수
function registerUser(userData) {
  const url = 'http://localhost:3000/signup';
  return axios.post(url, userData);
}

// 로그인 api함수
function loginUser() {
  const url = 'http://localhost:3000/login';
  return axios.post(url);
}

하나의 엔드포인트를 바라보는 상황에서

로컬호스트 서버 url을 공통화한 후 환경변수 파일을 설정해준다. 

AxiosRequestConfig 공통설정은 axios.create({ })  안에 넣어준다. 

url api 공통화 처리 (instance에 모두 담아서 처리)

// url 공통화
// 요청할때 공통설정들을 모두 넣을수 있다.
const instance = axios.create({
  baseURL: 'http://localhost:3000/',
});

function registerUser(userData) {
  // const url = 'http://localhost:3000/signup';
  // return axios.post(url, userData);
  instance.post('signup', userData);
}

Axios

Axios는 브라우저, node.js를 위한 Promise API를 활용하는 HTTP 비동기통신 라이브러리 
Axios를 활용하여 API문서를 구조화 한다. 

axios 설치하기 (dependencies에 설치)

npm i axios

기본 사용법

※ 위와 같이 사용할 컴포넌트(.vue)파일에서 간단하게 import하여 사용하는 방법이 있으나

API폴더로 구조화하여 import 정리된 코드로 작성하는 것을 권장한다. 

API 구조화

1. api 폴더생성 > index.js파일 생성

api/index.js

import axios from 'axios';

function registerUser() {
  const url = 'http://localhost:3000/signup';
  return axios.post(url);
}

export { registerUser };

2. 컴포넌트 파일(SignupForm.vue)에서 registerUser를 가져오기

라우터의 폴백기능

속성에 정해지지 않은 없는 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을 컨트롤 한다. 

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

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

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 터미널에서 정상적으로 뜨는 화먄

git clone

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

$cd vue-til-server

Vuter

Vue VSCode Snippets

ESLint

TSLint