퇴근후서버다운 SIDNFT

tailwind 필수 입니다.따라하기 영상: https://www.youtube.com/watch?v=7_mqThfC_yM 빼먹지 말아야하는게public/index.html 의 body 부분에이거 들어가야합니다.저는 어두운게 기본이라 dark 를 썼지만밝은게 기본이라면 light 를 쓰시면 됩니다. tailwind.config.js 에는  darkMode: "class",이거 들어가야합니다.media 는 사용자 윈도우즈 설정을 따르기 때문에 변경을 할 수 가없습니다. class 는 변경할 수 있습니다.나머진 영상 따라하시면 될 것 같구요옛날보다 더 쉬워졌군요좋네요

꼭 vue 가 아니더라도 붙일 수 있는거 같습니다. 영상: https://www.youtube.com/watch?v=a6XI8XAuORM&t=41s script 부분에import { Icon } from "@iconify/vue"; template 부분에는 이런식icon="" 부분에 들어갈 내용은 아이콘 브라우저에서링크: https://icon-sets.iconify.design/ Iconify - home of open source icons icon-sets.iconify.design 검색해야합니다.   아래쪽에 글씨가 나옵니다. 화살표의 버튼이 복사하기 버튼  제 사이트 하단에 가시면링크: https://apps.sidnft.com/이런식으로 그럴듯 하게 나옵니다.아주 좋네요

영상: https://www.youtube.com/watch?v=wvINSME-FMs작은 용량으로 좀더 웹페이지를 블링 블링 하게 만들 수 있습니다.좋은 라이브러리 같습니다. 개발문서: https://motion.dev/docs/vue Get started with Motion for Vue | Motion for VueGet started with Motion for Vue with our installation guide and interactive examples.motion.dev문서에는 NUXT 를 언급하는데 그런거 필요없고 import {motion} from "motion-v"랑              :while-hover="{ scale: 2.0 }"         :while-press..

문제인식2025-03-13 현재 최신 버전 으로 설치하면 동작이 안되네요1년전에 잘되던 과거버전으로 설치하기 위한 작업 순서를 정리하였습니다. 특정 버전 모듈 설치npm install -D tailwindcss@3.4.1npm install -D autoprefixer@10.4.18npm install -D postcss@8.4.35yarn installtailwind.config.js 파일 생성/** @type {import('tailwindcss').Config} \*/module.exports = {purge: ["./index.html", "./src/**/\*.{vue,js,ts,jsx,tsx}"],content: [],theme: {container: {center: true,},extend:..

소스코드: GoToTheMetaverse/vue-tutorial: vue 강좌 (github.com) 의 vue-1 폴더입니다. 영상: https://www.youtube.com/watch?v=52iKji9UK5U&t=619s MOTION ONE 튜터리얼 페이지: https://motion.dev/guides/quick-start npm 버전은 16을 사용했습니다. vue-cli 와 yarn 이 필요합니다. node 설치 -> yarn 설치 -> vue 설치 -> 코드의 모듈 설치 순으로 진행합니다. 매우 귀찮은 걸차 길뿐 방법은 어렵지 않으니 차근차근 해보시면 나중에 좋습니다. yarn 설치: npm install --global yarn vue 설치: yarn global add @vue/cli 코드..

출처: https://vueshowcase.com/question/vue-reactivity-transform-ref-not-defined vue reactivity transform $ref not defined vueshowcase.com 이 글을 보고 해결하였습니다. vite 필요한건 아니고 eslint 가 방해하는거 였군요 // .eslintrc.js module.exports = { // (생략) globals: { $ref: "readonly", $computed: "readonly", $shallowRef: "readonly", $customRef: "readonly", $toRef: "readonly", }, }; global 변수 등록 해서 해결했습니다..

https://www.youtube.com/watch?v=PPrUWISAbmU&t=1s 응용할 생각도 못했는데 이런 방법이 있군요 v-bind(변수) 를 이용하면 되네요 실시간으로 고쳐지니 부드러운 에니메이션은 힘들어도 어느정도는 가능합니다.

(주렁주렁) gyp ERR! cwd C:\\project\\git_sidnft\\sidnft_vue3\\node_modules\\node-sass gyp ERR! node -v v16.14.2 잘쓰고 있었는데 구글애드센스 해보겠다고 설치했다 실패한후론 yarn install 이 동작하지 않더군요 node_modules 를 삭제하고 다시 설치해도 안되는 ㄷㄷ 에러 마지막에 node-sass 가 보이길레 일단 yarn remove node-sass 로 지워봤더니 yarn install 이 성공했습니다. 실행은 node_sass 가 없어서 안된다고 합니다. 다시 node-sass 설치를 했어요 # node 14는 yarn add node-sass@4 # node 16은 yarn add node-sass@6 이..

블록체인에 흥미를 가질 수 있게 가위바위보 게임을 만드는 강좌를 만들었습니다. (만들만들) 블록체인에 흥미를 가지게 하는게 목적이긴한데 재미 있냐고 하면 그건잘 모르겠군요 https://www.youtube.com/watch?v=pF5-foXc_kw&t=1s 첫번째는 truffle 로 스마트컨트렉트를 올려봅시다. https://www.youtube.com/watch?v=vrWV66J9B0g&t=2s 두번째는 vue 와 tailwind 로 웹페이지를 만들는 강좌 입니다. 세번째로는 UI 를 강화 시키는 강좌 입니다. https://www.youtube.com/watch?v=wXUi4CsAf8E&t=110s 이후로 실시간 로그를 넣어서 좀더 업그레이드 시켜볼까 생각중입니다.

영상만드는 중에 조코딩님이 먼저 올리셔서 허망하게 날림으로 만들어졌습니다. 뭔가 좀더 업그레이드 해서 쓸모있게 만들어보려구요 웹호스팅으로 replit 을 사용하였고 웹프로그래밍은 vue 를 이용했습니다. 클레이튼은 truffle 개발하였습니다. https://www.youtube.com/watch?v=RqZ4pUPF3Rc&t=166s 첫번째 강좌는 truffle 로 스마트컨트렉트를 올리는 강좌입니다. https://www.youtube.com/watch?v=GF5YL0ycW7c&t=402s 두번째 강좌는 웹페이를 만들어서 올라간 스메트컨트렉트와 연동하는 작업입니다. vue 와 tailwind 를 이용했습니다. 이후에는 유니티로 좀더 간지나게 사이트를 만들려고 준비중입니다.