개발 Svelte
우선 완성된 컴포넌트는 나의 Github 리포지토리에 올려뒀다: https://github.com/hangminlee/ImageViewer-Svelte 이번 글은 어떻게 이미지 뷰어 컴포넌트가 작동하는지에 대한 기록이다. 배경 우선 이 컴포넌트를 만든 이유는 내 블로그 글의 이미지를 보다 심도 있게 볼 수 있는 장치가 필요할 것 같아서였다. 사실 이미지를 이렇게 크게 보여줄 필요까지는 없긴 한데, 있으면 좋을 것 같다는 마음에 적...
이 블로그는 게시글을 올릴 때, 파일을 업로드할 수 있게 해두었으며, 파일을 올리면 서버를 거쳐 Oracle Cloud Infrastructure(OCI) 의 오브젝트 스토리지(Object Storage) 에 파일이 올라간다. 파일 다운로드 URL이 API 주소로 인해 너무 길어지는 문제가 있고 다소 지저분하다는 느낌이 들어 실제 다운로드 URL은 DB에 저장하고 서버에 다운로드 URL을 요청하면 DB에서 해당하는 문서를 찾아 리다이렉트시켜 다운로드 받을 수 있게 해준다. 이는 본문에 삽입된 이미지도 마찬가지이다. 사건의 발단 처음에...
가끔 코딩을 하다 보면, 특정 요소를 현재 컴포넌트나 HTML 구조에 속하지 않은 곳에다가 요소를 배치하고 싶은 때가 있다. 예를 들면 모달(modal) 창이라던지, 드롭다운 메뉴 등등, 어떤 요소와 상호작용하는 요소를 문서 흐름에 배치하지 않고 body나 다른 요소에 붙이고 싶은 경우가 있을 수 있겠다. 그럴 때 사용할 수 있는 것이 바로 svelte-portal 되시겠다! svelte-portal은 위와 같은 상황은 물론, 별도 라이브러리를 사용할 때 HTML 문서를 받도록 되어 있는 라이브러리에서도 사용할 수 있다.예를 들어 팝업창을 쉽고 이쁘게 만들어 주는 sweetalert2 같은 라이브러리에서 바디 영역의 HTML을 문자열로 작성하거나 HTMLElement 객체를 만들지 ...
npm create vite@latest my-widget -- --template svelte-ts npm: nodejs의 기본 패키지 매니저 create: 다음으로 오는 패키지로부터 새 프로젝트를 생성 vite@latest: 최신 vite 패키지를 사용 my-widget: 프로젝트 이름 --: 파라미터 시작 --template svelte-ts: svelte-ts 템플릿을 사용하여 생성