개발
이 블로그는 게시글을 올릴 때, 파일을 업로드할 수 있게 해두었으며, 파일을 올리면 서버를 거쳐 Oracle Cloud Infrastructure(OCI) 의 오브젝트 스토리지(Object Storage) 에 파일이 올라간다. 파일 다운로드 URL이 API 주소로 인해 너무 길어지는 문제가 있고 다소 지저분하다는 느낌이 들어 실제 다운로드 URL은 DB에 저장하고 서버에 다운로드 URL을 요청하면 DB에서 해당하는 문서를 찾아 리다이렉트시켜 다운로드 받을 수 있게 해준다. 이는 본문에 삽입된 이미지도 마찬가지이다....
자고로 블로그라면, 그래도 댓글로 소통하는 공간이 필요하다고 생각했다.물론 내 블로그에 와서 누군가 관심 가져주고 댓글을 많이 달아주겠지! 라는 기대는 크게 하지 않고 있지만 말이다. 하지만, 이 블로그는 단순히 나의 기록을 담는 역할 뿐 아니라, 다양한 것을 시도하고 또 녹여내는 공간으로 사용하기로 마음 먹은 만큼, 되든 안되든 이런 저런 요소들로 채워나가 보고 싶었다. 그래서 어쨌든, 댓글을 달 수 있게 했다! *혼자서 신나가지고 글 작성하고 이래저래 테스트해보는데, 기본적으로 SPA 웹페이지에 대해서는 ...
가끔 코딩을 하다 보면, 특정 요소를 현재 컴포넌트나 HTML 구조에 속하지 않은 곳에다가 요소를 배치하고 싶은 때가 있다. 예를 들면 모달(modal) 창이라던지, 드롭다운 메뉴 등등, 어떤 요소와 상호작용하는 요소를 문서 흐름에 배치하지 않고 body나 다른 요소에 붙이고 싶은 경우가 있을 수 있겠다. 그럴 때 사용할 수 있는 것이 바로 svelte-portal 되시겠다! svelte-portal은 위와 같은 상황은 물론, 별도 라이브러리를 사용할 때 HTML 문서를 받도록 되어 있는 라이브러리에서도 사용할 수 있다...
어느정도 블로그의 형태를 다 갖춘 것 같아서 본격적으로 배포를 위해 구글 서치 콘솔에 사이트를 등록했다. 색인 작업이 끝나려면 시간이 좀 더 필요하겠지만, 슬슬 통계를 볼 수 있을 것이라 생각한다. 구글에 사이트를 노출시키면 본격적으로 사이트를 노리는 해커(?)들이 접근해올텐데,지금까지는 크게 접속 로깅에 대해 신경쓰지 않고 있었으나, 이번 기회에 접속 로깅도 추가하였다.  형태로 보여주는 HTML 리포트를 생성할 수 있습니다. 1. 설치 방법 먼저 개발 의존성으로 플러그인을 설치해야 합니다. Bash npm install --save-dev rollup-plugin-visualizer # 또는 yarn add...
아래는 Cloudflare로 네임서버 이전 → Let’s Encrypt 와일드카드 인증서 발급 → 자동 갱신까지 실무 기준으로 한 번에 따라 할 수 있는 상세 가이드야. (feat. ChatGPT) (서버는 Linux / Nginx(or Apache) 기준, 가장 많이 쓰는 certbot + DNS-01 방식으로 설명할게) 0️⃣ 전체 구조 한 번에 이해하기 DNS 제공자: Cloudflare 인증서: *Let’s Encrypt (Wildcard: `.example.c...
[NODE] 📚 PM2 모듈 사용법 - 클러스터 / 무중단 서비스
결과부터 보자면 이런 것이다. (스크롤을 올리거나 스크롤을 맨 위로 올렸을 때) (스크롤을 내렸을 때) 스크롤에 맞춰 자연스럽게 내려오고 올라오게 하고 싶었지만, 헤더를 상정하고 짜둔 여러 디자인들이 좀 충돌되기도 하고 계산하기도 귀찮아서 그냥 메인 영...
Tiptap 에디터에 파일 업로드 기능을 붙였다. 현재로는 이미지만 넣을 수 있게 해놓았다. 방법은 총 세가지다. 파일 드래그 앤 드롭을 통한 업로드 붙여넣기를 이용한 업로드 업로드 버튼을 이용한 업로드 붙여넣기는 클립보드에 있으면 무조건 아마 될 것이다. 굳 ㅋㅋㅋ 파일 업로드 시 별도의 컨테이너를 통해 요소가 생성되도록 하면 될 것 같다.  것 같다. 물론 먼저 나온거고 철학 자체가 달라서 그런거라고 하기는 하지만, Svelte에서 자동으로 해주던 것들을 직접 제어해야 하...
https://velog.io/@dy6578ekdbs/오소플-기술블로그
원하는 대로 다 추가가 되는게 너무 재미있긴 하다. editor.css 파일에다가 아래 코드를 적용했다. .editor-body pre { margin: 1em 0; padding: 1em; background: var(--bright-grey); border-radius: 4px; } .editor-body pre code { background: unset; padding: unset; border-radius: unset; } .editor-body code { background: var(-...
블로그라면 자고로 파일 업로드 기능도 있어야지... 이거 너무 재밌는 것 같다. CSS도 하나도 적용되어 있지 않아서 하나부터 열까지 다 만들어야 하는게 단점이라면 단점이지만, 그래도 재미있다. 이제 이렇게 파일도 집어넣을 수 있게 되었다. 마크다운으로는 어떻게 되려나. 마크다운으로도 잘 표시가 되긴 하는데, 사이즈 값이 지정되지는 않는 것 같다. 흠...-> 지정되게 했다. ...
https://kyuntechblog.tistory.com/39
뭔가 해보니 별것 아닌 것 같지만 별것 아닌게 아니었다. 그냥 추가하는 건데도 이렇게 어렵다니... 그래도 완성(?) 되어서 다행이다. 이렇게 굵은 글씨도 잘 적용되고,이탤릭도 잘 적용되고~밑줄은 에디터 통해서 넣어야 하지만 어쨌뜬 잘 적용된다. 흠... 그렇다. 좋은 날 오겠지 뭐.
그냥 너무 어렵다. 에디터 만드는건 아무나 하는 것이 아니었다. 그래서 그냥 팁탭을 적용시켰다. 많은 문제들이 알아서 잘 해결된 것 같다.아아.... 아아아아아아아ㅏ......
body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", BlinkMacSystemFont, -apple-system, sans-serif; }
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 이탤릭체... 넌 누구냐 마크다운 문법에서는 별 한 개로 감싸면 기울임꼴이 된다. 이렇게 그리고 별 두개로 감싸면 굵은 글씨가 된다. 이렇게 그리고 이 두개 조합도 된다. 이렇게 그런데 아무래도 형식이 비슷하다보니 적용되는 순서도 그렇고 검출하는 방식도 그렇고 참 쉽지가 않은 것 같다. 지피티나 잼민이는 AST 구조로 하라고는 하는데 뭐 어느정도는 설득력 ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 오늘부터 작성하는 내용들은 그냥 업데이트 일지라는 제목으로 할까보다. 헤딩 적용 방법을 그냥 무식하게 바꿨다. 기존에 이리저리 위치 계산하고.. 노드 뗐다 붙였다... 엄청나게 뭔가 노력을 했는데 그냥 기존에 있던 커서 탐지 및 복원 로직이 생각보다 스마트해서, 그냥 내용 바꿔치기로 하도록 했다. 방법은 간단하다. 탐지에 앞서 줄을 노멀라이즈 한다. 그 다음에 탐지를 하는데, text...
게시판에 카테고리 기능을 추가했다. 사실 UI적인 부분을 추가하는 부분이 크게 어렵지는 않았다. 자바스크립트로 창 열림/닫힘을 구분하는 게 아닌 CSS로 제어하기 얼마 전 습득했던 Tailwind CSS의 플러그인인 DaisyUI의 플로팅 버튼 컴포넌트 사용 방법을 보고 터득한 기술이다. 부모 요소에다가 :focus-within을 걸어버리면 내부 요소에 포커스가 잡혀있는 경우 해당하는 상태로 부모 요소가 지정된다는 사실! 즉, 라벨 요소에 클릭 가능한 요소인 것처럼 인식되게끔 role="button"과 tabind...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 키다운 중심 조작에서 뮤테이션옵저버로 기존에 개선한 버전은 각 줄마다 contenteditable을 부여해서 그 안에서 자유롭게 편집 및 데이터가 바인딩되어 작동되도록 했었다. 이 버전만으로도 작동하는 데에는 크게 문제는 없었지만, 문제는 키입력 시 처리해줘야 하는 내용이 너무 많다는 데 있었다. 예를 들면... 화살표 버튼으로 문장 사이를 왔다갔다 해야 하는 경우 커서 위치를 파악하...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 최대한 충돌이 일어나지 않도록 해보았다. 기존에는 좀 이상했던 것이 사실이다. 렌더링을 걸면서 내용까지 수정하려니 뭐가 이상할래도 많이 이상했겠지... 여러모로 작동이 제대로 안되는 것 같길래 아예 뜯어 고쳤다. 최대한 반응성 있는 방향으로 설계한 것이다. 가장 큰 변화는 자식 요소에 바인딩을 걸지 않았다는 것이다. 바인딩을 걸지 않으니깐 양방향 업데이트든 뭐든 충돌이 발생할...
그... 목록에서 타이틀바 위치 반영하는 방식을 수학적으로 제대로 계산했다. 뭔가 이전에 Math.max를 남용했더니 내가 원했던 위치가 아니라 좀 다르게 움직이던데 한계값을 0-100으로 하고 제대로 계산을 했더니 잘 반영이 되었다. 이제는 조회수 카운트하는 로직을 좀 계산해야 하는데... 귀찮으니깐 프리로드를 끄는 편이 나을듯. 뿌듯하도다.
mongodb의 aggregate 기능은 좀 어려운 것 같다. 쓸때마다 검색해서 써야겠다... 어떻게 하면 좋을까... 하면서 방법을 좀 생각해봤는데, 일단은 활성화된 게시판을 설정에서 가져온다. 게시판 목록을 배열로 변환하고, 랜덤 함수를 이용해 아무거나 뽑는다. 해당 테이블에서 또 aggregate의 sample 기능을 활용해 아무 게시글 하나를 뽑는다. 이렇게 하여 기능을 완성했다. 이정도면 충분한 것 같은데, 아무래도 진정한 랜덤은 아니게 된 것 같지만,,, 뭐 어쩌겠나 내 실력이 아직 그정도인 것을ㅋ...
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) keydown 이벤트와 input 이벤트 분리 기존에는 keydown 이벤트에 setTimeout을 주어 텍스트가 입력되거나 입력이 변경된 후에 대한 처리를 해주었었다. 그런데 이게 좀 불안정했다. 아직도 좀 불안정한 것 같다.. 이렇게 하면 어찌 저찌 되는 것 같다... 다시 한 번 진짜로 해결한 것 같다!!! 원래는 커서가 문장의 맨 처음 가있을 때 백스페이스를 누르면 커서가 이...
머릿속에 있는 로직을 최대한 다른 도움을 안 받고 결과물로 만들어 낼 수 있어야 하는데 아직은 그렇게 되는 단계는 아닌 것 같다. 그래서 결국 어쨌든 챗지피티를 활용해 로직을 만들어서 내 환경에 맞게 수정하는 작업을 거쳤다. 지금 내 데이터베이스 환경은 이렇다. 몽고디비 사용 중 설정을 위한 컬렉션 헤더 메뉴 아이템 설정 게시판 설정 더 추가 예정 게시판들 다른 컬렉션과 구분하기 위해서 board/(게시판path)와 같은 이름으로 만들었다. 지금 생각해보니 슬래시 말고 언더바로 하는...
지금까지 한 것들 관리자 설정에서 상단 메뉴를 추가 제가할 수 있게 했다. 게시판을 추가하고 제거할 수 있게 했다. 게시판을 추가하면 인덱스를 위한 도큐멘트가 counters 컬렉션에 생성된다. 게시판을 삭제하면 인덱스를 위해 생성했던 couters의 도큐멘트와 게시판 컬렉션을 삭제한다. 게시판에서 페이지 이동 트랜지션을 생성했다. 글 목록, 보기, 글쓰기 페이지를 디자인했다. 글쓰기의 경우 마크다운 위지윅 에디터를 목표로 작업하고 있다. 현재 헤딩이 반영되는 상태이다. 4...