Vue Router 

NPM (Install)

// vue-cli 3.x 이상 
npm install vue-router@next

// vue-cli 2.x 
npm install vue-router --save 		// dependencies
or
npm install vue-router --save-dev 	// devDependencies

dependencies와 devDependencies의 차이는 다음과 같습니다.
"dependencies": 프로덕션 환경에서 응용 프로그램에 필요한 패키지.
"devDependencies": 로컬 개발 및 테스트에만 필요한 패키지.

main.js

• vue-cli 3.x 이상

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');

• vue-cli 2.x 이상

// main.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

routes/index.js

• vue-cli 3.x 이상

// routes/index.js

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

https://router.vuejs.org/installation.html#vue-cli

커밋 Commit

현재 작업공간의 상태를 커밋으로 만들어서 저장소에 저장한다.

• 파일상태에서 변경사항 확인하여 커밋
• 주황아이콘  → 수정(변경)된 파일
• 보라아이콘  → 새로 추가된 파일
• 수정 및 추가된 파일들만 확인/선택*하여  선택내용스테이지 올리기 버튼 클릭
• 메모란에 [지라코드] 입력 및 상세 코멘트 작성 후 '커밋' 버튼 클릭
• 완료 되면 상단 'Push (푸시)' 클릭  > develop 체크확인 > 확인 버튼 클릭

푸시 Push

커밋 이후 Push에 업데이트된 숫자가 올라간다 Push까지 눌러줘야 원격저장소에 커밋이 완료됨.

풀 Pull

개발자가 커밋한 추가 변경사항을 받는다.

상단 '풀' 버튼 클릭 
소스커밋 전 변경된 사항이 있는지 꼭 확인하기 (변경된 사항이 있을 경우 아래 스태시 방법 사용하기)

본인이 로컬에서 수정한 동일파일이 존재할 경우 충돌이 생길 수 있다.
스태시를 통해 백업을 하거나 불필요한 수정내역일경우 해당파일은 폐기ㅎ한 후 Pull다운을 받는다. 

스태시 (Stash)  

로컬에서 작업한 소스를 임시로 다른곳에 백업(저장)해 놓는 기능
현재 로컬에서 작업중인 소스와 Pull다운 받아야할 변경된 사항과 겹칠때 유용하다.

• 커밋하지 않은 변경사항(로컬에서 작업한소스)  백업하기
  1. 커밋하지 않은 채로 스태시 버튼 클릭
  2. 스태시 이름을 정해주고 확인 클릭 (스태시 이름은 헷갈리지 않도록 항상 다르게 !) 
  3. 스태시 목록이 생성됨. 스태시 하위에 내가 저장한 목록 확인

  4. 

  5. 백업한 파일은 생성된 스태시목록에서 확인할 수 있음
  6. 숫자 클수록 최근 백업한 파일, 구버전일 경우 숫자없음(파일명으로 확인)
  7. 작업상태 초기화됨
     
     
• Pull 버튼을 눌러 최신 소스 받기
  • 최신 개발소스 받은거 확인하기
• 스태시에 백업했던 소스 복구하기
  
  • 스태시 목록 중 복구할 내용선택 후  우클릭  > 스태시 적용 클릭 > 작업상태로 돌아감
  • 정상적으로 Merge됨
    
    

※ 기타용어
원격 (Origin)  : 서버 저장소
브랜치: 로컬 저장소

브랜치 (Branch) 

원격 (origin) 목록 > 이동할 브랜치(HUB-45) 더블클릭 > 새 브랜치 체크아웃창에서 '확인'버튼 클릭 > 브랜치 목록에 HUB-45 생성됨을 확인

이동 전 브랜치에서 소스파일 수정이 됬을 경우 충돌이 일어남 
스태시를 통해 백업을 하거나 불필요한 커밋내용일경우 폐기처리 후 브랜치 이동

원격 (origin) 목록 > 이동할 브랜치 더블클릭

확인버튼클릭

결과

로컬호스트 모바일 접속 세팅

인터넷연결된 환경에서의 데스크탑 로컬호스트(localhost.com:8080) 모바일기기 접속 방법은 간단하나

인터넷연결이 안된 폐쇄망에서는 유무선 공유기를 통해 부가적인 세팅이 필요하다. 

(PC 로컬호스트와 모바일접속 연결하기 위한 로컬서버 구축에 대한 내용)

로컬호스트 (모바일 접속)를 위한 로컬서버구축

