nextjs 는 SSR 이기 때문에 서버를 관리할 수 있다. 내부 서버 에러가 발생할 경우 500 페이지를 렌더링하게 되는데 해당 페이지를 구현

• 500 에러 페이지 구현
• 500 에러 페이지 테스트
• 500 e2e 테스트

현재 서비스에는 Server Side Error 가 나올 상황이 존재하지 않음
왜냐하면 현재 서비스는 SSG 로만 구성되어 있음.
그렇기에 후에 SSR 기능이 추가될 때 해당 e2e 테스트도 추가

💡 목적

• 현재 노션을 이용해서 블로그 컨텐츠를 이용하는데 블로그에서 상태를 둬서 배포 상태인것만 배포되도록 변경하기
• 블로그 page 를 렌더링할 때 hash-id 가 url 로 가는데 타이틀로 하도록 변경하기 (또는 slug 로 표현하기)

📝 Todo

‼️ 주의 사항

• robots.txt. 적용
• sitemap 적용
• meta tag 적용
• 네이버 SEO 적용
• 구글 SEO 적용 (메타 태그)
• 구글 GA 적용

💡 목적

• 기존에는 MM/DD/YYYY 형태로 나오는데 YYYY.MM.DD 형태로 나오게 변경하기

📝 Todo

• 날짜 포맷을 YYYY.MM.DD 형태로 하기

‼️ 주의 사항

💡 목적

• 현재는 .env 를 gitignore 로 관리해서 특정 노션 페이지로 관리하는데 이를 vercel 에서 관리하도록 변경하기

📝 Todo

• .env vercel 에서 관리하도록 변경하기

‼️ 주의 사항

현재 app 파일에 모든 것이 구현되어 있는데 document 파일을 추가하여 역할에 따라 분리하자

• _document 파일 생성 및 작성

[feat] 블로그 컨텐츠 멀티 태그 기능 제공

작업을 진행하다 보니, 바로 main 에 merge 하니 이슈가 있을 때 확인하지 못하고 product 에 배포되니 문제가 발생했다.
그렇기에 gitbranch 전략 수정 겸 CI/CD 도 구분하여 동작하게 하고자 한다.

• gitbranch 전략 수정
• develop, production CI/CD 수정

• 선택한 태그를 확인할 수 있다.
  • 기본적으로 전체보기 선택되어져 있다.
  • 태그를 선택하면 해당 태그가 선택됐음을 UI 적으로 표현한다.
• 태그를 선택하면 관련 태그를 갖는 게시물만 보이도록 한다.

notion-client ESM 이슈가 있어 테스트 코드를 작성하지 못했는데 이번에 테스트 코드를 작성하고자 한다.

• notion-client 테스트 코드 작성
• @notionhq/client 테스트 코드 작성
• api 테스트 코드 작성

• 노션 API 를 이용하여 게시물들을 볼 수 있다.
• 개발하면서 UI 변경 (포스팅 생성 시간 UI 변경)
• 테스트 코드 작성

블로그의 색상을 다크모드만 지원하고자 한다.

• 다크모드 지원

외부 라이브러리인 notion-renderer 를 이용하여 렌더링하는데 이미지 파일이 제대로 렌더링되지 않는 이슈 존재.

• 이미지 렌더링 이슈 해결

에러 확인

참고

• NotionX/react-notion-x#211 (이슈 내용)
• https://github.com/transitive-bullshit/nextjs-notion-starter-kit/blob/main/lib/map-image-url.ts (해결 방법)

github 리드미 작성

• 작성 후 확인한 다음에 바로 main 에 merge 하기

• 풀리퀘, 이슈 템플릿 추가하기

해당 작업 진행하면서 브랜치 전략 변경
-> 생성된 이슈(티켓) 넘버로 브랜치 생성하기
feat/[issue-number]-[ticket-task-keyword]

배포 환경 구축하기

• test 커버리지 올리기 (api 테스트가 안됨.. 그리고 page-component 에서 테스트 단위.. 궁금)
• env 구분 하기 (dev 및 prod)
• vercel 을 활용하여 배포하기 (비용 및 운영 측면에서 vercel 이 좋을듯)
• 배포하기 위한 에러 수정

• 방능형 적용 (모바일, 태블릿, 데스크탑)
  • 모바일
  • 태블릿, 데스크탑 은 같은 스타일
• 모바일 시 햄버거 메뉴로 기능 구현

• PR을 작성하기 위한 템플릿 추가하기
• github CODEOWNERS 추가하기

• 해당 사이트에 등록된 블로그의 태그 리스트를 확인할 수 있다.
• 데이터는 정적(하드코딩)인 데이터로 (우선) 구현된다.

• 게시물 있는 경우, 블로그의 게시물들을 확인할 수 있다.
• 게시물이 없는 경우, "게실물이 없다는 문구" 를 확인할 수 있다.
• 데이터는 정적(하드코딩)인 데이터로 (우선) 구현된다.

기존에 sitemap 생성하였는데 어느 순간 보니 해당 파일이 존재하지 않았다.
해당 부분 테스트를 어떻게 해야할지 몰라 테스트 코드를 작성하지 않았는데 ㅠㅠ 이런 이유로 테스트 코드가 있어야하는거 같다.

• sitemap.xml 생성 되도록 수정
• 관련 테스트 코드 작성 (컴포넌트 테스트는 아직 잘 모르겠고, cypress 로 e2e 테스트 할까 고민 중)

클라이언트 에러 페이지인 404 페이지 구현

• 404 페이지 구현
• 404 페이지 테스트 추가
• 404 e2e 테스트 추가

