Front

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

https://prettier.io/ Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io Prettier 공식 사이트 Prettier 란? 코드 정리 기능 ESList에서 Prettier를 설정해야 하는 이유는 Prettier의 설정 파일에 정의한 규칙으로 코드를 정리할수 있지만 ESList의 rules 와 충돌이 나기 때문에 ESList가 우선시 되어야한다. 따라서 프리티어의 설정파일이 ESList안에 들어가는게 좋다 이렇게 하면 Prettier로 정리도 하면서 ESList룰까지 잡아주는 두가지 기능을 함께 쓰는 효과가 나타난다

자바스크립트에서 에러가 날 만한 요소들을 모두 제거하는게 ESLint 쉽게 이야기해서 자바스크립트 코드 문법 보조 도구 eslintrc.js ESList에서 제공하는 룰이 있다. "콘솔을 입력하지마라" 개발 모드일때는 에러가 있으면 warn을 뿜고 프로퍼타입 모드일때는 off

a라는 변수가 선언되고 할당 됬지만 사용되고 있지 않다고 나와있다. ESLint는 에러가 나지않게 도와주는 도구이지만 ESLint 에러가 vue3점대 이후부터 애플리케이션 화면을 덮게되는 문제가 발생했다. 이 에러가 뜨면 애플리케이션을 실행할 수 없기 때문에 해결하고 넘어가야 한다. vue.config.js 파일 (vue 설정 파일) 에서 devServer 추가 devServer: { client: { overlay: false } } vue.config.js const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, devServer: { client: { ..