eoureo

옵시디언에서 JavaScript 코드를 효율적으로 관리하고 실행할 수 있는 플러그인이 필요하다고 느껴 RunJS를 만들었습니다. 처음엔 템플레이터를 활용해 간단한 작업을 처리했지만, 템플릿의 한계를 넘어서 옵시디언 노트에서의 JavaScript 실행 환경을 만들어 보고 싶었습니다. 그렇게 시작한 프로젝트가 벌써 1년 반이라는 시간이 흘렀네요!그동안 개인적인 사정으로 홍보와 업데이트를 미뤄왔지만, 이제 이 블로그를 RunJS의 공식 소식과 자료를 공유하는 공간으로 활용하며, 더 나은 플러그인으로 만들어 가고자 합니다."Obsidian에서 쉽고 간단하게 JavaScript 코드를 만들고 실행합니다."이 문구를 마음에 새기며, RunJS를 설계하고 만들어 가고 있습니다. RunJS란 무엇인가요?RunJS는 옵..

북마크바에 북마크릿 (Bookmarklet)을 넣어 클릭 한 번으로 한글이 포함된 주소(URL)를 한글 그대로 복사할 수 있도록 간단한 방법을 소개합니다.이 방법을 통해 작업 효율을 높이고, 인코딩 문제로 인한 불편을 줄이세요! 😊 티스토리 URL을 한글로 설정한 이유"티스토리의 포스트 주소를 문자로 설정합니다." 최근에 제 티스토리 블로그의 포스트 주소 형식을 숫자에서 문자로 변경했습니다. 초기 포스트가 많지 않을 때 변경하는 것이 적절하다고 생각했습니다.티스토리 블로그의 포스트 주소를 숫자 대신 문자로 설정한 이유는 다음과 같습니다:검색엔진 최적화(SEO): 구글 SEO 기본 가이드에 따르면, 숫자 기반 URL보다 의미 있는 문자가 포함된 URL이 검색엔진과 사용자 모두에게 더 직관적입니다.사용자 ..

티스토리 블로그에서 Odyssey 스킨의 본문 너비를 변경하는 세 가지 스타일(CSS)을 비교해 볼 수 있습니다. 이 스타일들은 반응형 디자인을 유지하면서도 본문 영역의 가독성을 향상하도록 설계되었습니다. 새로운 마음으로 블로그를 시작하며 기존 스킨을 Odyssey 스킨으로 변경했습니다. Odyssey는 깔끔한 디자인과 직관적인 구성으로 콘텐츠를 더욱 돋보이게 해주는 장점이 있습니다.하지만 블로그 글의 본문 영역은 콘텐츠 전달력을 좌우하는 중요한 요소인데, 기본 설정인 640px 너비는 모바일 환경에서는 적합하지만, 데스크톱에서는 다소 좁게 느껴질 수 있습니다. 특히 이미지, 표, 코드 블록과 같은 콘텐츠를 표시할 때는 가독성이 떨어지고, 보기에도 불편함이 생길 수 있습니다. 저는 그동안 860px 너비..

문장에서 따옴표(quotes) 안에 들어간 부분을 얻기 위한 정규식(Regular Expression)을 만들기 위해 ChatGPT를 이용했습니다. 다음과 같은 간단한 문장일 경우This is "a 'sample' string" with 'quotes "in" it'.바라는 결과a 'sample' stringquotes "in" itChatGPT에서는 다음 정규식을 쓸 수 있다고 답했습니다. /"([^"]*)"|'([^']*)'/g/(['"])(.*?)\1/g그러나 다음 문장과 같이 `따옴표 안에 이스케이프 된 따옴표`가 들어간 경우 위 정규식은 엉뚱한 결과가 나옵니다. (밑에 있는 코드 테스트에서 볼 수 있습니다.)This is "a \\"sample\\" \\string" with 'quotes "i..

dataview나 dataviewjs 코드블록에 커서(캐럿)를 위치시켜고템플릿을 실행하면 클립보드로 그 Dataview 결과를 마크다운 형식으로 복사합니다.복사된 내용을 바라는 곳에 어디에나 붙여넣기(Ctrl + V) 하면 됩니다.얼마 전에 Dataview로 바라는 파일들 목록 표를 만들어 그 가운데서도 세부적으로 더 일부만 선택하여 한꺼번에 여러 노트의 메타데이터 태그를 바꾸는 템플릿을 만들었습니다. (아래 링크) 옵시디언 - 한꺼번에 여러 노트의 태그들을 바꾸기(Feat. 템플레이터 & 데이터뷰) https://eoureo.tistory.com/entry/옵시디언-한꺼번에-여러-노트의-태그들을-바꾸기-Feat-템플레이터-데이터뷰여기에 더해서 파일 목록 표에 열을 추가하고 고칠 수 있으면 더 많은 것을..