vercel/next.js#34249

💡 목적

• 현재는 블로그 포스팅 기능만 있음, 하지만 연관되어 있는 여러 컨텐츠를 관리하는 "시리즈" 기능 구현하기
• 벨로그의 시리즈와 유사

📝 Todo

‼️ 주의 사항

💡 목적

작업하면서 완료된 줄 알고 pr 날리고 merge 했는데 자꾸 이슈가 있어서 해당 부분 체크하는 ci 부분 스크립트 필요하다고 생각

📝 Todo

‼️ 주의 사항

• 게시물 상세 페이지에서 반응형일때 UI 가 깨짐.
  

• 게시물 상세 페이지 모바일 환경시 UI 깨짐 ㅜㅅ정

• next.js
• typescript
• emotion.js
• test 환경 구성
  jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

• 프로젝트 구조를 잘못 설정하였다.
  그래서 프로젝트 root 에는 설정 파일들을 src 안에 소스 코드를 관리하는 구조로 변경
• 프로젝트 root 에는 설정 파일들을 src 안에 소스 코드를 관리하는 구조로 변경

cypress 를 이용하여 e2e 테스트를 작성하고자 한다.
현재 구현된 페이지 까지만 e2e 테스트 작성하고자 한다.

• cypress 좋은 방법 학습 후 테스트 코드 작성하기
• E2E 테스트 작성
  • Home (root 화면) 테스트
  • 게시물 상세 화면 테스트
• e2e 테스트 작성 후 ci/cid 환경 구축
  • vercel 을 이용하여 배포하는데 vercel 배포 전에 테스팅 및 type check 수행할지 등!

favicon 및 로고 변경

• favicon 추가하기
• 로고 변경하기 ??

reference

• https://webdir.tistory.com/337

💡 목적

• NextJS 13 app 폴더로 마이그레이션

📝 Todo

‼️ 주의 사항

• 14 버전도 나오긴 했는데 이부분은 고민해보기

💡 목적

• 오랜만에 관리해서 워닝 문구가 많아 해당 작업을 수정하는 작업

📝 Todo

‼️ 주의 사항

• nest.js 또는 express.js 로 백엔드 환경 구축 예정
• 프레임워크는 미정, 간단한 home 요청 시 hello world 반환하는 기능까지

기본 브라우저의 스크롤바는 스타일이 좋지 않아, 스크롤바에 스타일을 적용

• 스크롤바 스타일 적용

• 해당 사이트에서 전역적으로 사용하는 Header 기능 구현
• 로고 및 여러 메뉴들로 구성되어 있다.
• 메뉴는 블로그, 시리즈 로 구성되어 있다.

현재 any 로 임시방편 한 곳이 있는데 type 을 좀 더 강력하게 설정하도록 리팩토링

• any 타입 없애기
• 타입 관리 하기

현 프로젝트의 완성도를 위해 구현되지 않은 기능 제거

• 메뉴의 "시리즈", "나" 제거

현재 구현된 기능이 홈(등록된 게시물들 확인) 과 post 디테일(등록된 포스트 확인) 만 구현되어 있어 해당 기능들만 처리 예정

• post 디테일 화면에서 로고 또는 블로그 메뉴를 클릭하면 / 로 이동한다.
• header 에 기능 구현되지 않은 메뉴(시리즈, 나) 는 hover 시 pointer 기능 제거. (UX 적으로 더 나아보임)

개요

• 사용하지 않는 "시리즈", "나" 메뉴 제거
• 태그 UI 개선

💡 목적

• 블로그 리스트는 ssg 방식으로 렌더링하는데 isr 방식으로 변경하기

📝 Todo

• "/" 페이지의 ssg 방식 isr 방식으로 변경하기

‼️ 주의 사항

• 노션 에 등록된 포스팅의 태그들을 확인할 수 있다.
• 노션 api 결정하기
  • notion-client
  • @notionhq/client
  • 둘 다 사용하거나 하나만 사용하기
• 노션 api 와 연결하기 위한 api 키를 env 환경으로 관리하기

현재 client 폴더 안에 FE 관련 코드가 있는데 client 폴더 없애고 FE 관련 코드를 root 로 빼기

• client 폴더 제거 후 폴더 1 depth 상위로 올리기
• styles 폴더를 root 경로에 관리하고 있는데 이를 src 하위가 나은지 검색해보고 좋은 방안으로 적용하기
  • src 에서 관리하기로 결정, 해당 방법이 프로젝트 구조가 깔끔하다고 판단
• apis 폴더 어떻게 관리할지 고민 및 적용하기
  • API Routes 방식 사용하는 걸로 결정
  • 사용자 액션에 따라 데이터가 변하는게 아닌, ServerSide 방식으로 렌더링된 데이터로만 운영되기 때문,
  • 또한, API Routes 방식을 사용할 경우 코드가 서버와 클라이언트(브라우저) 로 분리되기 때문에 더 코드 최적화 가능)

사용자는 root 에 있는 게시물 중에 특정 게시물을 클릭하면 해당 게시물의 컨텐츠를 확인할 수 있다.

• 공통 레이아웃 구조 잡기 (layouts 폴더 생성 및 base 레이아웃 설정)
• Header 컴포넌트의 메뉴 작성 및 hover 시 알림창 나오게 하기( 개발중입니다.. 등) (임시 기능)
  • 블로그 ; 현재 페이지입니다.
  • 시리즈, 나 : 개발중입니다.
• 특정 게시물 렌더 구현
  • react-notion-x 및 notion-client 라이브러리를 통해 구현