매일 공부한거 기록하기

toRaw() Vue에서 만든 proxy의 원시 원본 객체를 반환하는 API이다.

다른 뷰로 넘어갔을때 잘 됐는데 새로고침하니까 404Error가 뜨는 건에 대하여... 이유는 서버사이드 렌더링과 관련된 설정때문인거같다ㅎㅎ Nuxt.js는 SSR이 활성화 되어있는데 , CSR방식으로 라우팅된다면 서버에서 경로 처리가 되지 않을 수 있다고 한다. 그래서 nuxt.config파일을 봤더니 mode를 설정해주지 않았다.. mode:"universal" // SSR활성화모드 이나 mode:"spa" // CSR라우팅만 사용하는 모드 로 설정해주니까 된다... 근데 기본적으로 universal모드라고 하는데.. 왜 안된거지?ㅋㅠㅠ

Package.json에 "overrides":{ "vue":"latest" } 를 추가하면 된다!

Nuxt.js에서 localStorage를 사용하려고 할때 local storage is not defined 에러가 발생했다. 순간 ..import를 해줘야 하는건가? 생각이 들었지만 검색해보니까 요런 문제가 ! Nuxt는 SSR을 수행한당 그래서 서버에서 앱이 실행이되잖아요? 그래서 그때는 브라우저나 윈도우는 존재하지 않습니다.. 근데 localStorage는 브라우저API이져? 그래서 당연히 에러가 생기는것이여ㄸㅏ...(짱이다..) 그래서 localStorage를 사용하는 코드에가서 if(typeof window !== 'undefined') { // localStorage를 여기에 사용하십쇼 } 요렇게 조건을 주거나 if (process.client) { // 여기서 localStorage를 사용..

https://www.npmjs.com/package/@pinia/nuxt @pinia/nuxt Nuxt Module for pinia. Latest version: 0.4.11, last published: 3 months ago. Start using @pinia/nuxt in your project by running `npm i @pinia/nuxt`. There are 80 other projects in the npm registry using @pinia/nuxt. www.npmjs.com Nuxt를 사용하면서 pinia를 같이 사용하려고 할때 이걸 사용해보시라!

https://www.npmjs.com/package/unplugin-vue-components unplugin-vue-components Components auto importing for Vue. Latest version: 0.24.1, last published: 3 months ago. Start using unplugin-vue-components in your project by running `npm i unplugin-vue-components`. There are 149 other projects in the npm registry using unplugin-vue-com www.npmjs.com 요것!

vue를 이용할때 style에 범위를 제한하기 위해 scoped를 사용한다. 그러나 하위컴포넌트의 스타일을 제어할 수 없는 문제가 생기게 된다. 이럴때 deep Selector를 사용하게 된다. (이때 첫번째 자식요소에는 적용이 되지만 그 이후의 자식컴포넌트에는 영향을 줄 수 없을때를 말한다.) 현재 기준 추천 방법

옵션 API 일때 플러스하기 마이너스하기 : {{count}} 컴포지션 API 일때 import해서 가져온 API함수들을 사용해 컴포넌트의 로직을 정의한다. SFC(Single File Component) 에서 컴포지션 API는 Vue2에서 data,methods,template,watch등이 유기적으로 동작하는데, 컴포넌트의 규모가 커지면서 가독성이 떨어지게 됨 -> Vue3에서는 Composition API를 제공하면서 setup 함수가 생기게 됨 ref : 반응형변수 data methods: js 함수 onMounted, onUpdate : LifeCycle hooks watch: 반응형변수 변경탐지 computed : wtach함수로 구현가능한 계산된 값에 사용. setup함수 특징 : 컴포넌트 ..

이중 중괄호는 html속성 내에서 사용할 수 없다. 대신 v-bind를 사용한다. 단축해서 사용이 가능하다 여러 속성을 나타내는 js객체 const person = { name:"james', age:30 }

문제점: HTML을 동적으로 렌더링하면 xss위협에 빠질수 있다. 유저로부터 입력받는 부분에는 v-html을 절대 사용하지 않는다. https://doqtqu.tistory.com/352 [Vue.js] v-html 대체하기 v-html이란? v-text(이중 중괄호, mustaches) 디렉티브는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 따라서 아래 코드는 그대로 텍스트로 보여지게 된다. Using mustaches: {{ rawHtml }} Using mustachs: This shoul doqtqu.tistory.com