본문 바로가기

분류 전체보기384

싱글파일 컴포넌트 .vue 로 파일 생성 vue + tab 키로 기본 화면 구성 : HTML 컴포넌트 명명법 케밥케이스 파스칼 케이스 컴포넌트 파일 생성시 파스칼케이스 명명법을 사용하고 최소 두 단어 이상으로 작성. 2023. 4. 20.
Vue CLI(command line interface) VUE CLI 란? vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있 https://cli.vuejs.org/ vscode - 터미널 node 설치확인 node -v npm 설치확인 npm -v vue-cli 설치 npm install -g @vue/cli 설치확인 vue --version vue프로젝트 생성 vue create 프로젝트명 프로젝트 생성후 해당 프로젝트 폴더로 이동, 명령어를 이용하여 dev 서버를 실행 cd 파일명 npm run serve 설치완료 페이지 (local.. 2023. 4. 20.
vue cli 설치오류 Window 실행정책으로 인한 오류 -> windowPowerShell 관리자 권한으로 실행. : default Restricted Get-ExecutionPolicy : RemoteSigned Set-ExecutionPolicy RemoteSigned 2023. 4. 20.
watch, computed 속성 데이터의 변화에 따라 특정 로직을 수행하는 속성 ex) 예시 num의 변화에 따라 log를 찍는 로직을 수행 캐싱 차이 : computed는 종속 대상을 따라 저장(캐싱) 된다. 해당 속성이 종속된 대상이 변경될 때만 함수를 실행. 즉 {{message}}의 경우 message가 변경되지 않는 한 computed 속성은 여러번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환. 이에 반해 method를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다. computed : 계산해야 하는 목표 데이터를 정의하는 방식으로 '선언형 프로그래밍' 방식.validation, text, 연산에 적합 watch : 감시할 데이터를 지정하고 그 데이터가 바뀌면 함수를 실행하라는 방식의 '명령형 프로.. 2023. 4. 20.
템플릿 문법 화면을 조작하기 위한 vue.js 제공하는 문법 형식 : v- "" 안에는 js 문법이 들어올 수 있음 1. v-on : 엘리먼트에 이벤트 리스너를 연결 ** v-on:submit -> @submit 과 동일하다. 2. v-bind : 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩 형식 - v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" ** v-bind 생략하고 :propsdata 과 동일하다. 3. v-model : 양방향 바인딩을 구현 4. v-if, v-else : if-else 구문과 동일. if, else두 개는 인접해 있어야 한다. 좋아요 눌렀음 like 5. v-for : 반복문 구현, v-if 와 같이 사용하지 않는다 - arrary/object는 자료.. 2023. 4. 20.
액시오스(Axios) 뷰에서 권고하는 Promise기반의 HTTP통신 라이브러리 자바스크립트 비동기 처리 패턴 (비동기처리에 사용되는 객체) 1. callback 2. promise (https://joshua1988.github.io/web-development/javascript/promise-for-beginners/) 3. promise + generator 4. async & await **promise - CDN방식 https://github.com/axios/axios:엑시오스 깃헙주소 - npm 방식 npm install axios 2023. 4. 20.

티스토리툴바