Terminal 에서 code . 로 vscode 열기 ~/.zshrc 파일을 실행하여 code 명령의 alias 수정
|
1 2 3 4 5 6 |
// Terminal open -a TextEdit ~/.zshrc // zshrc alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code" // Terminal code . |
Author: shine1092
Nuxt Create
|
1 2 3 4 |
// npx ( npm 5.2.0 상위 버전에는 자동으로 설치 ) $ npx create-nuxt-app <project-name> // yarn $ yarn create nuxt-app <project-name> |
Nuxt.js가 포함하는 주요 구성 요소 Vue.js – UI 개발 프레임 워크 Vue Router – 라우트(Routes) 관리 Vuex (store 옵션 활성화 시, 사용) Vue Server Renderer (mode: ‘universal’에서 서버 사이드 렌더링 처리) vue-meta – 컴포넌트 메타데이터 관리 vue-loader – 싱글 컴포넌트 파일(SCF)을 처리하는 Webpack 로더 babel-loader – Babel 트랜스파일링을 처리하는 Webpack 로더 webpack – 모듈 […]
Nuxt Directory
Nuxt Directory The Nuxt.js project consists of a directory of layouts, pages, and components. assets assets 디렉토리는 Stylus나 Sass 파일, 이미지나 폰트와 같은 컴파일되지 않은 에셋들을 포함하는 디렉토리 입니다. 컴파일 되지 않는 정적 에셋(CSS, JS, Sass 등)을 포함합니다. components components 디렉토리는 Vue.js 컴포넌트를 포함하는 디렉토리 입니다. asyncData나 fetch 메소드를 이 컴포넌트에서 사용하실 수 없습니다. 내부에는 […]
REST API
Representational State Transfer API REST 구성 자원(RESOURCE) – URI 행위(Verb) – HTTP METHOD 표현(Representations) REST 특징 Uniform Interface ( 인터페이스 일관성 ) URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스( get, post, put, delete )로 수행하는 아키텍처 Stateless ( 무상태성 ) Stateless는 서버에 클라이언트에 대한 상태를 저장하지 않는 것을 의미한다 세션 정보나 쿠키정보를 별도로 저장하고 […]
Array.method
Array.forEach
|
1 2 3 4 5 |
const array = ['a', 'b', 'c']; array.forEach(element => console.log(element)); // expected output: "a" // expected output: "b" // expected output: "c" |
Array.map
|
1 2 3 4 5 6 7 8 9 |
arr.map(callback(currentValue[, index[, array]])[, thisArg]) const _array = [1, 4, 9, 16]; // pass a function to map const _map = _array.map(x => x * 2); console.log(_map); // expected output: Array [2, 8, 18, 32] |
Array.some callback이 어떤 요소라도 참인(true) 값을 반환하는 경우 true, 그 외엔 false
|
1 2 3 4 5 6 7 |
const array = [1, 2, 3, 4, 5]; // checks whether an element is even const even = (element) => element % 2 === 0; console.log(array.some(even)); // expected output: true |
Array.every callback이 모든 요소에 대해 참인(true) 값을 반환하는 경우 true, 그 외엔 false
|
1 2 3 4 5 6 |
const isBelowThreshold = (currentValue) => currentValue < 40; const array1 = [1, 30, 39, 29, 10, 13]; console.log(array1.every(isBelowThreshold)); // expected output: true |
Array.filter callback이 true를 반환하면 유지, false를 반환하면 삭제(버림)하여 새로운 배열을 반환
|
1 2 3 4 5 6 |
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; const result = words.filter(word => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] |
Array.reduce
|
1 2 3 4 5 6 7 8 9 10 |
const array1 = [1, 2, 3, 4]; const reducer = (accumulator, currentValue) => accumulator + currentValue; // 1 + 2 + 3 + 4 console.log(array1.reduce(reducer)); // expected output: 10 // 5 + 1 + 2 + 3 + 4 console.log(array1.reduce(reducer, 5)); // expected output: 15 |
git flow
|
1 2 3 4 5 6 7 8 |
git flow feature start 'yoon' ----------------------------- git add . git commit -m 'message' ----------------------------- git flow feature finish yoon // git push origin develop |
vuex
https://vuex.vuejs.org State Management Pattern
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // action methods: { increment () { this.count++ } } }) |
You cannot directly mutate the store’s state. The only way to change a store’s state is by explicitly committing mutations. mapState Getters mapGetters Mutations ( 변이 ) Actions Modules
Object.assign()
Object.assign() https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
JavaScript Object Prototypes
https://www.w3schools.com/js/js_object_prototypes.asp
Vue-cli project
Vue-cli installation
|
1 2 3 4 |
// vue-cli 2 npm install -g vue-cli // vue-cli 3 npm install -g @vue/cli-init |
with mac
|
1 |
sudo npm install -g vue-cli |
creating a project
|
1 2 3 4 |
// vue create project-name npm install -g @vue/cli-init # vue init now works exactly the same as vue-cli@2.x vue init webpack my-project |
vue-cli vuejs-templates vue list
|
1 2 3 4 5 6 7 8 9 |
Joui-MacBook-Pro:workbench zzou$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
. ├─ README.md ├─ index.html ├─ webpack.config.js ├─ package.json └─ src ├─ main.js ├─ App.vue ├─ components │ ├─ common │ └─ ... ├─ routes router │ ├─ index.js │ └─ routes.js ├─ views router pages │ ├─ MainView.vue │ └─ ... ├─ store state │ ├─ auth │ ├─ index.js │ └─ ... ├─ api api │ ├─ index.js │ ├─ users.js │ └─ ... ├─ utils utils fn │ ├─ filters.js │ ├─ bus.js │ └─ ... ├─ mixins │ ├─ index.js │ └─ ... ├─ plugins │ ├─ ChartPlugin.js │ └─ ... ├─ translations 다국어 │ ├─ index.js │ ├─ en.json │ └─ ... ├─ images ├─ fonts └─ assets |