본문 바로가기

개인공부/Vue316

Nuxt3 directory structure 본론 디렉토리구조 Nuxt는 Auto import라는 기능이 있어서 해당 파일에서 import * from "*" 이런 행위를 안해도 됩니다. assets, public assets/ 이 디렉토리에서는 주로 아래와 같은 것을 포함합니다. Stylesheets (CSS, SASS, etc.) Fonts Client에서만 제공되는 이미지 파일입니다. 서버쪽에서 받고 싶다면 public/ 디렉토리에 넣으시면 됩니다. public/ 이 디렉토리는 주로 이름을 유지하거나 변경되지 않을 가능성이 있는 파일을 넣습니다. Favicon robots.txt Image files 두 개의 차이는 딱 이정도로 나눌 수 있고 (http://localhost:3000/test.jpeg) assets은 이런식으로 볼 수 없지만 .. 2023. 12. 29.
vue3 Dom구조에 접근하기 서론css에 대해서 이것저것 잘 알려주시는 유튜버이십니다.https://www.youtube.com/watch?v=iLmBy-HKIAw&t=0s 우선 여기서는 html, css, js만으로 코드를 실행했기 때문에 이것을 vue3로 어떻게 옮겨야하는지에 대해서 많이 찾아보고 고민해봤습니다. 간단한 포트폴리오를 만들고 싶었고 best portfolio websites이란 영상을 보니깐 재밌는 기능을 추가하고 싶어서 글을 작성해봅니다! 본론 위에 gif는 제가 구현한 화면입니다.가로 방향으로 이동하는 무한 스크롤링입니다.아래는 해당 기능이 구현이 된 코드펜입니다.Progressively enhanced infinite horizontal scroll (codepen.io) Progressively enhanc.. 2023. 12. 15.
객체로 저장된 배열 props로 보내기 본론 혼자 포트폴리오 사이트를 만들면서 객체를 배열로 만드는 과정에서 자꾸만 에러가 발생해서 그에 대한 해결법을 배워왔습니다. 기존에 에러가 발생한 방법 const arr = [ { icon: "Dashboard", label: "Dashboard", }, . . . { icon: "Settings", label: "Settings", }, ]; 이러한 객체로 저장된 배열이 있다고 가정을 하면, interface Arr { icon: string label: string }[] const arr: Arr = ref({icon: "", label: ""}) 이런식으로 만들었고 Arr이 배열에 기능을 더 이상 할 수 없다고 했습니다. 새로배운 방법 const arr = [ { icon: "Dashboard".. 2023. 12. 12.
Vue3 전역 스타일 관리 본론 sass 전처리기를 사용해서 전역 스타일 관리 npm install -g sass npm install -D sass 패키지를 설치합니다. devDep환경도 설치를 해야 에러가 발생하지 않습니다. @import "./color.scss"; @import "./font.scss"; * { padding: 0; margin: 0; } main.scss 파일에 모든 전역 css 스타일을 적어둡니다. //vite.config.ts css: { preprocessorOptions: { scss: { additionalData: `@import "./src/assets/styles/main.scss"; `, }, }, }, 이러한 코드를 입력해줍니다. 공식홈페이지링크 이렇게 설정을 해주면 끝납니다. 참고로 .. 2023. 12. 12.
도저히 안되겠다에요 ㅠㅠㅠㅠㅠ 서론 혼자서 vue3 + typescript를 통해서 간단한 포트폴리오 사이트를 개발하려고 머리를 박았으나 우선 vue3에 대한 정보는 차고 넘칩니다. 하지만, vue3 + typescript에 대한 정보가 많지않아서 에러가 발생해도 검색해도 안나옵니다.... 그래서 유튜브를 뒤져보다 vue3 + typescript강의가 있어서 이것을 보고 다시 공부를해서 만들어 볼 생각입니다. ㅠㅠㅠㅠ 본론 import에러 import vue를 할때마다 에러가 발생했습니다. 사실 vue 뿐만 아니라 다른 컴포넌트를 import할 때마다 에러가 발생했습니다. 그런데 이런저런 플러그인을 설치하고도 에러가 발생했지만 vscode를 껏다 키니깐 에러가 해결이 되었습니다. 왜 아직도 에러가 발생했는지는 의문입니다... (@bu.. 2023. 12. 11.
Vue3 #11 서론 #10에서는 라우터 설정을 했고 #11에서는 라우터 설정이 후 옵션을 부여합니다. 본론 props 보내기 { path: "/", name: "Main", component: MainComponent, props: { foo: "bar" } }, { path: "/list", name: "List", component: ListComponent, props: true }, { path: "/:pathmatch(.*)", name: "Not-Found", component: ErrorPage }, { path: "/post/:id", component: DetailComponent, props: true }, https://github.com/vuejs/router/blob/main/packages/r.. 2023. 12. 5.

티스토리툴바