사용된 기기 : 
유선랜카드 (ipTIME U1G), 유무선공유기 (ipTIME604 Plus-i)

1. ipTIME 홈페이지에서 필요한 유틸 다운로드하여 Wifi 상태확인 (ex: ipTIME_MediaTek_Setup 설치파일)

2. 유무선 공유기 (ipTIME604 Plus-i) 전원 연결 후 기기 초기화(Reset)

3. 유선랜카드 USB(EFM ipTIME U1G)를 PC에  USB포트에 연결, 유무선 공유기와 랜선 연결

4. PC에서 http://192.168.0.1 접속 (iptime 초기 로그인화면 접속되면 성공)

5. ID: admin / PW: admin 로그인 > 관리도구

6. 관리도구 > 기본설정 > 무선설정/보안

7. 네트워크이름(SSID), 암호화 WPA2PSK + AES(권장) 선택, 네트워크 암호 설정 후 적용

8. 모바일에서 설정해준 WIFI로 연결한 후 http://192.168.0.XX 접속하기

Vue CLI 2.x 버전 vs Vue CLI 3.x 버전 이상

Vue Cli 설치 명령어

CLI 2.X

• webpack , webpack-simple, browserify, browserify-simple, simple 

npm install -g vue/cli

CLI 3.X

npm install -g @vue/cli

vue 프로젝트 생성

CLI 2.X

vue init [project_template_name] [project directory path]

CLI 3.X

vue create [project_name]

웹팩 설정파일

CLI 2.X

노출 O
show explicit, ex) webpack.config.js

CLI 3.X

노출 X
no show

라이브러리 추가

CLI 2.X

github 템플릿 다운로드

CLI 3.X

plugin 기반으로 기능 추가

실행화면

CLI 2.X

CLI 3.X

• 기존에 Vue 생성자 함수를 사용하는 대신에, createApp() 함수를 사용합니다.

// main.js
// 기존

import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

// main.js
// 새버전

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

Vue Cli 3.X 이상 일때 기준으로 Setting

1. SASS (scss)

• node-sass, sass-loader 설치

npm install --save-dev node-sass sass-loader

• vue.config.js 세팅 (모든 컴포넌트에 공통 스타일적용)
  • sass-loader 버전 8.X는 data가 아니고 prependData를 써줘야 한다.
  • 그 이상의 버전은 additionalData

// vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                additionalData: `
                    @import "@/assets/scss/_reset.scss";
                    @import "@/assets/scss/_variables.scss";
                    @import "@/assets/scss/_breakpoints.scss";
                    @import "@/assets/scss/_mixins.scss";
                `
            }
        }
    }
};

2. 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']
	]
}

3. vuex

• 설치
  • 이전 버전으로 설치 했을 경우 npm uninstall --save vuex 로 이전버전 삭제 후 설치

 npm install --save vuex@next

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js';

const app = createApp(App);

app.use(store);
app.mount('#app');

• store폴더, index.js 파일 생성

// store/index.js

import { createStore } from 'vuex';

export default createStore({
  state: {
  },
  getters: {
    
  },
  mutations: {
  
  }
});

4. Router

• 설치

npm i vue-router@next

• main.js

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes/index.js';

const app = createApp(App);

app.use(router);
app.mount('#app');

import { createWebHistory, createRouter } from 'vue-router';

const routes = [
  {
    path: "/",
  },
 
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

npm install node-sass sass-loader --save-dev

npm install --save-dev node-sass sass-loader

A Vue.js Sidebar Menu Component

https://codespots.com/library/item/1180

vue-sidebar-menu Demo

vue-sidebar-menu demo

https://codesandbox.io/s/nrnlu?file=/src/main.js 

Vue 로 작업한 프로젝트를 IE화면테스트 하던 중에 흰 화면 (Blank)이 뜨며 오류를 발견.

프로젝트에 사용된 Vue-cli 버전은 3이상으로 

Vue 3.x 부터는 ES6 사용으로 인해 IE브라우저를 지원하지 않는다. 

pollyfil 를 설치하여 별도로 세팅이 필요.

터미널(cmd) 설치

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']
	]
}

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=psj9102&logNo=221430447361 

vue router 에서 쓰는 것과 같은 브라우저 history api 를 활용하는 것이 좋습니다 

https://sunny921.github.io/posts/vuejs-router-03/

Github 계정이 없다면 미리 가입 후 진행하기.

SSH Key

GitHub 접속 시 SSH키가 필요한 이유

로컬에서 Git을 단독 사용하면 SSH가 필요없지만 

안전하게 외부 Git서버에 코드를 Push 하기위해 SSH프로토콜을 사용합니다. 

GitHub처럼 원격에서 Git저장소를 호스팅해주는 에서도 모두 SSH프로토콜을 지원하고 있습니다.

SSH키 확인하기

먼저 ssh키를 확인해 줍니다.

id_rsa.pub, id_ed25519.pub 등 .pub 파일이 있으면 이미 존재해서 새로 만들 필요 없습니다.
디렉토리 또는 파일이 없으면 CMD에서 새로 만듭니다.

$ cd ~/.ssh
$ ls

SSH키 생성하기

$ ssh-keygen -t ed25519  -C "your_email@example.com"

참고: Ed25519 알고리즘을 지원하지 않는 레거시 시스템을 사용하는 경우 다음을 사용합니다.
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

"키를 저장할 파일 입력"이라는 메시지가 표시되면 Enter 키를 눌러 기본 파일 위치를 적용

Generating public/private ed25519 key pair.
Enter file in which to save the key (C:\Users\xxx/.ssh/id_ed25519):

패스워드를 설정(불필요시 Enter) 깃헙에선 패스워드사용을 권장하고 있습니다.

추후 설정도 가능하니 일단 엔터 후 진행.

패스워드 추가 또는 변경 가이드 링크

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

cmd창에서 생성된 SSH 확인하기

(전 시스템 cmd창에서 확인이 안되서 Git Bash에서 출력했습니다.)

$ cd ~/.ssh
$ ls

아래처럼 확인할 수 없는경우 Git bash에서 확인해보세요.

Git Bash에서 ssh 확인

Git Bash에서 cd ~/.ssh  명령어를 입력하여 ssh디렉토리로 이동 후  ls 파일리스트 출력 명령어를 입력하면

생성된 파일목록들을 (id_ed25519  id_ed25519.pub) 확인할 수 있습니다.

id_ed25519 -> 개인키

id_ed25519.pub -> 공개키

$ cd ~/.ssh
$ ls

개인키를 출력해보려면 목록을 확인한 디렉토리에서 아래의 명령어를 실행해 줍니다.

(개인키는 절대 공개되면 안됩니다.)

$ cat id_ed25519

공개 키(Public Key) 확인

아래의 명령을 실행시켜 공개키를 출력하고 출력된 공개키를 복사해 줍니다.

$ cat id_ed25519.pub

공개 키(Public Key)를 Github 계정에 등록하기

Tilte에는 등록하려는 키의 이름을 입력합니다. 이메일이나 본인이 구분하기 편리하도록 이름을 정해줍니다.

Key 입력박스 안에는 cat id_ed25519.pub로 확인된 공개키를 복사해서 입력해줍니다.

SSH Key Add New 링크

Add SSH Key 버튼을 누르면 아래처럼 공개키가 Github에 등록됩니다.

브라우저창에 github.com/[USERNAME].keys 를 입력하면 사용자의 공개키를 확인할 수 있습니다.

GPG Key

GPG 키 생성

$ gpg --gen-key

GPG 키를 이용해서 커밋에 서명하기

$ git config --global user.email test@email.com
$ git config --global user.name "Test RealName"
$ git config --global user.signingkey keynumber
$ git config --global commit.gpgsign true
$ git config --global gpg.program gpg

----

관련 자료:

https://docs.github.com/ko/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent

https://www.lainyzine.com/ko/article/creating-ssh-key-for-github/

(Git , Bitbucket , SourceTree 개발환경)

SourceTree(소스트리) 설치

1. 최신 소스트리 다운받기

https://www.sourcetreeapp.com/

2. Install 

• Bitbucket Server선택
  • Bitbukcet Server는 설치형으로 개별서버를 설치할 경우의 로그인할때 사용
  • Bitbucket은 Atlassian의 Bitbucket에 가입된 사용자가 로그인할 때 사용

3. Registration

• Url입력: pms 비트버킷 url
• 사용자 입력
• 계정로그인
• 등록완료

4. 도구설치

• 머큐리얼 선택해제 후 다음 선택
  • 머큐리얼은 Git과 비슷한 Tool

5. Preference

• 다음선택
• 완료

소스트리 사용법

https://kang-ji.tistory.com/202?category=946809 

i18n 설치

- 현재 9버전까지 나온상태 

- vue 3버전 일 경우엔 9버전으로 설치해야합니다.

- 반대로 vue 2 이하 버전일 경우 8버전으로 설치해야 정상적으로 작동됩니다.  (최신버전으로 설치할 경우 esm.bundelr.js 경고가 뜨며 정상적으로 출력되지 않는다.)

// vue 2.X
npm install vue-i18n@8

// vue 3.X
npm install vue-i18n@9

locales/ko.json

- json파일을 통해 언어 별도 관리

- json파일에는 주석 사용불가

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "타이틀1",
        "ttl_2": "타이틀2",
        "ttl_3": "타이틀3"
    }
}

locales/en.json

{
	"example":"ttttttt",
    "group": {
        "ttl_1": "ttl1",
        "ttl_2": "ttl_2",
        "ttl_3": "ttl_3"
    }
}

locales/i18n.js 

import Vue from "vue";
import VueI18n from "vue-i18n";
import en from "@/locales/en.json";
import ko from "@/locales/ko.json";

//import axios from 'axios'

Vue.use(VueI18n);

export const i18n = new VueI18n({
  locale: "ko",
  fallbackLocale: "en",
  messages: { en, ko },
});

const loadedLanguages = ["ko"];

export function loadLanaguageAsync(lang) {
  if (i18n.locale === lang) {
    return Promise.resolve(lang);
  }

  if (loadedLanguages.includes(lang)) {
    return Promise.resolve();
  }
}

main.js

import Vue from "vue";
import App from "./App.vue";
// import router from "@/routes/index";
// import store from "@/store/index";
import { i18n } from "@/locales/i18n";

Vue.config.productionTip = false;

new Vue({
  // router,
  // store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

component.vue

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p>{{ $t("group.ttl1")}}</p>
    <p>{{ $t("group.ttl2")}}</p>
</template>

이때 태그내에 <em>,<b>,<br> 등의 style요소를 주기위한 태그들이 들어갈 경우 v-html을 사용하여 적용시켜준다,. 

// component.vue
<template>
    <p>{{ $t("example")}}</p>
    <p v-html="$t('example')"></p>
    <p v-html="$t('group.ttl1')"></p>
    <p v-html="$t('group.ttl2')"></p>
</template>

<button class="btn draw-outline">Draw button</button>

/* scss */
@mixin btn-border-outline($color: #ccc, $hover: black, $width: 2px, $vertical: top, $horizontal: left, $direction: horizontal, $duration: 0.25s) {
  $h-side: if($horizontal == 'left', 'right', 'left');
  $v-side: if($vertical == 'top', 'bottom', 'top');

  $dir-1: 'height';
  $dir-2: 'width';
  $pseudo-1: 'after';
  $pseudo-2: 'before';
  
  @if($direction == 'horizontal') {
    $dir-1: 'width';
    $dir-2: 'height';
    $pseudo-1: 'before';
    $pseudo-2: 'after';
  }
  
  box-shadow: inset 0 0 0 $width $color;
  color: $color;
  transition: color $duration $duration/2;
  position: relative;

  &::before,
  &::after {
    border: 0 solid transparent;
    box-sizing: border-box;
    content: '';
    pointer-events: none;
    position: absolute;
    width: 0; height: 0;
  }

  &::before {
    #{$vertical}: 0; 
    #{$horizontal}: 0;
  }
  
  &::after {
    #{$h-side}: 0;
    #{$v-side}: 0;
  }

  &::#{$pseudo-1} {
    border-#{$vertical}-width: $width;
    border-#{$h-side}-width: $width;
  }

  &::#{$pseudo-2} {
    border-#{$v-side}-width: $width;
    border-#{$horizontal}-width: $width;
  }
  
  &:hover {
    color: $hover;
    
    &::before,
    &::after {
      border-color: $hover;
      transition: border-color 0s, unquote($dir-1) $duration,  unquote($dir-2) $duration;
      width: 100%;
      height: 100%;
    }
    
    &::before { transition-delay: 0s, 0s, $duration; }
    &::after { transition-delay: $duration * 2, $duration * 2, $duration * 3; }
  }
}


.draw-outline {
  @include btn-border-outline(#c994bd, #90f183, 4px, top, right, vertical);
}

//=== Button styling, semi-ignore
.btn {
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.5;
  font: 700 1.2rem 'Roboto Slab', sans-serif;
  padding: 1em 2em;
  letter-spacing: 0.05rem;
  
  &:focus { outline: 2px dotted #55d7dc; }
}

//=== Pen styling, ignore
body { 
  background: #1a1f25;
  display: flex; 
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

https://codepen.io/giana/pen/yYBpVY