programming study/Vue (70) 썸네일형 리스트형 Vue.js - Vue Router, 컴포넌트 간 데이터 전달, Vuex 1. Vue Router 1.1 Declarative a태그와 같이 특정 요소를 클릭하면 지정한 경로로 이동 TIL 로그인 회원가입 ... 1.2 Programmatic JavaScript 레벨에서 지정한 경로로 이동시키기 2. 컴포넌트 간 데이터 전달 이벤트 - 프롭스 컴포넌트 통신 방식: 규모가 커질 수록 복잡하고 비효율적 이벤트버스 Vuex: 가장 효율적 3. Vuex 3.1 Vuex install npm i vuex 3.2 store 생성과 주입 // src/store/index.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { username: ''.. Vue.js - validation 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. validation 형식 검사 로그인, 회원가입 기능을 구현할 때, 사용자의 입력이 유효한지 검사하는 것 ex) 이메일 회원 가입시 올바른 형식의 이메일을 입력했는지 확인 정규 표현식을 활용 2. E-mail Validation 2.1 정규 표현식으로 E-mail 유효성 검사 공통 모듈로 정의하여 여러 컴포넌트에 사용할 것이므로 src/utils에 파일 생성하여 validation 관련 함수 정의 // src/utils/validation.js function validateEmail(inputEmail) { const regex = /\S+@\S+\.\S+/; return rege.. Vue.js - 에러 핸들링 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. try, catch try, catch 문은 실행할 코드문을 표시하고 예외가 발생할 경우의 응답을 처리 api 호출 시 오류 발생할 때 주로 사용 ex) 로그인 실패, 회원가입 실패, 데이터 불러오기 실패 try { // 실행할 코드문 } catch(error) { // 예외가 발생할 경우의 코드문 } 2. 에러 핸들링 try, catch 문을 활용하여 api 호출 시의 에러 핸들링에 응용 try 문 안에는 비지니스 로직 catch 문 안에는 에러 핸들링 로직 에러가 발생했을 때 명시적으로 사용자에게 피드백을 주는 것이 좋음 버그 개선을 위해서도 에러 핸들링은 필수 try { // .. Vue.js - 실무 환경을 위한 프로젝트 설정 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. API 설정 공통화 axios.create axios의 공통 설정을 할 수 있는 api axios 인스턴스를 생성하여 활용할 수 있음 import axios from 'axios'; // 공통 설정을 할 수 있는 api const instance = axios.create({ baseURL: 'http://localhost:3000', }); 2. env 파일과 설정 서버 엔드포인트를 환경 변수로 관리하기 루트에 .env 파일을 생성하여 아래처럼 입력 VUE_APP 접두사가 붙으면 별도의 웹팩 설정 없이 접근할 수 있음 원래는 webpack DefinePlugin이 필요 vu.. Vue.js - 이벤트 버블링, api 호출과 비동기 처리 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 이벤트 버블링 자식 요소에서 이벤트가 일어났을 때 상위 요소로 이벤트가 전달되는 것 @submit: submit 이벤트를 감지하여 메서드 실행 prevent: 이벤트 실행 후 폼의 기본적인 동작을 막음 id: pw: nickname: 회원 가입 2. api 호출과 비동기 처리 2.1 api 폴더 생성 api를 호출하기 위해서 각 컴포넌트에서 aixos를 매번 import하는 것보다 한 곳에 정리하는 것이 좋음 index.js와 같은 한 파일에 api 함수들을 정의하여 export api 함수는 axios(promise)를 return // src/api/index.js imp.. Vue.js - 초기 진입 페이지 설정, Fall Back Router, History Mode 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. 초기 진입 페이지 설정 redirect를 설정하여, 진입되었을 때 특정 페이지로 이동 import Vue from 'vue'; import VueRouter from 'vue-router'; // Vue.use: 플러그인을 사용 Vue.use(VueRouter); // 인스턴스 생성 후 export export default new VueRouter({ // routes: 페이지의 라우팅 정보를 담는 배열 routes: [ { path: '/', // /login(로그인 페이지)로 리다이렉트 redirect: '/login', }, ... }); 2. Fall Back R.. Vue.js - 코드 스플리팅 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 코드 스플리팅 SPA 경우 모든 페이지의 정보를 첫 진입시에 받아오게 된다 app.js 화면의 개수가 많을 때, 로딩 시간이 많이 걸리게 됨 코드 스플리팅을 활용하여 이동시에 필요한 페이지만 받아오도록 처리할 수 있음 초기 애플리케이션 로딩이 줄어듦 예시 import Vue from 'vue'; import VueRouter from 'vue-router'; // Vue.use: 플러그인을 사용 Vue.use(VueRouter); // 인스턴스 생성 후 export export default new VueRouter({ // routes: 페이지의 라우팅 정보를 담는 배열 rout.. Vue.js - Vue Router 본 내용은 인프런 장기효(캡틴판교)님의 Vue.js 끝장내기 - 실무에 필요한 모든 것 강의를 토대로 작성하였습니다. 1. Vue Router 설치 및 연결 1.1 패키지 설치 npm i vue-router 1.2 Vue Router 인스턴스 생성 Vue Router를 플러그인 등록하고 인스턴스를 생성하여 export // src/routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router'; // Vue.use: 플러그인을 사용 Vue.use(VueRouter); // 인스턴스 생성 후 export export default new VueRouter(); 1.3 Vue Router 연결 생성된 Vue Router 인스턴스를 V.. 이전 1 2 3 4 5 ··· 9 다음