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}\..

catch (error) { // 에러 핸들링할 코드 // console.log(error.response); this.logMessage = error.response.data; } loginForm.vue id: pw: 로그인 {{ logMessage }}

에러가 났을 때의 대처 방법과 로그 분석하는 방법 - 실제 개발에선 기능보다 에러처리를 잘해야 완성도 높은 코드를 만들수있다. 네트워크 에러 확인 방법과 에러 처리 코드 구현 | async & await 에러 처리 방법 - try, catch 걸어주면된다 - 그러면 에러 나면 몇번째줄 코드의 에러인지 까지 확인 가능 - 이거 안하면 무슨 컴포넌트에 에러가 났는지는 뜨는데 몇번째 줄 인지는 모름 async submitForm() { try { // 비지니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); console.log(data.user...

id: pw: 로그인 {{ logMessage }}

env 파일과 설정 방법 - 프로젝트 루트폴더 위치 .env 파일 생성 - env 파일은 키=값 으로 이루어져 있는 환경변수 파일 vueCLI의 env파일 규칙과 실무 환경 구성 방법 - vue에서 지원하는 env는 3개 - .env - .env.development - .env.production - 설정파일을 변경 했을때는 웹팩이 인지를 못하기 때문에 서버를 껐다 켜야함

- URL공통화 , 환경변수 파일에 저장 axios.create(); 란 - axios의 API - 여기에 API들의 공통 설정을 모두 넣을수있다. - baseURL이 속성으로 있다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:3000', }); function registerUser(userData) { // const url = 'http://localhost:3000/signup'; // axios.post('http://localhost:3000//signup', userData); return instance.post('signup', userData); } function loginU..