Front

public 폴더의 index.html이 애플리케이션의 가장 첫번째 진입점이다. - 여기에 폰트, 아이콘 추가 하는것 Token - 사용자가 인증 되었을때만 발급되는것 로그인한 사용자의 토큰을 넣어서 API에 넘길거다. 토큰값을 어딘가에 저장하고 API 호출할때마다 사용할것 1. axios.create에 headers 추가하기 - Authorization 속성에 test1234 라고 쓴 후 API 요청을 실행했을때 네트워크 패널에서 Authorization에 test1234가 있는걸 확인 할 수 있다. import axios from 'axios'; // axios.create 할때 주입한 속성은 인스턴스로 데이터 요청 할때마다 무조건 이 속성들이 정의된 상태로 수행된다. const instance = ..

1. vuex | mutations에 clearUsernmae 함수 추가 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ // store에서 state 는 여러 컴포넌트 간에 공유되는 데이터를 뜻한다. state: { username: '', }, // state의 값이 변경됬을때 특정 상태를 개선할수 있게 사용가능 // getters의 첫번쨰 인자는 state // getters는 기본적으로 return값을 가지고 있음 getters: { // username이 빈 문자열이면 로그인 안된상태 // 로그인 되면(빈문자열이 아니면) getters가 true로 바뀜 isLogin(stat..

loginForm 의 결과를 AppHeader로 올려줘야 하는 상황 - 이벤트를 2번 올리고 App에서 받아서 AppHeader로 props해주거나 - 이벤트버스를 활용해서 loginForm에서 바로 AppHeader로 이벤트를 보내주거나 - store (vuex - 상태 관리 패턴) 를 활용하여 User정보를 저장하고 저장한 정보를 AppHeader에서 쓰거나 - store는 하나의 통에 담아놓고 꺼내서 쓰는 구조. 이게 가장 접근하기 쉽고 관리하기 편하다. 1. vuex 설치하기 npm i vuex@3.6.2 2. vuex 설치 확인하기 - 설치되면 package.json 파일 dependencies 칸에 들어가게 된다. - dependencies는 npm run build 명령어를 실행해서 최종 자..

this.$router.push() 는 자바스크립트 레벨에서 이용하는 앵커 태그 역할 괄호 안에 URL 써주면됨 html에선 URL 뿐만 아니라 객체, 값, 쿼리도 넘길수 있음 다른 위치로 이동하는법 Vue 인스턴스 내에서 라우터 인스턴스에 $router. 따라서 페이지 전환을 할 수 있습니다 (this.$router.push.) 다른 URL로 이동하려면 router.push 사용하면 됩니다. 이 메서드는 새 항목을 기록 스택에 푸시하므로 사용자가 브라우저 뒤로 버튼을 클릭하면 이전 URL로 이동합니다. a 를 클릭했을 때 내부적으로 호출되는 메서드 이므로 클릭 하는 것은 router.push 를 호출하는 것과 같습니다 선언적 프로그래매틱 router.push(...) 인수는 문자열 경로 또는 위치 설명..

1. username input이 email이 아닐 경우에 비활성화 처리 - 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자) - computed 속성 필요 2. 아이디, 패스워드가 없으면 로그인버튼 비활성화 - html 정규 표현식 disabled 필요 1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자 const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\..

1. username input이 email이 아닐 경우에 비활성화 처리 - 정규표현식 필요 (이미 잘 만들어져 있는걸 사용하자) - computed 속성 필요 2. 아이디, 패스워드가 없으면 로그인버튼 비활성화 - html 정규 표현식 disabled 필요 1. 여러 컴포넌트에서 사용할거면 utils 폴더를 만들고 valdation.js 파일로 따로 빼놓자 const validateEmail = email => { return String(email) .toLowerCase() .match( /^(([^()[\]\\.,;:\s@"]+(\.[^()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\..

{{ item.subject }}

1. vue-js-modal 을 install 받아준다 npm install vue-js-modal --save https://www.npmjs.com/package/vue-js-modal vue-js-modal Modal Component for Vue.js. Latest version: 2.0.1, last published: a year ago. Start using vue-js-modal in your project by running `npm i vue-js-modal`. There are 187 other projects in the npm registry using vue-js-modal. www.npmjs.com 2. main.js에 vue-js-modal 플러그인을 추가해준다. impor..