모든 예제 코드는 github에 있습니다. 13. 마무리 수업 정리 및 향후 학습 방향 안내 Vue.js 공식 문서 Vue.js 스타일 가이드 Vue.js Cookbook Vuex 공식 문서 VueRouter 공식 문서 Vue CLI 공식 문서 Reactivity 데이터 변화를 감지해 화면에 보여주는 것으로 뷰가 가장 크게 지원해주는 부분 인스턴스 뷰로 개발할때 필수로 만들어야 하며, 인스턴스로 화면을 조작해 나갈 수 있다. 컴포넌트 화면의 영역을 구분해서 개발하는 방법 웹 프론트엔드에서 가장 중요한 핵심 컴포넌트 통신 컴포넌트로 개발할때 데이터를 흐름을 예축할수 잇고 데이터를 건너주는 것 props : 상위에서 하위로 event emit : 하위에서 상위로 HTTP 통신 라이브러리(axios) 템플릿 ..
Lecture/[인프런] Vue.js 시작하기 - Age of Vue.js
모든 예제 코드는 github에 있습니다. 12. 최종 프로젝트 - 사용자 입력 폼 만들기 프로젝트 생성 및 마크업 작업 vue create 프로젝트 폴더 이름 vue create vue-form 기본적인 마크업 및 컴포넌트 분리 UserNameInput.vue id : PasswordInput.vue pw : LoginForm.vue login v-model 속성과 submit 이벤트 처리 이벤트 버블링과 캡쳐링 블로그 글 v-model을 사용하면 데이터와 바인딩이 된다. submit은 기본적으로 전송 한후에 새로고침을 한다. 그걸 막기 위해 event를 인자로 받아 event.preventDefault()를 한다. UserNameInput.vue id : PasswordInput.vue pw : Lo..
모든 예제 코드는 github에 있습니다. 11. 싱글 파일 컴포넌트 싱글 파일 컴포넌트에 배운 내용 적용하여 개발 시작하기 template에는 root element 하나만 있어야 한다.(아래와 같이 하면 안된다.) 컴포넌트를 재사용해야 하기 때문에 다른 컴포넌트가 데이터를 공유하면 안되기 때문에 아래와 같은 문법으로 정의해야 함 helloWorld.vue {{ message }} App.vue npm run serve로 실행해보기. 싱글 파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트 파일명은 파스칼 케이스, 두 단어 이상으로 하는 것이 좋다. 한 단어로 하면, HTML 표준 태그와 충돌 날수 있기 때문이다. App.vue 에서 App Header를 사용 AppHeader.vue Header 싱글 ..
모든 예제 코드는 github에 있습니다. 10. 프로젝트 생성 도구 - CLI 최신 Vue CLI 소개 Vue CLI 공식 사이트 링크 명령어를 통해 특정 기능을 하는 것이다. CLI(Commend Line Interface) node -v / npm -v : 10.0이상 / 6.0 이상 Vue CLI 도구 설치할 때 문제점 해결 방법 Where does npm install packages? 설치시 문제가 나면 에러가 날 수 있는데, 그것은 권한이 없어서 그렇다(설치 디렉토리에) 그럴때 명령어에 sudo를 붙여준다. 맥에서는 /usr/local/lib/node_modules에 설치됩니다. CLI 2.x와 3.x의 차이점 / 프로젝트 생성 및 서버 실행 웹 개발할 때 알아두면 좋은 리눅스 기본 명령어 ..
모든 예제 코드는 github에 있습니다. 9. 템플릿 문법 - 실전 watch 데이터를 바라보는 것으로 데이터가 변경될때마다 지정한 메소드가 실행된다. increased {{ num }} watch 속성 vs computed 속성 watch 속성과 computed 속성 차이점에 관한 공식 문서 링크 {{ num }} {{ doubleNum }} computed는 Vue 내부적으로 계속 계산을 하며, 데이터 의존성이 있고 캐싱이 되고 빠르게 계산한다는 장점이 있다. 따라서 VeeValidate 내부적으로 이걸로 구현되어 있다. 단순히 Vaidation일때 많이 사용한다. watch는 Num이 변경되었을때 특정 로직을 실행하는데, 실제로 무거운 로직(매번 실행되기 부담스러운)에 많이 사용한다. 새로바뀐 값..
모든 예제 코드는 github에 있습니다. 8. 템플릿 문법 템플릿 문법 소개 뷰로 화면을 조작하는 방법으로 크게 데이터 바인딩과 디렉티브로 나눠집니다. 데이터 바인딩 Mustache Tag({{ }}) 뷰 인스턴에서 정의한 속성들을 화면에 표시하는 방식 디렉티브 HTML 태그에서 표준 속성을 제외한 v-가 붙어있는 속성들 데이터 바인딩과 computed 속성 데이터 바인딩 화면에 데이터가 변경될때마다 다시 그려지는것이 reactive라고 하고, 실제로 Object.defindproperty()로 구현했을때 값이 연결되는 것이 데이터 바인딩이다. {{message}} Computed 데이터 값에 따라 바뀌는 데이터를 정의할때 사용 데이터에 있는 값에 따라 같이 계산되어 실행된다. 뷰 인스턴스 속성들을 정..
모든 예제 코드는 github에 있습니다. 7. HTTP 통신 라이브러리 - axios HTTP 라이브러리와 Ajax 그리고 Vue Resource Ajax 위키백과 Vue Resource Github 뷰에서 권장하는 HTTP 통신 라이브러리이다. Ajax 비동기적인 웹 애플리케이션 제작을 위해 사용한다. jQuery Ajax Vue Resource Vue HTTP 통신 공식 라이브러리였는데, 2년전에 공식 라이브러리를 취소했다. 현재는 사용하지 않는다. axios 소개 및 오픈 소스를 사용하기 전에 알아야 할 것들 Axios Github Axios는 Promise 기반의 HTTP 통신 라이브러리로, 상대적으로 다른 라이브러리에 비해 문서화와 다양한 API를 지원합니다. 오픈소스를 사용하기 전에 봐야할 ..
모든 예제 코드는 github에 있습니다. 6. 라우터 뷰 라우터 소개와 설치 라우터 공식 사이트 설치 문서 싱글 페이지 애플리케이션을 구현하거나, 혹은 페이지 간의 이동할때 사용하는 라이브러리 라우터 CDN 뷰 라우터 인스턴스 연결 및 초기 상태 안내 routes 속성 설명 및 실습 안내 routes : 페이지의 라우팅 정보가 배열로 담기게 된다. path : 페이지 url 이름 component: 해당 url에서 표시될 컴포넌트 실습 url이 main인 페이지를 만들어 main컴포넌트가 나올 수 있도록 해보자. 라우터가 표시되는 영역 및 router-view 태그 설명 router-view : 라우터가 가지고 있는 태그로 뷰 인스턴스를 라우터 인스턴스를 지정해야 사용할 수 있는 태그로, 해당 path..
모든 예제 코드는 github에 있습니다. 5. 컴포넌트 통신 방법 - 응용 같은 컴포넌트 레벨 간의 통신 방법 AppHeader → Appcontent 위 그림에서 보듯이 데이터를 전송할 길이 없다. 따라서 관계되어 있는 길을 찾아서 구현해야 한다. 같은 컴포넌트 레벨 간의 통신 방법 구현 AppContent → Root → AppHeader 즉, AppContent가 event로 Root에 데이터를 건네주고, Root가 props로 AppHeader로 데이터를 넘겨줘야 한다. Ï
모든 예제 코드는 github에 있습니다. 4. 컴포넌트 통신 방법 - 기본 컴포넌트 통신 각각의 컴포넌트는 데이터를 각자 관리한다.(유효 범위를 가진다) 상위에서 하위로는 데이터를 내려줌 (props) 하위에서 상위로는 데이터를 올려줌 (event) 컴포넌트 통신 규칙이 필요한 이유 AppHeader → LoginForm → AppFoter → NavigationBar → AppHeader 위와 같은 방향으로 데이터를 통신한다면 관계적으로도 어렵고, 버그가 발생할 시 추적하기가 어렵다. 위 그림 처럼 아래로만 데이터가 내려가는 컴포넌트 규칙이 생겼을때 데이터의 흐름을 추적할 수 있다. 상위에서 하위로 props와 하위에서 상위로 event를 보내준다. props 속성 v-bind: props 속성 이름..
