매일 공부한거 기록하기

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를 같이 사용하려고 할때 이걸 사용해보시라!

max-width와 min-width를 되던데로 쓰던 날들.. 이번엔 정리해보도록 하자 1. min-width : 최소 width값 설정, 최소 width이상일때 적용되는 코드이다. 스마트폰같은 작은 사이즈에 사용 점차 확장시킨다. 2. max-width : 최대 width값 설정, 최대 width이하일때 적용되는 코드이다. 데스크탑용 큰 화면 사이즈에 사용 점차 축소시킨다. 출처: https://studiomeal.com/archives/1004 반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까 글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹..

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 요것!

npm install --save @popperjs/core 요걸 설치해 주면 된다!

지금까지 운이 좋게도.. typeof로만 연명해왔던 날들... 배열은 Array.isArray와 instanceof Array로 구분해야한다..^^.. Array.isArray console.log(Array.isArray([a,b,c]); // true instanceof Array const test = [1,2,3]; console.log(test instanceof Array) //true 이렇게 하면 된다...^^..~

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