React.memo를 활용하여 이전에 렌더링한 결과를 메모이징하고, 이후 동일한 props로 렌더링 되는 경우 재사용하여 렌더링을 최적화하였습니다.- 또한, react-query의 기본 옵션인
refetchOnWindowFocus를 해제하여 브라우저 클릭 시 다시 렌더링되는 현상을 해결하였습니다. - 기존 서비스(좌), 리팩토링 후 서비스(우)
| 기존서비스 | 리팩토링 후 서비스 |
|---|---|
- 서버로부터 HTML을 받아온 이후에, 데이터를 동기적으로 가져오는 기존의 방식(CSR)을 개선하였습니다.
- 서버에서 먼저 데이터를 불러와 HTML을 생성하고, 이를 클라이언트에 전달하는 서버 사이드 렌더링(SSR) 방식을 사용합니다.
- 홈 화면과 프로필 페이지 같은 페이지가 자주 변경되지 않는 부분에 대해서는, 클라이언트에서 데이터를 받아오는 것보다 서버에서 미리 데이터를 받아오는 방식이 더 적합하다고 판단하였습니다.
- 기존에는 localStorage에 Access Token과 Refresh Token을 저장하는 방식을 사용했으나, 이 방식은 XXR 공격에 대해 매우 취약하다는 결정적인 단점이 있었습니다.
- 이를 보완하기 위해, Access Token과 Refresh Token을 http only Cookie에 저장하도록 방식을 개선하였습니다.
- 이러한 고민의 흔적
| 기존서비스 | 리팩토링 후 서비스 |
|---|---|
- px 단위를 rem으로 변경하고,
휴대폰 가로 사이즈에 맞게 화면을 보여주기 위해 반응형 디자인을 구현하였습니다.
| 기존서비스 | 리팩토링 후 서비스 |
|---|---|
| 기존서비스 | 리팩토링 후 서비스 |
|---|---|
RPReplay_Final1686795768.mp4 |
RPReplay_Final1686795824.mp4 |
- Language : Typescript
- Framework : Next.js
- Package Manager : yarn-berry
- State Management : React Query, Redux Toolkit
- Styling : TailwindCSS, tailwind-styled-components, HeadlessUI, Swiper
- Forms : React Hook Form
- Formatter : ESLint, Prettier
- Library : axios, sockJS, momentJS
🧿 axios instance로 api 요청 전후 및 error 핸들링
🐽 Intersection Observer API와 react-query 사용하여 무한스크롤 구현
├── .yarn
├── .storybook #
├── public #
├── src #
├── @types #
├── apis #
├── components #
├── common #
├── auction #
├── auth #
└── ... #
├── features #
├── hooks #
├── pages #
├── stories #
├── styles #
├── utils #
├── README.md #
└── ...
Api 요청과 관련한 함수들 입니다.
.
├── apis
│ ├── _axios
│ └── instance.ts # api instance를 만들어서 사용합니다.
│ ├── admin # api class를 만들고 비동기 함수들을 작성합니다.
│ ├── artwork
│ ├── aution
└── ...
공통 컴포넌트와 페이지 단위로 필요한 컴포넌트로 분리하여 관리합니다.
.
├── ...
├── components
│ ├── common
│ ├── Button
│ ├── Layout
│ ├── Input
│ ├── Modal
│ └── ...
│ ├── auction
│ ├── chat
│ ├── exhibition
│ └── ...
└── ...
useQuery, useMutation으로 mapping한 query, mutation hook들과 개별 hook들을 작성합니다.
.
├── ...
├── hooks
│ ├── mutations
│ ├── queries
│ ├── useCountDown.ts
│ ├── useInterval.ts
│ └── ...
└── ...