평소에 공부한 내용이나 디버깅 관련된 내용들을 노션을 통해서 정리하는 것을 선호해 Notion API 와 Next.js 를 통해 블로그를 제작하였습니다.
노션 포스팅 데이터베이스에 변경 사항이 발생하는 경우 재배포를 진행해야 하는 번거로움으로 인해 ISR 를 적용하여 배포를 진행하였습니다.
접기/펼치기
├── components
│ ├── Analytics.tsx
│ ├── Search
│ │ ├── hooks
│ │ │ └── useSearch.ts
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── Theme
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── common
│ │ ├── Button
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Icon
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Image.tsx
│ │ ├── Loading
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Profile
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ └── Seo.tsx
│ ├── layout
│ │ ├── Footer
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Header
│ │ │ ├── hooks
│ │ │ │ └── useStickyHeader.ts
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Layout.tsx
│ │ ├── MainHeader
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Navigation
│ │ │ ├── index.tsx
│ │ │ ├── interface.ts
│ │ │ └── styles.ts
│ │ ├── NotFound
│ │ │ ├── index.tsx
│ │ │ └── styles.ts
│ │ ├── Section
│ │ │ ├── index.tsx
│ │ │ ├── interface.ts
│ │ │ └── styles.ts
│ │ ├── TagList
│ │ │ └── index.tsx
│ │ └── TagPageHeader
│ │ ├── index.tsx
│ │ └── styles.ts
│ └── notion
│ ├── NotionPage.tsx
│ ├── NotionPageItem
│ │ ├── Skeleton.tsx
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── NotionPageList
│ │ ├── Skeleton.tsx
│ │ ├── index.tsx
│ │ └── styles.ts
│ ├── NotionTagItem
│ │ ├── index.tsx
│ │ ├── interface.ts
│ │ └── styles.ts
│ ├── NotionTagList.tsx
│ └── NotionTagSideList
│ ├── index.tsx
│ └── styles.ts
├── config.ts
├── hooks
│ ├── useDebounce.ts
│ ├── useRefCurrent.ts
│ ├── useTheme.ts
│ └── useThrottle.ts
├── lib
│ ├── gtag.ts
│ └── notion
│ ├── config.ts
│ ├── getDatabaseInfo.ts
│ ├── page
│ │ ├── getPageItem.ts
│ │ ├── getPageProperty.ts
│ │ └── getPathPage.ts
│ ├── pages
│ │ ├── getPageItems.ts
│ │ └── getPathPages.ts
│ ├── search
│ │ └── getSearchResult.ts
│ ├── tags
│ │ ├── getPathTagPages.ts
│ │ ├── getTagItems.ts
│ │ └── getTagsWithPostCnt.ts
│ └── utils
│ ├── mapImageUrl.ts
│ └── previewImages.ts
├── pages
│ ├── 404.tsx
│ ├── [pageId]
│ │ └── index.tsx
│ ├── _app.tsx
│ ├── _document.tsx
│ ├── api
│ │ ├── revalidate
│ │ │ ├── index.ts
│ │ │ ├── revalidatePages.ts
│ │ │ ├── revalidatePosts.ts
│ │ │ └── revalidateTagPages.ts
│ │ └── search.ts
│ ├── index.tsx
│ ├── pages
│ │ └── [pageNum].tsx
│ ├── server-sitemap.xml
│ │ └── index.tsx
│ └── tags
│ ├── [tagName]
│ │ └── pages
│ │ └── [pageNum].tsx
│ └── index.tsx
├── public
├── shared
│ ├── enums
│ │ └── SwrFallbackKeys.ts
│ ├── types
│ │ ├── NavPageOptions.ts
│ │ ├── NavPageOptionsFallback.ts
│ │ ├── TagsWithCnt.ts
│ │ └── TagsWithCntFallback.ts
│ └── variable.ts
├── sitemap.config.js
├── styles
│ ├── device.ts
│ ├── global.ts
│ ├── mixin.ts
│ ├── notion.ts
│ ├── reset.ts
│ ├── theme.ts
│ └── variable.ts
├── types
│ ├── notion.d.ts
│ └── style.d.ts
├── utils
│ ├── convertPascalCase.ts
│ ├── convertUuidToPostId.ts
│ ├── formatDate.ts
│ ├── getPaginationItems.ts
│ ├── getPaginationLength.ts
│ ├── normalizeTitleKo.ts
│ └── parseDatabaseItems.ts- position fixed 가 동작하지 않는 이슈 (feat. backdrop-filter)
- Next.js 다크 모드 구현 (feat. Styled components)
- Next.js 다크 모드 구현 (feat. data attribute)
- Next.js 구글 애널리틱스 4 적용
- Next.js - ISR
- Next.js On-Demand Revalidation 관련 이슈 (feat. Vercel)
- Intersection Observer 를 활용한 Infinite Scroll Pagination 구현 (feat. Notion API)
- SWR 를 통한 데이터 fetching
Figma 에서 확인 가능합니다.