프로젝트의 테스트 코드를 작성하면서, 모듈을 모의할 때 mock()을 사용하고 있었다. 최근 이라는 책을 보면서 테스트 코드 작성법에 대해 공부했는데, 여기서도 모의하는 것에 대해 mock, spyOn, fn만 나와있어서 이 셋을 주로 사용한다고 생각했다. 그런데 코드 리뷰 중, 팀원의 코드에서 doMock()이라는 메서드를 보게 되었다. 팀원은 doMock을 사용해서 나와는 다르게 모듈을 모의하고 있었다... 그래서 mock과 doMock의 차이가 무엇인지 알아보았다. 가장 큰 차이점은 호이스팅의 여부이다. mock은 호이스팅되고, doMock은 호이스팅되지 않는다. jest는 파일 내의 mock() 호출을 찾아 다른 import문보다 먼저 실행한다. 따라서 factory 외부에서 정의된 변수를 fa..
프로젝트의 서비스 운영을 앞두고, 운영 중 오류에 대응하기 위해 모니터링 툴로 Sentry를 도입하기로 했다. 이 과정에서 ErrorBoundary를 적용하여 오류 발생 시 UX, DX를 개선하는 작업을 했다. Sentry와 ErrorBoundary를 적용한 과정을 정리해 보려고 한다. Sentry 도입 Sentry 초기화(libs/sentry.ts)import * as Sentry from '@sentry/react';import { useEffect } from 'react';import { useLocation, useNavigationType, createRoutesFromChildren, matchRoutes,} from 'react-router-dom';import { version..
프로젝트 작업을 하던 도중, 게시글의 댓글 목록에 Pagination을 적용하게 되었다. 공통 컴포넌트로 만들었던 Pagination 컴포넌트를 사용했는데 이 컴포넌트는 페이지 이동을 할 때마다 스크롤 위치를 최상단으로 이동하도록 동작하고 있었다. 그런데 이 동작은 Pagination을 게시글 목록 조회 같은 곳에서 사용하면 자연스럽지만, 게시글 영역의 아래에 위치하는 댓글 목록 조회에서 사용하니 조금 불편하다는 생각이 들었다. 특히 모바일 같은 경우에는 여러 페이지가 있을 때 다음 페이지 이동을 하려면 스크롤을 꽤 많이 내려야 했다. 또한 이는 게시글 본문 내용이 길어지면 더 심해질 것이다. 그래서 페이지 이동 시, '댓글 목록 최상단으로 스크롤 위치를 이동하면 어떨까?' 하는 생각을 했다. 게시글 ..
위와 같은 페이지에 리스트 데이터가 렌더링 되기 전까지 스켈레톤을 보여주려고 한다. Next.js에서도 React와 마찬가지로 Suspense를 사용하여 Skeleton UI를 적용할 수 있다. Skeleton 컴포넌트 구현하기(app/components/Skeleton.tsx)import styles from '@/styles/skeleton.module.scss'interface SkeletonProps { w: number h: number radius?: number wUnit?: string style?: React.CSSProperties}export default function Skeleton({ w, h, wUnit = 'px', radius = 8, style,..
Next.js로 만든 프로젝트에서 SEO 최적화를 작업해 보고 구글과 네이버에 사이트를 등록해 보았다. 1. Metadata 설정하기Next.js 공식 문서를 참고하여 Metadata를 설정한다.검색 결과에 포함되지 않길 원하거나, 페이지 내 포함된 다른 링크가 검색 결과에 포함되지 않게 하려면해당 페이지 내 metadata.robots의 index, follow 옵션을 수정한다. 기본은 index, follow 모두 true이다. 필요에 따라 Caronical Tag 등을 추가한다. - Open Graph 설정 Next.js에서는 Open Graph를 설정하지 않아도 기본적으로 title과 image를 설정해 준다. title의 경우 페이지의 title과 동일하게 설정되고 이미지는 페이지 내에 이미..
프로젝트에서 위와 같이 한 페이지 당 50개의 책 정보를 담고 있는 도서 목록 조회를 구현하고 있었다. 그런데 페이지 당 50개가 있다보니 PC의 경우는 괜찮았지만 모바일 환경에서는 다시 위로 올라가려면 많은 스크롤을 해야 했다. 여러 페이지에서 목록 조회가 이루어지고 있었기에 같은 문제가 여러 곳에서 존재할 수 있었다. 그래서 여러 모바일 사이트 및 앱에 존재하는 스크롤의 위치가 어느 정도 밑으로 내려가면 클릭 시 최상단으로 이동할 수 있는 버튼을 제공하기로 했다. 간단하게 버튼 스타일링을 하고,.scroll-btn { width: 50px; height: 50px; border-radius: 50%; $bottom: calc(env(safe-area-inset-bottom) + 15px); ..
인증이 필요한 API 요청엔 헤더에 토큰을 담아서 보내야 한다. 그런데 기존 로컬 스토리지에 보관했던 토큰을 서버 컴포넌트에서는 사용할 수 없는 문제가 있었다. 서버 컴포넌트에서는 로컬 스토리지, 세션 스토리지와 같은 브라우저 저장소에 접근할 수 없기 때문이다. 서버 컴포넌트에서는 `cookies` 함수를 이용하여 쿠키에 접근할 수 있었다. (단, 쿠키의 get, has와 같은 메서드는 서버 컴포넌트에서 사용할 수 있지만 set 메서드는 오직 Server Action과 Route Handler에서만 사용할 수 있다. 이는 HTTP가 스트리밍이 시작한 후에는 쿠키를 설정할 수 없게 하기 때문이다.) 서버 컴포넌트와 클라이언트 컴포넌트 모두에서 토큰을 사용하려면 서버 컴포넌트에서는 쿠키에서, 클라이언트 컴..
Redux 외에도 사람들이 많이 사용하는 상태 관리 라이브러리를 사용해보고 싶어서 Zustand 공식 문서를 읽어보고 사용해 봤다. Recoil과 Zustand 중에 고민했는데 Recoil은 페이스북에서 손을 놓은 것인지... 마지막 업데이트로부터 시간이 많이 지나 여러 사람들이 다른 라이브러리로 마이그레이션 하는 것을 보고 Zustand를 선택했다. 'Zustand'는 독일어로 '상태'라는 뜻을 가진다. 공식 페이지에서는 Zustand를 작고, 빠르고, 확장 가능한 기본적인 상태 관리 솔루션이라고 소개하고 있다. Zustand는 hooks를 기반으로 하는 사용하기 쉬운 API를 제공한다. 보일러플레이트 코드가 많지 않고 단순화된 Flux 원칙을 바탕으로 한다. 설치npm i zustand ..
Next.js는 데이터 캐싱을 지원한다. Next.js의 'fetch'는 기존 Web 'fetch' API를 확장하여 구현한 것으로 기본적으로 응답 데이터를 캐시한다. 이때 캐시된 데이터는 Data Cache에 저장된다. fetch 함수의 두 번째 인자로 'cache' 또는 'revalidate' 속성을 추가하면 데이터 캐시 옵션을 바꿀 수 있다.또는 route segement config를 설정하여 특정 route segment에 존재하는 모든 'fetch'에 대한 캐시 옵션을 설정할 수 있다. Next.js는 fetch 데이터뿐만 아니라 라우트도 캐싱한다. Full Route Cache(서버)와 Router Cache(클라이언트)에서 캐싱된다. Full Route Cache는 정적 렌더링 된 라..
