Front

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

id: pw: nickname: 회원가입 {{ logMessage }}

회원가입 API 요청을 위한 문서 확인 - 회원가입을 위한 데이터 요청 - 사용자 아이디, 암호, 닉네임 3개의 데이터를 서버로 보내야함 - post요청은 기본적으로 서버에 어떤 데이터를 담아서 보냄으로 Parameters확인 해줘야함 - 요청에 대한 응답은 200, 409, 500 등.. API 폴더와 회원 가입 API 함수 생성 - (https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/) - npm i axios 설치하면 package.json에서 확인 가능 - import axios from 'axios' 로 import 해와서 사용하는 방법도 있지만 - 소스 폴더의 api폴더를 만들어서 a..

회원가입 폼 데이터 바인딩 및 이벤트 연결 - 인풋의 값을 v-model로 데이터 바인딩 시켜서 연결시킴 - (데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다.) - 버튼 sumit을 클릭하면 이벤트가 발생되면서 form으로 올라간다. - form은 @submit="submitForm()"으로 메서드 실행 - 아이디, 비밀번호, 닉네임 입력하고 버튼 누르면 form 태그의 submitFrom메서드가 실행되는 구조 - prevent를 달게되면 from의 기본구조인 제출하고, 페이지이동하는 새로고침을 막을수 있다. id: pw: nickname: 회원가입 {{ logMessage }}

mode: 'history'는 URL에 /#/ 제거하는 속성 주의 - mode: 'history' 사용하면 마지막 배포시 사용하는 서버마다 설정 해줘야하는게 있음 아래 링크 게시물 들어가서 아파치, NginX 등등 서버별 설정 어떻게 하는지 확인하고 설정해주기 https://joshua1988.github.io/vue-camp/vue/router.html#%E1%84%87%E1%85%B2-%E1%84%85%E1%85%A1%E1%84%8B%E1%85%AE%E1%84%90%E1%85%A5-%E1%84%8B%E1%85%A9%E1%86%B8%E1%84%89%E1%85%A7%E1%86%AB Router | Cracking Vue.js 뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현..

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ routes: [ { path: '/', redirect: '/login', }, { path: '/login', // URL component: () => import('@/views/LoginPage.vue'), }, { path: '/signup', component: () => import('@/views/SignupPage.vue'), }, { // path에 *을 넣으면 위 URL을 제외한 모든 URL이란 뜻 path: '*', component: () => import('@/views/NotFoun..

redirect 설정 - login페이지를 기본 페이지로 만들고 싶을때 path에 '/'를 넣고 redirect로 '/login' 페이지로 이동시킨다. import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); export default new VueRouter({ routes: [ // redirect 설정 -login페이지를 기본 페이지로 만들고 싶을때 path에 '/'를 넣고 redirect로 '/login' 페이지로 이동시킨다. { path: '/', redirect: '/login', }, { path: '/login', // URL component: () => import('@/views/LoginPage.vu..

vue.js는 싱글페이지 애플리케이션 이기 때문에 URL 변경되도 네트워크 패널에 아무런 변화가 없다. 일반적인 페이지는 이동 할 때 마다 서버로 가서 해당 HTML을 화면에 뿌리면서 페이지 전환이 일어나는데 싱글페이지 애플리케이션은 윈노우 히스토리를 이용해서 URL을 컨트롤러하고 URL에 따라서 Dom을 바꾸게 된다. 애플리케이션에 화면의 갯수가 많아지면 한번에 30개의 페이지를 로딩해 오면서 속도가 저하될 수 있다. 그럴때 처음 페이지는 로그인 페이지로 지정하고, 나머지 29개 페이지는 해당 URL로 이동햇을때 가져올수 있도록 하는게 코드 스플리팅이다. 싱글페이지 애플리케이션을 만들때 어떤 페이지를 코드 스플리팅 할지 고민하고 적용해서 페이지 로딩 속도를 줄이고 사용자 경험을 향상시키자. import..