비디오 업로드 테스트
src: "/file/7d1e70b9-6371-4692-8c13-4784a1051c5c", width: "auto", height: "auto"
개발
FreeLLMAPI - 무료 LLM API 제공업체를 활용하여 하나의 API로 사용할 수 있게 해주는 리포지토리
출처: https://github.com/tashfeenahmed/freellmapi 이 리포지토리는 여러 LLM 제공업체에서 제공하는 무료 LLM 호출 API를 한 데 통합하여 하나의 OpenAI 호환 API로 만들어주는 리포지토리이다. 사용자는 프로그램 실행 후 표시되는 웹UI에 접속해 관리자 계정 생성 후 각 LLM 제공업체로부터 API 키를 발급 받아 FreeLLMAPI에 등록하기만 하면, 실제로 사용할 때에는 FreeLLMAPI의 주소로 전용 토큰키와 함께 요청을 보내면, FreeLLMAPI가 알아서 가용한 API를 찾아서 호출을 시도한다. 현재 사용 가능한 API 제공업체 ...
Svelte의 반응성을 활용한 이미지 뷰어 컴포넌트 만들기
우선 완성된 컴포넌트는 나의 Github 리포지토리에 올려뒀다: https://github.com/hangminlee/ImageViewer-Svelte 이번 글은 어떻게 이미지 뷰어 컴포넌트가 작동하는지에 대한 기록이다. 배경 우선 이 컴포넌트를 만든 이유는 내 블로그 글의 이미지를 보다 심도 있게 볼 수 있는 장치가 필요할 것 같아서였다. 사실 이미지를 이렇게 크게 보여줄 필요까지는 없긴 한데, 있으면 좋을 것 같다는 마음에 적...
CSS만으로 자바스크립트 하나 없이 드롭다운 토글을 만들어보자 (feat. focus-within)
인터넷에 검색해보면 CSS 드롭다운 메뉴의 대부분이 :hover 클래스만 사용해 마우스를 올렸을 때 드롭다운 메뉴가 나타나는 동작을 보여주고 있다. 그러나 때때로, 호버 할 때 뿐만이 아닌 진짜 드롭다운 메뉴처럼 클릭해야 메뉴가 보이게끔 구성하고 싶을 때가 있다. 그리고 대부분은 이런 동작을 구현하기 위해 JavaScript가 개입된다. 하지만 :focus-within을 사용하면 자바스크립트 없이도 클릭 드롭다운 메뉴를 구현할 수 있다. 이번 예제는 Tailwind CSS 의 플러그인인 daisyUI 의 Fab 컴포넌트 구성을 분...
[database] mysql user 등록 및 권한 설정(feat.원격 접속 허용)
[database] mysql user 등록 및 권한 설정(feat.원격 접속 허용)
프로덕션 환경에서 파일 업로드 용량 제한으로 삽질한 이야기 (feat. busboy, BODY_SIZE_LIMIT)
이 블로그는 게시글을 올릴 때, 파일을 업로드할 수 있게 해두었으며, 파일을 올리면 서버를 거쳐 Oracle Cloud Infrastructure(OCI) 의 오브젝트 스토리지(Object Storage) 에 파일이 올라간다. 파일 다운로드 URL이 API 주소로 인해 너무 길어지는 문제가 있고 다소 지저분하다는 느낌이 들어 실제 다운로드 URL은 DB에 저장하고 서버에 다운로드 URL을 요청하면 DB에서 해당하는 문서를 찾아 리다이렉트시켜 다운로드 받을 수 있게 해준다. 이는 본문에 삽입된 이미지도 마찬가지이다. 사건의 발단 처음에...
댓글 기능을 추가했다. (feat. Comentario)
자고로 블로그라면, 그래도 댓글로 소통하는 공간이 필요하다고 생각했다.물론 내 블로그에 와서 누군가 관심 가져주고 댓글을 많이 달아주겠지! 라는 기대는 크게 하지 않고 있지만 말이다. 하지만, 이 블로그는 단순히 나의 기록을 담는 역할 뿐 아니라, 다양한 것을 시도하고 또 녹여내는 공간으로 사용하기로 마음 먹은 만큼, 되든 안되든 이런 저런 요소들로 채워나가 보고 싶었다. 그래서 어쨌든, 댓글을 달 수 있게 했다! 혼자서 신나가지고 글 작성하고 이래저래 테스트해보는데, 기본적으로 SPA 웹페이지에 대해서는 대응이 안되어 있는 탓인지 구조를 약간 수정해야 했다. 자세한 내용은 아래에 추가하였다. Comentario 그래서 Comentario라는 녀석은 뭐하는...
컴포넌트의 경계를 찢어버리는 마법, svelte-portal
가끔 코딩을 하다 보면, 특정 요소를 현재 컴포넌트나 HTML 구조에 속하지 않은 곳에다가 요소를 배치하고 싶은 때가 있다. 예를 들면 모달(modal) 창이라던지, 드롭다운 메뉴 등등, 어떤 요소와 상호작용하는 요소를 문서 흐름에 배치하지 않고 body나 다른 요소에 붙이고 싶은 경우가 있을 수 있겠다. 그럴 때 사용할 수 있는 것이 바로 svelte-portal 되시겠다! svelte-portal은 위와 같은 상황은 물론, 별도 라이브러리를 사용할 때 HTML 문서를 받도록 되어 있는 라이브러리에서도 사용할 수 있다.예를 들어 팝업창을 쉽고 이쁘게 만들어 주는 sweetalert2 같은 라이브러리에서 바디 영역의 HTML을 문자열로 작성하거나 HTMLElement 객체를 만들지 ...
Google Search Console에 사이트 등록
어느정도 블로그의 형태를 다 갖춘 것 같아서 본격적으로 배포를 위해 구글 서치 콘솔에 사이트를 등록했다. 색인 작업이 끝나려면 시간이 좀 더 필요하겠지만, 슬슬 통계를 볼 수 있을 것이라 생각한다. 구글에 사이트를 노출시키면 본격적으로 사이트를 노리는 해커(?)들이 접근해올텐데,지금까지는 크게 접속 로깅에 대해 신경쓰지 않고 있었으나, 이번 기회에 접속 로깅도 추가하였다. 어디까지가 수집해도 되는 개인정보인지 애매한 부분...
Svelte + Vite 단일페이지 프로젝트 생성하는 방법
npm create vite@latest my-widget -- --template svelte-ts npm: nodejs의 기본 패키지 매니저 create: 다음으로 오는 패키지로부터 새 프로젝트를 생성 vite@latest: 최신 vite 패키지를 사용 my-widget: 프로젝트 이름 --: 파라미터 시작 --template svelte-ts: svelte-ts 템플릿을 사용하여 생성