본문 바로가기
728x90
반응형

Dev170

[Vue.js] Vue CLI Vue CLI 기본 Vue 개발 환경을 설정해주는 도구로 기본적인 프로젝트 설정을 해주기 때문에 구조나 라이브러리, webpack설정에 대해 부담을 줄일 수 있다. 여기서 CLI란 Command Line Interface 의 약자로 명령어를 통한 특정 액션을 수행하는 도구를 의미한다. 설치하기 1. node(Node.js), npm(Node Package Manager) 버전 확인 (node 10버전 이상, npm 6버전 이상 필요) // Terminal jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/learn-vue-js-master $ node -v v12.18.3 jskim@DESKTOP-SI6DJ17 MINGW64 /d/dev/study/learn-vue-js-mas.. 2020. 9. 9.
[Vue.js] 템플릿 문법 - 실전 Watch 특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행하는 속성 예제 // watch.html {{ num }} increase 결과 확인 Watch vs Computed Watch는 주로 복잡한 로직이나 무거운 동작 즉, 네트워크나 데이터 요청 시 사용하고 Computed는 주로 단순한 로직 Validation이나 간단한 텍스트 연산에 사용된다. 공식문서에 따르면 Computed사용을 권장하고 Computed를 사용 할 때 소스코드가 간결해지며 내부적으로 캐싱처리도 잘 되어있다. 예제 // watch-vs-computed.html {{ num }} 결과 확인 Computed 속성을 이용한 클래스 코드 작성 방법 예제 v-bind:class를 사용하여 텍스트 색 변경 // computed-u.. 2020. 9. 8.
[Vue.js] 템플릿 문법 - 기본 뷰의 템플릿 문법 뷰로 화면을 조작하는 방법으로 크게 데이터 바인딩과 디렉티브로 나뉜다. 데이터 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법으로 가장 기본적인 방식은 콧수염 괄호(Mustache Tag)이다. {{ message }} new Vue({ data: { message : 'Vue.js' } }) {{ message }} 공간에 뷰 인스턴스의 data 값이 바인딩 되어 'Vue.js' 텍스트가 출력된다. 디렉티브 뷰로 화면의 요소를 더 쉽게 조작하기 위한 문법(v-접두사)으로 화면 조작에서 자주 사용되는 방식들을 모아 디렉티브 형태로 제공한다. Hello Vue.js new Vue({ data: { show: false } }) data 속성의 show값이 false이기 때문에.. 2020. 9. 8.
[Vue.js] HTTP 통신 라이브러리 - axios Axios(액시오스) Vue에서 권고하는 HTTP 통신 라이브러리로 Promise기반으로 구성되어 있으며 상대적으로 다른 HTTP 통신 라이브러리들에 비해 문서화가 잘 되어있고 API도 다양하다. 참고 Ajax Axios Github 자바스크립트 비동기 처리와 콜백 함수 자바스크립트 Promise 자바스크립트 async와 await Axios 실습 axios변수를 사용해서 HTTP GET 요청을 하는 코드 작성해보기 // axios.html get user {{users}} 뷰 인스턴스를 vm변수로 받아 사용한 이유는 뷰 인스턴스에서의 this와 axios의 this가 다르기 때문에 vm변수에 담아 axios내부에서 접근, 사용할 수 있다. 동작 확인 참고 JSONPlaceholder 자바스크립트 동작 .. 2020. 9. 8.
[Vue.js] 라우터 뷰 라우터 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션(SPA), 페이지 간의 이동을 구현할 때 사용하는 라이브러리 뷰 라우터 설치 및 등록하기 1. CDN 추가 // router.html 2. 뷰 인스턴스에 라우터 인스턴스 등록 // router.html ... 결과 확인 뷰 라우터 옵션 mode : 라우터 모드 설정 hash : 라우팅에 URL 해시를 사용. HTML5 기록 API를 지원하지 않는 브라우저를 포함하여 모든 Vue 지원 브라우저에서 작동 history : URL 해시 미사용. HTML5 히스토리 API 및 서버 설정이 필요 (HTML5 History 모드) abstract : 모든 자바 스크립트 환경에서 작동 (예: Node.js가 있는 서버 측 브라우저 API가없는 경우 라우터가.. 2020. 9. 8.

티스토리툴바