개발 관련 기록과 정리/Vue 3 (5) 썸네일형 리스트형 Vite + Vue 3 + TypeScript 에서 eslint 버그 및 오류들 Vue3 에서 Eslint + Prettier 조합으로 코드 정규화하려고 설정 잡다가 버그와 오류가 너무 많아 이 방식은 더 이상 사용해서는 안될것 같아 기록한다. 많은 스택플로우와 eslint 깃허브를 돌아다녔다. 그 결과 아래와 같은 설정이 되었다. // .eslintrc.js module.exports = { root: true, parser: 'vue-eslint-parser', parserOptions: { parser: '@typescript-eslint/parser', sourceType: 'module', project: './tsconfig.json', extraFileExtensions: ['.vue'], }, plugins: ['@typescript-eslint', 'vue', 'vu.. Vue 3 API 탐구 1 더보기 2021.09.13 - [개발 관련 기록과 정리/Vue 3] - Vue 3 에서의 .vue 구조 분석 /* ref == reactive 두 API는 같음! { state.value.list = ['10', '11']; }; /* // 작동 안함!!! const updateState = () => { state.list = ['10', '11']; }; */ // 작동 안함!!! const name = reactive('front'); ref 와 reactive 는 비슷하지만 자료형에 따라 어떤 것을 사용할 것인가를 정하면 될것 같다. ref 는 .value 를 붙여서 값을 변경한다. 기존의 자바스크립트를 따르면 기본형에서 따온 것 같다. reactive 는 위와 같이 추가로 붙여서 값 변경을 하지.. Vue 3 에서의 .vue 구조 분석 위와 같은 script setup 이라는 선언 방식이 추가되었다. 기존에는 아래와 같은 script 에서 별도의 폼을 이용했었다. 점점 편리해지는 것 같다!! scss/sass 설치 및 사용법 _abstracts.scss // _로 시작하는 파일은 임포트만 함 @charset "UTF-8"; @import "./main.scss"; 위와 같이 임포트용 파일은 언더바를 머리에 붙여서 명명한다. Vite + Vue 3 + TypeScript 인스톨 1. 아래의 명령어로 바이트 프로젝트 생성 npm init vite viteVue3 2. Vue3 선택 → Ts 선택 3. 노드 인스톨 npm install 이전 1 다음