Skip to content
BranchesTags

Repository files navigation

zinnli.dev

배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.

프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.

주요 내용

  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록

기술 스택

  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus

프로젝트 구조

src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입

로컬 실행

패키지 매니저는 pnpm을 기준으로 사용합니다.

pnpm install
pnpm dev

개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.

사용 가능한 스크립트

pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행

글 작성 방법

글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.

예시:

src/markdown/TroubleShooting/20260520.mdx

각 MDX 파일 상단에는 다음 front matter가 필요합니다.

---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---

파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.

배포

CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.

About

zinnli.dev

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - zinnli/zinnli.github.io: zinnli.dev · GitHub
Skip to content
BranchesTags
Repository files navigation
zinnli.dev
배우고, 기록하고, 나누기 위한 개인 기술 블로그입니다.
프론트엔드 개발을 하며 공부한 내용, 문제를 해결한 과정, 회고를 MDX 기반 글로 정리합니다. 단순한 메모 저장소보다는 시간이 지나도 다시 읽을 수 있는 개발 로그를 목표로 운영하고 있습니다.
주요 내용
  • Study: 공식 문서, 기술 개념, 라이브러리 사용법 정리
  • TroubleShooting: 개발 중 마주친 문제와 해결 과정 기록
  • Retrospect: 프로젝트나 학습 과정에 대한 회고
  • WIL: 주간 학습과 작업 기록
기술 스택
  • Next.js App Router
  • TypeScript
  • MDX
  • Tailwind CSS
  • next-mdx-remote
  • gray-matter
  • rehype-pretty-code
  • giscus
프로젝트 구조
src
├── app # 라우트, 메타데이터, sitemap, robots
├── assets # 아이콘 에셋
├── components # 헤더, 푸터, 목록, 게시글, 댓글 컴포넌트
├── lib # MDX 파일 파싱 및 게시글 목록 생성
├── markdown # 블로그 글 원본
│ ├── Retrospect
│ ├── Study
│ ├── TroubleShooting
│ └── WIL
├── styles # 폰트 스타일
└── types # MDX 관련 타입
로컬 실행
패키지 매니저는 pnpm을 기준으로 사용합니다.
pnpm install
pnpm dev
개발 서버가 실행되면 브라우저에서 http://localhost:3000으로 접속합니다.
사용 가능한 스크립트
pnpm dev # 개발 서버 실행
pnpm build # 프로덕션 빌드
pnpm start # 빌드 결과 실행
pnpm lint # 린트 실행
글 작성 방법
글은 src/markdown/{category}/{slug}.mdx 형식으로 작성합니다.
예시:
src/markdown/TroubleShooting/20260520.mdx
각 MDX 파일 상단에는 다음 front matter가 필요합니다.
---title: 글 제목date: 2026-05-20desc: 글 목록과 메타데이터에 노출될 설명---
파일이 추가되면 src/lib/mdx.ts에서 카테고리와 게시글 목록을 읽어 정렬하고, 각 글 상세 페이지의 메타데이터와 Open Graph 정보도 함께 생성합니다.
배포
CI 환경에서는 next.config.mjs 설정에 따라 정적 export가 활성화되고, GitHub Pages 주소인 https://zinnli.github.io를 asset prefix로 사용합니다.
About
zinnli.dev
Resources
Readme
Activity
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Used by
Contributors
Languages