르탄이의 아카이브

프로젝트-소개 📜 프로젝트 소개

프로젝트 계기

내일배움캠프를 수강하는 과정에서 불편하게 느꼈던 강의자료들이 흩어져 있다는 점과 원하는 내용을 찾으려면 페이지를 한번씩 클릭해서 내용을 찾아야되는 불편함을 없애고자 프로젝트를 진행하게됨.

프로젝트 설명

내일배움캠프 수강생들을 위한 학습 자료 관리 서비스를 제공. 유저 리서치를 바탕으로 문제 도출에 이어 페인포인트를 분석하고 그에 맞는 솔루션을 마련.

프로젝트 기간

전체 기간: 2024.07 ~ 2024.12

아키텍쳐 🏗 아키텍쳐

기술스택 🛠️ 기술스택

Frontend

Typescript, Next.js, Next-Auth, React hook form, Zod, Tailwind CSS, Tanstack-Query, NotionAPI, React-Notion-x

Backend

JAVA, Spring, JPA, Mysql, NotionAPI

프로젝트 주요 기여 내용

인증 및 권한 관리 구현

1. backoffice 및 user페이지 login 구현

• 백엔드에서 API 요청마다 accessToken을 확인하고, 만료된 토큰은 에러 반환
• 401 오류가 발생하면 axios interceptor가 이를 감지하여 refreshToken으로 accessToken을 갱신
• 토큰 갱신 후, auth session 업데이트 후 API 요청 재시도

2. 회원가입

• react-hook-form과 zod를 사용하여 유효성 검사 진행하고, submit 처리를 효율적으로 구현

게시물 관리

1. 게시물 등록 기능 구현

• Notion API를 사용해 지정된 notion pageId의 블록 데이터를 추출
• notion-to-md 라이브러리로 추출된 데이터를 Markdown 형식 문자열로 변환
• 변환된 문자열에서 불필요한 형식, 이미지, 영상 링크 등을 제거하고 순수 텍스트만 추출
• 추출된 텍스트 데이터를 데이터베이스에 저장하여 검색 기능에 활용
• 작성된 데이터를 토대로 미리보기 구현

트러블 슈팅

Notion 데이터 요 속도 개선

발생 문제

• 아카이브 페이지에서 Notion 데이터를 검색하려고 게시물을 등록할 때, 블록 내 블록까지 호출해야 해서 등록 속도가 1~3분으로 느림

해결 방법

• notion page 내에 블록을 호출하는게 아닌 재귀함수로 모든 하위 블록의 주로를 불러오고 Promise.all로 동시에 블록들의 text를 추출하게 변경 후 1분-3분에서 10-20초로 단축

Server Component에서 Auth Session 업데이트 불가능 문제 해결

발생 문제

• 게시물 조회 API는 서버 컴포넌트에서 호출해 갱신된 액세스 토큰이 auth session을 업데이트를 할 수 없어 세션 인증 오류 발

해결 방법

• server Component에서 try~catch를 활용해 401 error일때 custom Error Component를 호출해 client side에서 refresh token 갱신 후 refresh로 해결