khj0426 / hj_devlog

Next js 13으로 만든 개발 블로그

✅ Latest Blog Post

2024/06/15 - Next js app Route의 캐싱-DataCache
2024/06/12 - date-fns로 알잘딱 달력 컴포넌트 만들기
2024/06/08 - 서버컴포넌트에서의 CSS
2024/06/05 - 반오십의 반절
2024/05/28 - tanstackQuery딥다이브-1
2024/05/24 - recoil로 URL에 State저장하기
2024/05/17 - 블로그 글에 OpenGraph이미지 커스텀하기
2024/05/11 - Sentry를 잘 쓰기 위한 고민
2024/05/05 - svg+xml but dangerouslyAllowSVG is disabled에러
2024/04/28 - Next js app Route의 캐싱-RouterCache
2024/04/27 - Next js app Route의 캐싱-RequestMemorization

hj_devlog's Issues

스토리북 웹 접근성 테스트 CI단에서 검사하는 기능

• https://storybook.js.org/tutorials/ui-testing-handbook/react/ko/accessibility-testing/
• https://ui-log.github.io/docs/Tech/2024-04-07-Accessibilitytests/

다크모드 시 글 추천 모달의 색상이 흰색이어서 화면에 나오지 않은 문제

다크모드 시 글 추천 모달의 글자 색이 바뀌어야 합니다.

백오피스 레이아웃 작성

백오피스의 평균 참여시간 그래프에서 recharts의 LineChart를 커스텀한다.

문제 : 너무 많은 그래프의 정보 표시 시 글자가 깨지는 문제가 존재함

[문제점] 정적 이미지 파일 개수가 많아질 때 관리의 어려움이 존재한다.

• 기존 파일 기반에서 이미지를 가져오는 방식은 한계가 존재함
• 이미지가 많아질수록 관리하기 힘들어짐. 이미지를 위한 서버를 만들 필요가 있음!!!

BigQuery API를 연결해 신규 사용자 수, 평균 참여 시간, 인기 있는 페이지의 정보를 매일 이메일로 수신한다.

https://cloud.google.com/bigquery/docs/reference/libraries?hl=ko#client-libraries-usage-nodejs

Plaiceholder라이브러리 esm모듈만 지원 -> 블러 이미지로 바꾸는 cjs모듈 형식의 라이브러리가 존재하는지 찾는다.

esm모듈의 .mjs로 next config을 수정하면 서버 액션이 작동하지 않고 빌드 에러가 발생
(mjs형식은 아직 서버 액션이 적용 안되는 듯 하다..)

vercel/next.js#62569 (comment)

next config을 .mjs로 바꾸면 esm모듈형식이고 트리쉐이킹이 적용되어서 모든 파일의 빌드 용량이 줄어드는 장점이 있음
그러나 당장 .mjs을 쓰면 vercel 배포 환경에서 에러가 발생한다.

일단 plaiceholder라이브러리를 안쓰고 config파일을 다시 .mjs에서 돌려놨는데 esm + cjs모듈 시스템을 지원하는 이미지 블러 처리 라이브러리를 찾아봐야 한다!

이력서 페이지에 대해 모바일 반응형을 구현한다.

현재 모바일버전에서 들어가면 깨지는 문제

랜덤 글 추천 모달이 여러 번 등장하는 이슈

• 모바일에서 랜덤 글 추천 모달이 여러번 등장하는 이슈
• 쿠키나 다른 스토리지를 이용해 관리하는 방식의 도입 필요

AWS로 배포 환경 이전 작업

[기능추기] 노션 api를 이용해 TIL 페이지 긁어오는 기능 추가

• 새 페이지 안에서 긁어온 노션 api 데이터를 뿌려줌
• 페이지는 노션에서 추가되고 제거될때마다 다시 그려질 필요가 있음.
• api호출 실패시 경고창을 올리고 홈페이지로 리다이렉션하기

포스트의 경우 동적 OG 이미지 삽입 시 배경으로 이미 있는 이미지를 넣는 작업

• 이미 있는 이미지를 sharp로 리사이징, 크기 변환 후 backgroundImage에 넣어줘야 함
• 이미지 CDN 서버 알아보기

모든 블로그 글에 대해 조회 수 기능을 추가한다.

• 조회 수 기능 추가

어느 시점에 조회를 판단할 것인가.

firsbase의 logEvent메소드로 이벤트 로깅을 하고 firebase DB의 조회수 필드를 업데이트한다.
특정 글의 조회를 해야 하므로 동적 라우팅 경로에 진입했을 시 판단한다.

• middleware로 제어하는 방법
• useEffect로 마운트 시 제어하는 방법

두 방법의 장,단점 비교해서 나은 방법으로 구현하기

//logEvent 예시
import { getAnalytics, logEvent } from "firebase/analytics";

const analytics = getAnalytics();
logEvent(analytics, 'select_content', {
  content_type: 'image',
  content_id: 'P12453'
});

[ERROR]- ENOENT: no such file or directory, open '/var/task/posts/recoil을 이용해 모달을 관리해보자.md'

파일시스템에서 md파일을 읽을 수 없는 경우 404 페이지로 리다이렉트 필요

[ERROR]-HierarchyRequestError e(chunks/bf6a786c) Escalating Level: Error Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

사용자가 하나의 세션동안 본 페이지의 수 현 지표

한국 기준 세션당 조회 수는 1.65 (2024.03.25~2024.06.02기준)

[문제점] 처음 페이지 로드 후 다크모드로 전활될떄, 버튼의 전환의 시간이 600ms가 걸리는 문제가 존재한다.

문제점

다크모드로 전환될때 버튼을 누른 시점은 2000밀리초가 지난 후

그러나 다크모드로 전환되고 버튼의 이미지가 정상적으로 바뀐 시점은 2600밀리초 시점

원인

lightmode,darkmode의 이미지 중 단 하나의 이미지만 불러오는 것을 확인할 수 있었다!

아래의 이미지만 불러오고, 버튼을 누를떄 추가적인 이미지가 불러와지는 모습도 확인 할 수 있었다!

이 과정에서 600ms가 소요된다!

정적 md 파일, 이미지 파일 저장하고 조회하기 위한 데이터베이스를 선택한다.

• 선택 이유는 명확히!!하기

[배포환경] 배포 시 깃헙 액션으로 lighthouse 워크플로우 구축하기

현재 로컬에서만 확인가능한데, 배포환경에서도 동작하게 만들기

[기능추가] 블로그 글 별로 동적으로 openGraph추가하기

• 동적으로 메타태그 만들어서 반환하기

[Error]- An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details.

• 관련해서 해당 에러가 왜 발생하는지 찾아보기

[ERROR] 세로로 긴 레이아웃 일 때, 깨지는 문제 발생

• 세로로 긴 레이아웃 대응하기 (크로미움, firefox)

2024:06:11부터의 참여시간 측정하기 (2달)

스토리북에서 모달 트랜지션의 예시가 동작하지 않는다.

[문제점] lighthouse CI가 로컬과는 다르게 빌드 시 에러가 발생하는 문제가 발생한다.

• npm install -> npm ci 로 변경 (실패)
• sharp 패키지의 의존성 문제인지...확인 필요

[ERROR]- 새로고침 시 댓글 입력 부분과 TOC의 활성이 안되는 문제