JavaScript/Vue
-
Vuex : vue는 컴포넌트 기반 프레임워크 : 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다. : state, mutations, actions, getters : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. : 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 : Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다. * 상태 관리(State Managerment)는 왜 필요한가 : 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다. 이에따..
Vue Store(Vuex) - StateVuex : vue는 컴포넌트 기반 프레임워크 : 컴포넌트간의 통신이나 데이터 전달을 유기적으로 관리하기 위해 vuex라는 저장소를 사용한다. : state, mutations, actions, getters : Vue.js 어플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. : 어플리케이션의 모든 컴포넌트의 중앙 집중식 저장소 역할, 예측 가능한 방식으로 상태 변경 가능 : Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅샷 내보내기/가져오기와 같은 고급 기능을 제공한다. * 상태 관리(State Managerment)는 왜 필요한가 : 컴포넌트 기반 프레임워크(Vue)에서는 작은 단위로 쪼개진 여러개의 컴포넌트 화면을 구성합니다. 이에따..
2021.10.25 -
v-if : 지정한 뷰 데이터 값의 참, 거짓여부에 따라 html 태그를 처리, 화면에 보여줄것인가 아닌가 ex) v-for : vue에서 html 태그 반복문 : 지정한 뷰 데이터 개수만큼 html 태그 반복 ex) 사용예시 : v-for="(변수명, index명) in 배열" :key="index명" v-show : v-if 와 비슷하게 참, 거짓 여부에 따라 html을 보여줄것인지 안보여줄것인지 판단 * v-if와 차이점 : v-show는 태그 자체를 숨김처리(display-)지만, v-if는 태그자체를 삭제한다. v-bind : html 태그에 설정된 기본속성 및 데이터와 vue 데이터 속성과 연결 : 줄임말 ":" 가능 ex) :for v-on : 이벤트 감지 처리 : 줄임..
v-if, v-for, v-show, v-bind, v-on, v-modelv-if : 지정한 뷰 데이터 값의 참, 거짓여부에 따라 html 태그를 처리, 화면에 보여줄것인가 아닌가 ex) v-for : vue에서 html 태그 반복문 : 지정한 뷰 데이터 개수만큼 html 태그 반복 ex) 사용예시 : v-for="(변수명, index명) in 배열" :key="index명" v-show : v-if 와 비슷하게 참, 거짓 여부에 따라 html을 보여줄것인지 안보여줄것인지 판단 * v-if와 차이점 : v-show는 태그 자체를 숨김처리(display-)지만, v-if는 태그자체를 삭제한다. v-bind : html 태그에 설정된 기본속성 및 데이터와 vue 데이터 속성과 연결 : 줄임말 ":" 가능 ex) :for v-on : 이벤트 감지 처리 : 줄임..
2021.10.25 -
Vue js 에서 사용하는 vue-cli를 사용하여 프로젝트 생성 1. vue-cli 설치 : npm install -g @vue-cli * vue-cli란 vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli가 기본적인 프로젝트 설정을 해주기 때문에 폴더 구조에 대한 고민, build, 라이브러리 구성, 배포를 위한 webpack 등 고민할 필요가 없다. 설치됐는지 확인하기 : vue 해당 화면이 뜰경우 설치가 완료된거다. -g(global) 명령어를 사용했기때문에 환경변수가 적용되어 명령어 사용이 가능한거다. 2. Vue 프로젝트 생성 * vue init webpack 프로젝트명 : vue init webpack my-obo ********* * vue ini..
Vue 프로젝트 생성하기Vue js 에서 사용하는 vue-cli를 사용하여 프로젝트 생성 1. vue-cli 설치 : npm install -g @vue-cli * vue-cli란 vue-cli는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli가 기본적인 프로젝트 설정을 해주기 때문에 폴더 구조에 대한 고민, build, 라이브러리 구성, 배포를 위한 webpack 등 고민할 필요가 없다. 설치됐는지 확인하기 : vue 해당 화면이 뜰경우 설치가 완료된거다. -g(global) 명령어를 사용했기때문에 환경변수가 적용되어 명령어 사용이 가능한거다. 2. Vue 프로젝트 생성 * vue init webpack 프로젝트명 : vue init webpack my-obo ********* * vue ini..
2021.10.25