개발
Vite 빌드 시 파일 크기 통계 출력해주는 플러그인
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) 플러그인을 불러온 뒤 ...
Cloudflare로 네임서버 옮기고 인증서 발급받기 (feat. ChatGPT)
아래는 Cloudflare로 네임서버 이전 → Let’s Encrypt 와일드카드 인증서 발급 → 자동 갱신까지 실무 기준으로 한 번에 따라 할 수 있는 상세 가이드야. (feat. ChatGPT) (서버는 Linux / Nginx(or Apache) 기준, 가장 많이 쓰는 certbot + DNS-01 방식으로 설명할게) 0️⃣ 전체 구조 한 번에 이해하기 DNS 제공자: Cloudflare 인증서: Let’s Encrypt (Wildcard: *.example.com) 검증 방식: DNS-01 자동화: Cloudflare API + certbot cron/systemd 왜 DNS-01이냐면: 와일드카드*`...
pm2로 node 서버 운용 관리하기
[NODE] 📚 PM2 모듈 사용법 - 클러스터 / 무중단 서비스
스크롤 시 헤더를 숨기고 보이는 동작을 추가했다.
결과부터 보자면 이런 것이다. (스크롤을 올리거나 스크롤을 맨 위로 올렸을 때) (스크롤을 내렸을 때) 스크롤에 맞춰 자연스럽게 내려오고 올라오게 하고 싶었지만, 헤더를 상정하고 짜둔 여러 디자인들이 좀 충돌되기도 하고 계산하기도 귀찮아서 그냥 메인 영역 부분에 transform: translateY(-80px); 를 넣어주고 헤더는 아마 top으로 했을거임. 암튼 그렇게 해서 적용되도록 했다. body에 클래스가 붙거나 ...
에디터에 파일 업로드 기능을 붙였다.
Tiptap 에디터에 파일 업로드 기능을 붙였다. 현재로는 이미지만 넣을 수 있게 해놓았다. 방법은 총 세가지다. 파일 드래그 앤 드롭을 통한 업로드 붙여넣기를 이용한 업로드 업로드 버튼을 이용한 업로드 붙여넣기는 클립보드에 있으면 무조건 아마 될 것이다. 굳 ㅋㅋㅋ 파일 업로드 시 별도의 컨테이너를 통해 요소가 생성되도록 하면 될 것 같다.
코딩애플 리액트 강의 수강 신청함
https://codingapple.com/course/react-basic/ 사실 이 블로그는 SvelteKit으로 만들었다. 야매로 하긴 했지만 그래도 어느정도 기초적인 JS 지식은 생겼다고 생각했다. 하지만 React 이건 Svelte랑 다르게 너무 불편하고 미개한(?) 것 같다. 물론 먼저 나온거고 철학 자체가 달라서 그런거라고 하기는 하지만, Svelte에서 자동으로 해주던 것들을 직접 제어해야 하는 부분이 많다 보니 오히려 놓치는 것들이 많이 생기는 것 같다. 그래서 그냥 강의 하나 수강해보기로 했다. 이참에 기초도 더 다지고. 가격도 막 비싼 편에 속하지도 않으니까. ...
불필요한 리렌더링을 줄여 성능을 개선해보자 (Memo, useCallback)
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(--bright-grey); padding: 0.5em; border-radius: 4px; } 굳 잘 적용되쥬??ㅋㅋ
파일 업로드까지 가능하게 했다.
블로그라면 자고로 파일 업로드 기능도 있어야지... 이거 너무 재밌는 것 같다. CSS도 하나도 적용되어 있지 않아서 하나부터 열까지 다 만들어야 하는게 단점이라면 단점이지만, 그래도 재미있다. 이제 이렇게 파일도 집어넣을 수 있게 되었다. 마크다운으로는 어떻게 되려나. 마크다운으로도 잘 표시가 되긴 하는데, 사이즈 값이 지정되지는 않는 것 같다. 흠...-> 지정되게 했다. markedjs의 tokenizer 에 대해 공부하는 시간이 되었다
Oracle Cloud 무료티어 관련 내용
https://kyuntechblog.tistory.com/39