목록HTML5 FrontEnd (9)
Real Vectorism. 훨씬 더 입체적으로...
GitHub - Grast/FuckingNexacro: 넥사크로 그딴거 왜씀?넥사크로 그딴거 왜씀? Contribute to Grast/FuckingNexacro development by creating an account on GitHub.github.com FuckingNexacro Demobrightness_7 menu arrow_upwardgrast.github.io 위는 깃헙 리포지토리이고아래는 데모 시연페이지임 어차피 내가 할 개인 프로젝트도 산더미인데이거 끝까지 붙들고 책임지고 유지보수할 생각은 없으니재미로만 감상하거나 수명끝난 EOL 컴포넌트로만 사용하시는게...
https://www.youtube.com/watch?v=DkDZh6gq9a0곧 조만간 오픈소스로 공개해볼 예정
GitHub - Grast/youvanced: my first step of svelte projectmy first step of svelte project. Contribute to Grast/youvanced development by creating an account on GitHub.github.com구체적으로 스벨트가 처음은 아닌데 깃헙에까지 올려보는건 아무래도 거의 처음인듯. 기존에 작업하다가도 맘에 안들어서 갈아엎어버린 프로젝트로 스벨트 만진것들 세보면 더 많긴 한데 이건 그래도 남들에게 보여줄 수 있을 듯. 유밴스드 우리는 우리의 컴퓨터가 구글 및 유튜브의 만행으로 인해 광고차단 서비스에 디도스 공격을 거는 좀비PC로 사용되는 것을 원치 않습니다. 사용방법(개발자) 그냥 체크아웃 받고 ..
말 그대로 각 패스에 도달할때마다 어떤 페이지를 보여줄 것인지를 결정해주는 분기결정자 역할을 한다. App.svelte svelte-spa-router 를 불러와서 Router 엘리먼트를 사용할 수 있다. prefix는 선택사항이며 없을 경우에는 ""로 디폴트가 되는 특성인 듯 하다. 구체적으로는 더 살펴봐야하는데 계속 볼때마다 헷갈린다. 중첩 라우터 위에서 사용했던 Router 엘리먼트에 prefix 라는 프로퍼티를 하나 더 전달하면 된다. prefix를 추가하면 알아서 prefix + path 형태의 결합으로 라우팅 결과를 보여준다. 그런데 여기에서 뭔가 꼬임이 발생하는것을 확인했다. 꼬임은 아래에서 후술 router.js import Root from "./Root.svelte"; import Ma..
어렵지만 쉬운 derived readable, writable 이 1차 구독변수라면 derived 는 2차 구독변수로 보면 될 것 같다. 상위 구독변수의 변화를 감지해서 값을 알아서 새로 정의해주는 기능이라고 보면 충분할 것 같다. 예를 들어 const subsc1 = writable(""); const subsc2 = derived(subsc1, $subsc1 => { return `derived ${$subsc1}`; }); 이라고 가정할 때 subsc1.set("value01"); console.log("subsc2 value: ", get(subsc2)); subsc1 의 값을 변동한다. subsc2 에는 손을 대지 않아도 콘솔에 값을 직접 찍어보면 subsc2 value: derived valu..
트랜지션을 적용하려는데 계속 화면 단위로 터져버리는 경우 VScode 에서 svelte 의 transition 을 사용할 때 scale 등의 트랜지션 효과를 사용하려고 보면 꼭 transition 을 못찾는다고 화면 전체가 뻗어버리는 경우 혹시나 import { scale } from "svelte/types/runtime/transition"; 이렇게 선언되어있다면 import { scale } from "svelte/transition"; 로 바꿔서 확인해볼것. 엉뚱한걸 import 로 연결시켜버리는 버그인 듯 하다. 중첩 라우터가 제대로 연결되지 않는 경우 라우터를 설정하는 js 파일에서 가능하면 /route/** 와 같이 (마치 스프링처럼) 와일드카드를 2개를 적어 하위경로 전체를 매핑시켜주는 방..
당분간은 백엔드 본질에만 집중하는걸로...
뭔가 어제까지 잘 돌아가던 프로젝트가 갑자기 빌드오류가 계속 뜨길래 뭔가 했더니 무슨 npm audit으로 오류가 떠서 확인해봤더니 vite에 취약점이라도 생긴건가 강제 업데이트를 하면 기존에 1버전대 쓰던게 무려 2버전대로 넘어간다. 확인해보니 1에서 2로 넘어가는 과정 중에서 마이그레이션을 수동으로 해줘야하는 기능들이 있다고... 한글 번역도 찾는게 전혀 안되고 있고 작업이 얼마나 가게 될 지 몰라 한동안은 vite 1.0.0-rc.13 이었나 이걸로 계속 쓰고 한글 마이그레이션 가이드 나오면 그때 옮기던가 해야겠다.
0) npm 설치 1) 기본작업 (시작 >> cmd 검색 후 명령 프롬프트) npm install -g vue@next npm install -g @vue/cli 2) 원하는 폴더에 워크스페이스 생성 후 주소창에 cmd를 입력해서 해당폴더를 위치로 하는 명령 프롬프트 실행 npm init vite-app (프로젝트이름) 몇몇 예시는 vue create (프로젝트이름) 으로 진행하던데 vue 1, 2 에서는 몰라도 vue3 공식문서는 npm init vite-app 으로 설명하고 있어서 vue create 는 여기에서는 언급하지 않겠음. 솔직히 vue 프로젝트가 만들어지는것은 같고 기본파일들은 미묘하게 다른것 같음. 3) 프로젝트 생성 후 다음 작업 cd (프로젝트이름) npm install npm run..