728x90 반응형 전체 글170 [Vue.js] Today I Learned - 학습 노트 조회 학습 노트 조회 Today I Learned의 핵심 기능인 학습 노트 조회 기능이다. 로그인 시 발급된 인증(토큰) 정보를 이용하여 학습 노트 데이터 조회를 할 수 있다. 로그인 토큰 값 확인 로그인 시 발급 받는 토큰을 이용하여 학습 노트 데이터를 조회 할 수 있다. // src/components/LoginForm.vue methods: { async submitForm() { try { // 비즈니스 로직 const userData = { username: this.username, password: this.password, }; const { data } = await loginUser(userData); // 토큰 확인 console.log(data.token); this.$store.comm.. 2020. 10. 27. [Vue.js] Today I Learned - 로그인 로그인 웹사이트를 이용하기 위한 가장 기본적인 과정. 추가적인 기능으로는 성공 시 처리 뿐만 아니라 로그인 실패 시 처리, 유효성 검사, 로그아웃 처리가 필요하다. 로그인 기능 함수 전달받은 정보를 API서버로 전송하여 결과를 받는 함수 생성 // src/api/index.js import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL, }); // 로그인 함수 function loginUser(userData) { return instance.post('login', userData); } export { loginUser }; 데이터 바인딩 폼에 입력된 데이터를 바인딩하여 API 함수와 연.. 2020. 10. 27. [Vue.js] Today I Learned - 공통 환경 설정 API 설정 공통화 API 호출 시 반복되는 요청 URL을 공통화 시켜 코드를 간결하게 할 수 있고, 설정을 관리하기 용이하다. 구현 방법 import axios from 'axios'; // axios 설정 const instance = axios.create({ baseURL: 'http://localhost:3000/', }); function registerUser(userData) { // const url = 'http://localhost:3000/signup'; // return axios.post(url, userData); // 설정된 axios 객체를 이용하여 API 호출 return instance.post('signup', userData); } export { registerUs.. 2020. 10. 26. [Vue.js] Today I Learned - 회원 가입 회원 가입 회원 가입 API를 호출하여 입력된 정보를 바탕으로 회원 가입을 진행한다. API 호출을 위한 Axios 설치 npm i axios 구현 방법 1. API 호출을 위한 Axios 구현 // src/api/index.js import axios from 'axios'; function registerUser(userData) { // 요청할 URL const url = 'http://localhost:3000/signup'; return axios.post(url, userData); } // 함수 export export { registerUser }; 2. 폼 입력창과 API 호출 기능을 수행하는 SignupForm.vue 컴포넌트 생성 id: pw: nickname: 회원 가입 {{ log.. 2020. 10. 26. [Vue.js] Today I Learned - 라우터 & 컴포넌트 설계 뷰 라우터 설치 및 연결 뷰 라우터 설치 npm i vue-router 뷰 라우터 연결 1. src/routes/index.js에 VueRouter 생성 import Vue from 'vue'; import VueRouter from 'vue-router'; // VueRouter 사용 Vue.use(VueRouter); // VueRouter 인스턴스 생성 및 export export default new VueRouter(); 2. src/main.js에 VueRouter 모듈 등록 import Vue from 'vue'; import App from './App.vue'; // VueRouter import import router from '@/routes/index'; Vue.config.pro.. 2020. 10. 26. 이전 1 ··· 12 13 14 15 16 17 18 ··· 34 다음