src
│
├─ assets # 이미지 파일(svg)을 컴포넌트로 사용하기 위해 모아놓은 폴더
├─ hooks # 여러 custom hook이 모여있는 폴더
├─ components # 컴포넌트를 모아놓은 폴더
│ ├─ layout # layout구성을 위한 컴포넌트가 있는 폴더
│ ├─ MainDoor # Home화면 접속시 환영하며 블로그를 소개하는 컴포넌트
│ ├─ Loading # 검색 시 로딩바를 위한 컴포넌트
│ ├─ Posts # 포스트들을 Grid 형태로 보여주는 컴포넌트
│ ├─ Tags # PostList에 태그들
│ ├─ PageNationContainer # Post에 페이지네이션을 위한 컴포넌트
│ ├─ PageNation # 페이지네이션 컴포넌트
│ ├─ PostDetail # 포스트 내용 페이지를 보여주는 상세 컴포넌트
│ ├─ MappedNotion # mapImageUrl이 override된 notionRenderer
│ ├─ TableofContents # 포스트 내용 페이지의 목록을 보여주는 컴포넌트
│ └─ PostNav # 포스트 상세화면에서 다른 포스트로 넘어가는 링크
│
├─ pages # 라우팅 별로 이동가능한 페이지
│ ├─ _app # 공통 페이지
│ ├─ about # 이력서 페이지
│ ├─ contact # 방명록 기능의 페이지
│ ├─ index # Home 화면 페이지
│ ├─ search # 검색 페이지
│ └─ works # 프로젝트 모아놓은 페이지
│
├─ stores # 리덕스 설정을 위한 slice, store가 있는 폴더
├─ styles # CSS 글로벌 스타일을 위한 폴더
└─ types # Typescript 정의 파일
- Typescript
- NextJS
- ReactJS
- Redux toolkit
- SCSS
1. Notion API
Notion을 CMS로 이용함으로서 블로그 포스트를 관리
다양한 렌더링 방식을 사용하여 최적화된 블로그를 설계했습니다
검색 시 SSR을 통해 서버에서 검색 데이터를 받아와 동적인 페이지를 만들어서 제공
동적인 변화가 필요없는 정적인 포스트 페이지들은 SSG를 통해 pre-rendering한 페이지를 제공받아 UX 향상을 꾀합니다
redux/toolkit을 이용한 flux 구조의 상태관리를 통해 CSR을 사용합니다
다양한 렌더링 방식 중, 필요한 기능에 최적화된 렌더링 방식을 적용하여 UX를 향상 했습니다
태블릿, 모바일에서도 이용할 수 있게 디자인했으며, responsive한 움직임에 따라 UI의 구성을 변경하는 효과를 적용했습니다.
블로그 UX에서 중요한 것은 관심사별로 포스트를 확인할 수 있는 경험이라고 판단하여 태그를 통해 관련있는 포스트를 손쉽게 확인할 수 있는 것을 중요시하는 UI입니다
table of contents, 검색기능 등을 사용하여 포스트 친화적인 블로그의 특성을 고려했습니다
가장 필요한 기본 컴포넌트에 테스팅 코드를 적용하여 단일 책임을 지향하는 컴포넌트를 구성하려 노력했고, 지속적인 관리가 가능합니다.
public을 통한 next/image의 정적인 이미지 파일을 사용하지 않고, svg의 경우 컴포넌트로 구성하여 css fill 속성등으로 자유롭게 수정할 수 있도록 만들었습니다. 참조
-
포스트와 프로젝트의 목록을 보여주는 항목을 공통화한 PostList 컴포넌트로 통일 시켜 재활용성 있는 컴포넌트 사용을 고민했고,
-
lib 라이브러리를 통해 서버사이드에서만 사용되는 코드를 분리하여 설계하여 클라이언트에서 불필요한 JS코드를 로드하지 않게 했습니다.
| 포스트 | 프로젝트 | 검색 기능 |
|---|---|---|
 |
 |
 |