Front

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" ] } }

폴더의 레벨이 깊을수록 파일을 거슬러 올라가는 앞의 코드(../)가 많이 붙게 된다. 나중에 에셋에 이미지를 넣거나 폰트 관리 시 충분히 번거로운 일이 될 수 있다. 이런부분을 이런식으로 (../) 접근하는게 아니라 웹팩의 리졸브 옵션인 @로 접근하는 방법을 사용해보자 파일이 많고 컴포넌트가 많아져서 폴더가 몇백개 늘어나면 import할때 저런 경로들이(../) 많은 코드가 필요하게되고 꽤 복잡한 구조가 나올수 있다. 그럴때 절대경로로 컴포넌트를기준으로 나머지 컴포넌트를 불러올수 있는 그런 환경으로 바꿔볼수있다. //전 import Demo from "../../demo/basic/Demo"; //후 import Demo from "@demo/basic/Demo";

ESLint 와 Prettier를 설정했을때 어떤식의 이점이 있을까? 팀 내에 각자 다른 IDE를 사용할때 (vscode, WebStorm, Atom 등 많은 IDE가 있음) 각자 다른 IDE로 해당 IDE의 개발 툴에 의존하여 코딩했을시 개발 툴이 달라졌을때 코드는 일관적이지 않게된다. (vscode를 쓰고 있단 가정 하에 - vscode는 왼쪽의 플러그인으로 코딩시 여러 기능을 사용할 수 있다.) 이렇게 개발 툴에 의존했을때 개발 툴의 기능에 의존하면 개발 툴이 달라졌을때 코드가 일관적이지 못하게 된다. 하지만 ESLint와 Prettier를 사용하면 Prettier 는 프로젝트 소스 레벨에서 설정이 되어있어서 다른 사람이 이 코드를 클론, 포크, 브랜치따서 작업해도 모두가 동일한 설정으로 코드를 정..

설정에서 사용안함(작업 영역) 클릭 그럼 이런식으로 바뀜 다시 로드 필요 버튼 클릭해서 프로젝트 재 로드 ctrl+, 눌러서 format on save 검색 Editor: Format On Save 체크박스 해제하기 이게 켜져있으면 ESLInt로 정리할지 Format 으로 정리할지 충돌나서 꼭 꺼줘야한다.