창의 너비에 따라 한 줄에서 보이는 카드의 개수를 맞춥니다.확인하려면 JSFiddle(https://jsfiddle.net/eoureo/hd53k4sb/)에서 보면서 Result 프레임의 너비를 바꿔보면 됩니다. 수평 스크롤바가 나오지 않도록 하였습니다.가운데 정렬되도록 했습니다.카드 너비를 200px로 하고 창 너비가 400-2200px까지 200px마다 카드의 개수가 바뀝니다. 다음 소스코드를 바꾸었습니다.(참고로 W3Schools How TO - Code snippets for HTML, CSS and JavaScript (https://www.w3schools.com/howto/)에는 좋은 내용들이 많네요.) How To Create Column Cards https://www.w3schools...

Callout(말풍선, 설명글?)의 모양과 색을 보면서 골라 노트에 삽입할 수 있습니다. 얼마 전에 다음 글을 보게 되었습니다.네이버 카페 "Obsidian 옵시디언 사용자 모임" - Callout 쉽게 넣기 템플릿kaorw, 2023.02.27. 22:20https://cafe.naver.com/obsidianary/3804 템플레이터를 이용하여 Callout을 넣는 템플릿을 소개하는 글이었습니다. 글 올리신 분이 한글화까지 해서 좋았습니다. 조금 아쉬운 점이 있었지만 간단하게 만들어 쓰는 템플릿의 개념에 맞다고 느꼈습니다.  이왕이면 Callout의 모양과 색을 바로 볼 수 있으면 좋겠다는 생각이 들었습니다. 그러다가 "교보문고 도서 검색" 템플릿(https://eoureo.tistory.com/en..

템플레이터에서 템플릿이 삽입될 곳의 위치를 알면 쓸모가 많습니다. Callout을 넣으려고 할 때 커서가 위치한 곳에 넣을 수 있는지 확인할 수 있습니다. 또 Callout 안에 Callout을 넣으려 할 때 커서 위치 앞의 글에 "> " 문자가 얼마나 놓여 있는 지를 알아야 합니다. 다음의 제 글에서 사용했습니다. 소스 코드 중간에서 볼 수 있습니다. 옵시디언 템플레이터(Templater) - Callout 넣기  https://eoureo.tistory.com/entry/옵시디언-템플레이터-Templater-Callout-넣기 옵시디언 템플레이터(Templater) - Callout 넣기Callout(말풍선, 설명글?)의 모양과 색을 보면서 골라 노트에 삽입할 수 있습니다. 얼마 전에 다음 글을 보게..

"Templater" 실행이 끝난 다음 "Editor"가 활성화(fucus) 되지 않습니다. 노트 파일에서  커서(caret)가 보이지 않습니다. 그래서 이어서 바로 글을 작성할 수 없습니다. 그렇지만 "Template"에서는 바로 이어서 글을 작성할 수 있습니다.템플레이터 issue 사이트(https://github.com/SilentVoid13/Templater/issues)에서 검색해 보니 다음과 같은 비슷한 내용의 글을 볼 수 있었습니다.Put writing cursor at the end of the template after insertion · Issue #4 · SilentVoid13/Templater   https://github.com/SilentVoid13/Templater/issue..

메타 데이터(Frontmatter)에 제목과 저자 정보를 입력하고 템플레이터를 실행하여 교보문고 검색을 합니다. 그 검색 목록을 옵시디언의 목록 선택창을 써서 표시합니다. 그 목록 가운데 찾고 있는 도서를 선택하면 그 정보가 메타 데이터와 본문에 넣어지도록 합니다. 설치 방법은 다음 슬라이드를 보면 됩니다. https://docs.google.com/presentation/d/1eFoL_hvWVsFJevjQ6gXbOtt9mZovm_OIjbSj56cxniM/edit?usp=sharing   Dataview 목록 예시다음 Dataview 코드 블럭은 위에서 가져온 정보로 만들어진 노트들을 책표지 썸네일과 제목, 저자로 표로 만들어 보여 줍니다. 자신의 메타데이터(frontmatter) 구조가 저와 다르다면 ..