Front

로그인 | 회원가입 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 으로 정리할지 충돌나서 꼭 꺼줘야한다.

윈도우 ctrl + , 누르면 vscode 설정파일 열림 ESLint: Probe 이게 바로 ESLint가 동작할 파일의 확장자들을 나열한 것 이게 있어야 ESLint가 정확하게 동작한다 ESlint: Validate 에서 setting.json에서 편집 버튼을 누르면 이런 파일이 열린다. { "workbench.editor.enablePreview": false, "editor.unicodeHighlight.invisibleCharacters": false, "atomKeymap.promptV3Features": true, "editor.multiCursorModifier": "ctrlCmd", "editor.formatOnPaste": true, "workbench.iconTheme": "materi..

.eslintrc.js module.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser: "@babel/eslint-parser", }, rules: { "no-console": "off", // "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", // "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", /* 이렇게 prett..