Front

회원가입 폼 데이터 바인딩 및 이벤트 연결 - 인풋의 값을 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..

로그인 | 회원가입 1. 태그로 클릭 시 URL 이동 2. 태그가 있어야 URL 이동된 화면이 그려짐

1. views 폴더생성, routes에 넣을 component 생성 routes / index.js import Vue from 'vue'; // 뷰 라우터 연결 import VueRouter from 'vue-router'; // 1. 뷰 라우팅 할 컴포넌트 연결 import LoginPage from '@/views/LoginPage.vue'; import SignupPage from '@/views/SignupPage.vue'; // Vue.use - 플러그인을 실행하기 위해 필요한 코드 // 뷰 라우터가 모든 컴포넌트에 적용되게 플러그인 연결 Vue.use(VueRouter); // VueRouter를 이용해서 인스턴스 만들고 // 인스턴스를 default로 꺼내면 // VueRouter 인스턴..

2022년 2월 7일부터 뷰 라우터 설치할때 버전을 표기해 주어야 합니다. npm i vue-router@3.5.3 index.js import Vue from 'vue'; // 뷰 라우터 연결 import VueRouter from 'vue-router'; // Vue.use - 플러그인을 실행하기 위해 필요한 코드 // 뷰 라우터가 모든 컴포넌트에 적용되게 플러그인 연결 Vue.use(VueRouter); // VueRouter를 이용해서 인스턴스 만들고 // 인스턴스를 default로 꺼내면 // VueRouter 인스턴스가 파일에서 밖으로 나가게됨. 이게 export 역할 // default는 하나의 변수나 파일이 나가게 하는것 export default new VueRouter(); main.j..

https://v2.vuejs.org/v2/style-guide/ Style Guide — Vue.js Vue.js - The Progressive JavaScript Framework v2.vuejs.org

jsconfig.json { "compilerOptions": { "target": "es5", "module": "esnext", "baseUrl": "./", "moduleResolution": "node", "paths": { // 이 프로젝트를 기준으로 @를 쓰게되면 src폴더 밑에 있는 파일을 바로 확인할 수 있단 뜻 "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] } }