개발
우선 완성된 컴포넌트는 나의 Github 리포지토리에 올려뒀다: https://github.com/hangminlee/ImageViewer-Svelte 이번 글은 어떻게 이미지 뷰어 컴포넌트가 작동하는지에 대한 기록이다. 배경 우선 이 컴포넌트를 만든 이유는 내 블로그 글의 이미지를 보다 심도 있게 볼 수 있는 장치가 필요할 것 같아서였다. 사실 이미지를 이렇게 크게 보여줄 필요까지는 없긴 한데, 있으면 좋을 것 같다는 마음에 적...
https://www.youtube.com/watch?v=54jej-is6wE 위는 유튜브 url이다. 이것이 임베딩으로 영상으로 나오게끔 할 예정이다. https://maps.app.goo.gl/3zGt8WknN6bcLUVS6 위는 구글맵 url이다. 이것이 임베딩으로 구글맵 지도로 나오게끔 할 예정이다.
인터넷에 검색해보면 CSS 드롭다운 메뉴의 대부분이 :hover 클래스만 사용해 마우스를 올렸을 때 드롭다운 메뉴가 나타나는 동작을 보여주고 있다. 그러나 때때로, 호버 할 때 뿐만이 아닌 진짜 드롭다운 메뉴처럼 클릭해야 메뉴가 보이게끔 구성하고 싶을 때가 있다. 그리고 대부분은 이런 동작을 구현하기 위해 JavaScript가 개입된다. 하지만 :focus-within을 사용하면 자바스크립트 없이도 클릭 드롭다운 메뉴를 구현할 수 있다. 이번 예제는 Tailwind CSS 의 플러그인인 daisyUI 의 Fab 컴포넌트 구성을 분...
[database] mysql user 등록 및 권한 설정(feat.원격 접속 허용)
이 블로그는 게시글을 올릴 때, 파일을 업로드할 수 있게 해두었으며, 파일을 올리면 서버를 거쳐 Oracle Cloud Infrastructure(OCI) 의 오브젝트 스토리지(Object Storage) 에 파일이 올라간다. 파일 다운로드 URL이 API 주소로 인해 너무 길어지는 문제가 있고 다소 지저분하다는 느낌이 들어 실제 다운로드 URL은 DB에 저장하고 서버에 다운로드 URL을 요청하면 DB에서 해당하는 문서를 찾아 리다이렉트시켜 다운로드 받을 수 있게 해준다. 이는 본문에 삽입된 이미지도 마찬가지이다. 사건의 발단 처음에...
자고로 블로그라면, 그래도 댓글로 소통하는 공간이 필요하다고 생각했다.물론 내 블로그에 와서 누군가 관심 가져주고 댓글을 많이 달아주겠지! 라는 기대는 크게 하지 않고 있지만 말이다. 하지만, 이 블로그는 단순히 나의 기록을 담는 역할 뿐 아니라, 다양한 것을 시도하고 또 녹여내는 공간으로 사용하기로 마음 먹은 만큼, 되든 안되든 이런 저런 요소들로 채워나가 보고 싶었다. 그래서 어쨌든, 댓글을 달 수 있게 했다! 혼자서 신나가지고 글 작성하고 이래저래 테스트해보는데, 기본적으로 SPA 웹페이지에 대해서는 대응이 안되어 있는 탓인지 구조를 약간 수정해야 했다. 자세한 내용은 아래에 추가하였다. Comentario 그래서 Comentario라는 녀석은 뭐하는...
가끔 코딩을 하다 보면, 특정 요소를 현재 컴포넌트나 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 템플릿을 사용하여 생성
Vite 빌드 시 번들 구성과 용량 통계를 시각적으로 확인하고 싶을 때 가장 많이 사용하는 플러그인은 rollup-plugin-visualizer입니다. 이 플러그인을 사용하면 빌드 완료 후 어떤 라이브러리가 용량을 얼마나 차지하는지 트리맵(Treemap) 형태로 보여주는 HTML 리포트를 생성할 수 있습니다. 1. 설치 방법 먼저 개발 의존성으로 플러그인을 설치해야 합니다. Bash npm install --save-dev rollup-plugin-visualizer # 또는 yarn add -D rollup-plugin-visualizer 2. 설정 방법 (vite.config.ts 또는 vite.config.js) 플러그인을 불러온 뒤 ...