반응형

2024/01/18 2

16. ESLint / Prettier 설정 (Quasar, Vue3)

코드 포맷팅 설정 ESList / Prettier 1단계 : VSCode 편집기 설정 ctrl + , 단축키로 편집기 세팅화면 확인 가능 Format On Save 체크 해제 Default Formatter : ESLint 선택 Tab Size : 2로 변경 format on save 체크되어 있으면 안된다 tab Size 2로 설정 2단계 : Package.json의 devDependencies에 라이브러리를 세팅한다 라이브러리 설치로 VSCode 편집기에서 Plugin으로 Prettier를 사용하는 것이 아닌 설정 파일로 Prettier를 사용할 수 있게 된다. 추후 팀원이 추가되더라도 동일한 포맷팅 유지가 가능해진다. "devDependencies": { "@quasar/app-vite": "^1...

7. 반응형 기초 (reactive, ref, toRefs, toRef, readonly)

reactive 함수는 객체나 배열같은 레퍼런스 타입을 반응형 객체로 만들 수 있다. String, number, boolean 이러한 프리미티브한 타입을 반응형 객체로 만들려면 어떻게 해야할까? primitive 타입에 reactive 함수를 쓰면 반응형으로 동작하지 않는다. reactive 함수는 객체나 배열같은 reference 타입의 반응형 상태, 반응형 객체를 선언하는 함수이기 때문이다. console.log 로 찍어보면 메시지는 그냥 string이다. 자바스크립트 언어의 특성을 보면 당연한 결과다. 아에 값 자체를 새로 바꿔버리기 때문이다. retrun시킨 message (콧수염괄호 안에 있는 message) 와 addMessage() 함수 안에 있는 message 두개의 상태를 서로 동기화 ..

반응형