본문 바로가기

programming study/Vue

(70)
Vue.js - 컨테이너와 프레젠터, v-bind, v-on, 안티패턴 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. 컨테이너와 프레젠터 컨테이너: 비즈니스 로직(데이터 조작) 프레젠터: 데이터 표현 실질적인 데이터 조작을 상위 컴포넌트인 컨테이너에서 하고 그 아래의 프레젠터에서는 화면을 구현 프레젠터 컴포넌트에서 이벤트를 감지하여 상위 컴포넌트로 전달 상위 컴포넌트는 전달받은 이벤트에 따라 데이터 조작 2. v-bind 상위 컴포넌트로부터 하위 컴포넌트로 props를 넘길 수 있음 v-bind:내려보낼 프롭스 속성 이름 = "현재 위치의 컴포넌트 데이터 속성" 예시 상위 컴포넌트 ... ... ... 하위 컴포넌트 ... 4. 안티패턴 상위 컴포넌트의 데이터를 하..
Vue.js - 로컬스토리지, 스타일 바인딩 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. 로컬스토리지에 객체 저장하고 사용하기 JSON.stringify() JavaScript 값이나 객체를 JSON 문자열로 변환하는 API 로컬스토리지에 value를 넣기 위해서는 문자열로 변환해야 함 문자열화를 하지 않으면 JavaScript의 객체의 경우 [object Object]라는 값으로 저장 됨 JSON.parse() JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성하는 API 로컬스토리지에 저장한 문자열화된 객체를 가져와서 다시 사용하기 위해서는 JavaScript 객체로 변환해야 한다. 값이 문자열화 ..
Vue.js - 컴포넌트 생성, 반응형 태그, scoped, v-model, v-on, v-for 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. 컴포넌트 생성 및 등록 컴포넌트 생성 보통 src/components에 컴포넌트를 생성 컴포넌트 이름은 pascal case Vetur이 있으면, vue를 입력하면 싱글 파일 컴포넌트 생성 컴포넌트 등록 src/App.vue에 생성한 컴포넌트들 등록 2. 반응형 태그 설정 반응형 태그 뷰포트 메타 태그 width=device-width 뷰포트의 너비를 기기의 너비로 설정 반응형 웹 어떤 기기에서라도 해당 기기에 최적화된 화면을 보여주는 것 3. scoped 해당 컴포넌트에서만 제한되는 CSS 규칙을 추가할 때 사용 TODO it! 4. v-model..
Vue.js - 프로젝트 구성 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex 강의를 토대로 작성하였습니다. 1. Vue CLI 설치 npm install -g @vue/cli 2. 프로젝트 구성 vue create [프로젝트명] 프로젝트 구성 여러가지 기능을 선택하여 프로젝트를 구성할 수 있음 npm run serve로 프로젝트 실행 템플릿 적용 vue init webpack-simple vue-todo webpack-simple 템플릿이 적용된 Vue 프로젝트 생성 3. 컴포넌트 설계 페이지가 많아질 수록 컴포넌트 설계의 중요성이 높아진다. 컴포넌트 설계는 재사용성을 고려한다. ex) 웹앱 전체 페이지에서 상단에 표시되는 헤더 Reference Vue.js ..
Vue.js - 싱글 파일 컴포넌트 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 기본 형식 .vue 확장자를 사용 .vue 확장자 파일 생성후, vue입력하면 기본 형식이 갖춰진 코드가 입력된다. {{ str }} 2. 등록하기 일반적으로 src/componetns 경로에 싱글 파일 컴포넌트를 만든다. pascal case 명명법을 사용 최소한 두 단어 이상으로 만들기 HTML 표준 태그인지 컴포넌트인지 구분하기 위해 가져온 컴포넌트는 kebab case를 사용 3. props 사용하기 v-bind:props 속성 이름 ="상위 컴포넌트의 데이터 이름" 으로 프롭스 전달이 가능 4. event emit 구현 v-on으로 하위 컴포넌트에서 이벤트를 감지하여 정의..
Vue.js - Vue CLI 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. Vue CLI Command Line Interface 명령어를 통한 특정 액션을 수행하는 도구 npm install -g @vue/cli 를 입력하여 설치 설치 된 내용은 맥기준: usr/local/lib/node_modules Vue 애플리케이션을 만들기 위한 기본 환경 구성 permission error 쓰기 권한이 없기 때문에 발생하는 에러 관리자 권한이 아니어서 발생 명령어 앞에 sudo를 붙일 것 사용법 3.x대 버전 기준 // 프로젝트 생성 vue create '프로젝트 폴더 위치' // 로컬 서버 실행 npm run serve npm run serve 로컬 서버를 실..
Vue.js - watch 속성 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. watch 속성 data의 변화에 따라 로직을 실행 예시 ... {{ num }} increase ... ... 2. watch 속성 vs computed 속성 watch 매번 실행되기 부담스러운 로직에 사용 데이터 요청에 적합 computed 내부적으로 해당 명령을 실행 단순하게 값에 대한 계산을 실행 ex) 단순 텍스트 입력 -> 그에 대한 validation을 계산 대부분의 상황에서 사용 권장 참고 캐싱 예시 ... {{ num }} ... ... 3. computed 속성을 이용한 class 코드 작성 방법 v-bind에 computed 속성을 넣을 수 있음 스크립트 단에서..
Vue.js - 템플릿 문법 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 시작하기 - Age of Vue.js 강의를 토대로 작성하였습니다. 1. 템플릿 문법 Vue로 화면을 조작하는 방법 데이터 바인딩 디렉티브 데이터 바인딩 Vue 인스턴스에서 정의한 속성들을 화면에 표시 {{ message }} ... new Vue({ data: { message: 'Hello Vue.js' } }) ... 디렉티브 Vue에서의 HTML태그의 v-로 시작하는 속성 v-if 2. computed 속성 계산된 속성 바뀌는 값을 정의할 때 사용 ... {{ num }} {{ doubleNum }} ... ... 3. 뷰 디렉티브 v-bind 화면에 표시되는 텍스트뿐만 아니라 전체적인 DOM의 정보들을 reactive하게 바꿀 수 있다. .....