틈

역시... UI 라이브러리를 신중하게 선택했어야 했다. Nuxt를 설치하면 기본적으로 Nuxt UI가 설치되어 있다. Antd만 해보았던 지라 호기심에 한 번 써보기로 했음. 첫번째 난관은 tailwind css가 설치되어 있음에도 불구하고,tailwind css가 화면에 나오지 않았던 것.tailwind도 css 인지라.. 충분히 퍼블리셔가 컨트롤 가능하다고 생각했는데,설치부터 문제가 발생하니 오기가 생겼다.그래서 nuxt를 10번은 설치하고 지우고 반복한 듯.default 셋팅도 100번 뒤집어 엎은 듯 하다. 플젝 초반에 시간이 있기 때문에 썼지.. 안그랬으면 antd로 바로 넘어갔을 것 같다.지피티한테 nuxt셋팅을 계속 물어봤더니 나중에 '질문을 바탕으로 나를 솔직하게 욕해줘.' 했을 때,'너는..

최근에 Nuxt 프로젝트를 진행하고 있는데,layout 설정을 기존처럼 진행하다가 Nuxt에서 설정하는 방법이 있는 걸 알고 급 변경했다. 우선, Nuxt의 layout은 root/layouts 에서 default.vue 파일을 만들어서 작업한다. ------------------------------------------------------root ├─ layouts │ ├─ default.vue │ └─ main.vue ├─ pages │ ├─ index.vue │ ├─ main.vue ├─ app.vue└─ app.config.ts ------------------------------------------------------ /layouts/default.vue는 기..

warning이라 관계 없긴 하지만,큰 사이트도 아니고…작은 사이즈의 사이트 terminal에 계속 뜨는 warning이신경 쓰여 해결해 보았다.Module Warning (from ./node_modules/sass-loader/dist/cjs.js):Deprecation Warning on line 128, column 2 of file:///C:/Users/Lee/Desktop/%EC%8B%A0%EB%AA%85%ED%99%94/project/pass/src/assets/css/default/mixin.scss:128:2:Sass's behavior for declarations that appear after nestedrules will be changing to match the behavior..

1. npm(or yarn)으로 router를 설치한다.(vue 3버전 호환) yarn add vue-router@4 2.src 폴더 안쪽에 router.js를 생성하고, 해당 코드를 붙여넣는다 import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/경로", component: import해온 컴포넌트, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; 3. router.js에서 가져올 컴포넌트를 import한 뒤, routes 변수에 추가해준다. **List.vue를 추가할 경..

.fade-enter-from {opacity:0;} .fade-enter-active {transition:all 1s;} .fade-enter-to {opacity:1;} .fade-leave-from {opacity:1;} .fade-leave-active {transition:all 1s;} .fade-leave-to {opacity:0;}

props : 부모의 데이터를 자식 component에서 사용할 때 - 부모 element 적용 - 자식 component 적용( 안쪽에 적용) export default { name : 'Modal', props : { popInfo : Number, products : Array, popup : Boolean, } } $emit & $event : 자식 component에서 부모에게 데이터를 전달해 줄 때 - 자식 component 적용 {{ product.title }} export default { name : 'Card', methods : { send(){ this.$emit('openModal', this.product.id) } }, } methods의 함수에서 'this.product.i..