매일 공부한거 기록하기

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

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

Vue3 snippet을 설치하고 vueinit을 입력하면 기본 템플릿으로 입력된다 :)

신기하다 ㅋㅋㅋㅋ v-model을 쓴다면 양방향 데이터 바인딩이 가능하다 ! 데이터컨트롤하기 생각보다 더 쉬운것같다 이래서 vue를 좋아하는 것인가 .. 크크크

React 처럼 import해주면 바로 사용할 수 있을 줄 알았다... :( (원래 부딪히면서 배우는거 아니겠냐고요) 1. 단순하게 import해서 사용하는 방법 Before 처음에 이렇게 import만 해주려고 했다. After 이렇게 import를 우선해온 상태에서 export default {} 안에 import해온 component를 선언해주면 사용할 수 있다! 2. 전역에서 사용해야하는 컴포넌트는 어떻게 등록할까? main.js에 import한 후에 등록해주면된다 Vue.component('컴포넌트이름','옵션') 컴포넌트 이름은 당연히~ 컴포넌트를 사용할때 쓸 이름이고 옵션은 렌더링시 필요한 옵션들을 작성하면 된다! import GlobalTest from "./components/Global..