전체 글125 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. 이전 1 2 3 4 5 6 ··· 42 다음
