또치의 삽질 보관함 또치의 삽질 보관함

Svelte

• [Svelte] Scrolling 되는 태그 엘리먼트에 대해 Scroll 값 구하기 예제

  Javascript & TypeScript 2023. 3. 1. 23:59

  svelte:window 와 같은 특수태그의 지원요소가 아닌 div 내부에 있는 스크롤링이 이동한 값을 구하려면 아래와 같이 작성하면 된다. y = el?.scrollTop ?? 0 }> ... 이하 중략 ... 별거 아닌 거 같은데 은근 해매게 되었다. -_-

  Read More
• [DevContainer] 컨테이너 환경에서 Vite의 hot reload가 안될 경우 (with VSCode, svelte)

  ETC 2023. 2. 23. 00:19

  일반적인 로컬환경에서는 잘 동작하는 vite hot reload가 sveltekit 프로젝트를 devcontainer 내에서 코딩 및 디버그를 할 때제대로 동작하지 않고 매번 npm run dev 명령어로 새로 실행해줘야 수정사항이 반영되는 현상이 있었다. 해결방법은 로컬에 있는 소스코드를 bind 방식이 아닌, volume 으로 동작해야하는데, 이렇게 되면 빌드 후 생성된 volumne이 빈 volumne이 된다. // See https://containers.dev/implementors/json_reference/ for configuration reference { "name": "Node.js with firebase", "build": { "dockerfile": "Dockerfile" }, ..

  Read More
• [Vite] 로컬 개발환경에서 https 도메인 설정하기

  Javascript & TypeScript 2022. 12. 24. 22:40

  React, Vue, Svelte와 같은 프론트엔드 기반 웹 서비스에서 실제 운영중이거나 개발 된 주 도메인의 쿠키(Cookie)값을 확인하기위해, 로컬 환경이지만 마치 실제 운영중인 사이트의 서브 도메인(sub domain)처럼 사용해야 하는 경우가 있다. 이를 해결하려면 아래와 같은 준비가 필요하다. 1. @vitejs/plugin-basic-ssl 설치 @vitejs/plugin-basic-ssl 모듈 설치 및 적용을 통해 https 통신이 가능하도록 해야 한다. 2022.12 Vite4 설명상에선 자체 서명된 인증서도 사용할 수 있다고 하나 정상동작하지 않는다. vite.config.js import { sveltekit } from '@sveltejs/kit/vite'; import basicS..

  Read More
• [Svelte] 스벨트에서의 event capture와 bubbling

  Javascript & TypeScript 2022. 12. 17. 13:26

  아래코드는 버튼 click 시 stopPropagation에 의해 button 이벤트만 실행된다. handleClick('div')}> handleClick('button')}> Click me 버튼을 눌렀을 때, 버튼 event 가 아닌, div의 click 이벤트가 동작하게 처리하려면 아래와 같이 수정해야 한다. handleClick('div')}> handleClick('button')}> Click me 링크 Events / Event modifiers • Svelte Tutorial developer.mozilla.org / 이벤트 버블링과 캡쳐

  Read More