Atties - Frontend

Links

Ver 1.0 Github

Ver 2.0 서비스 링크

Atties Ver.2.0 리팩토링 및 성능 개선

1. 렌더링 최적화

• React.memo를 활용하여 이전에 렌더링한 결과를 메모이징하고, 이후 동일한 props로 렌더링 되는 경우 재사용하여 렌더링을 최적화하였습니다.
• 또한, react-query의 기본 옵션인 refetchOnWindowFocus를 해제하여 브라우저 클릭 시 다시 렌더링되는 현상을 해결하였습니다.
• 기존 서비스(좌), 리팩토링 후 서비스(우)

2. Server Side에서 Data 받아오기

기존서비스	리팩토링 후 서비스

• 서버로부터 HTML을 받아온 이후에, 데이터를 동기적으로 가져오는 기존의 방식(CSR)을 개선하였습니다.
• 서버에서 먼저 데이터를 불러와 HTML을 생성하고, 이를 클라이언트에 전달하는 서버 사이드 렌더링(SSR) 방식을 사용합니다.
• 홈 화면과 프로필 페이지 같은 페이지가 자주 변경되지 않는 부분에 대해서는, 클라이언트에서 데이터를 받아오는 것보다 서버에서 미리 데이터를 받아오는 방식이 더 적합하다고 판단하였습니다.

3. 토큰 저장 위치 변경

• 기존에는 localStorage에 Access Token과 Refresh Token을 저장하는 방식을 사용했으나, 이 방식은 XXR 공격에 대해 매우 취약하다는 결정적인 단점이 있었습니다.
• 이를 보완하기 위해, Access Token과 Refresh Token을 http only Cookie에 저장하도록 방식을 개선하였습니다.
• 이러한 고민의 흔적

4. 반응형 개선

기존서비스	리팩토링 후 서비스

• px 단위를 rem으로 변경하고, 휴대폰 가로 사이즈에 맞게 화면을 보여주기 위해 반응형 디자인을 구현하였습니다.

---

성능 향상 결과

기존 LCP 3.5초 → 1.1초로 향상

기존서비스	리팩토링 후 서비스

기존 로그인 로딩 시간 7초 → 3초로 향상

기존서비스	리팩토링 후 서비스
RPReplay_Final1686795768.mp4	RPReplay_Final1686795824.mp4

---

Atties Team 문서

컨밴션 🌈

📄 네이밍 컨벤션

📄 타입스크립트 컨밴션

📄 Git 컨밴션

프로젝트 기술스택 🛠

• 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 핸들링

💧 react-query 제대로 알고 사용하기

🐽 Intersection Observer API와 react-query 사용하여 무한스크롤 구현

🎨 tailwind-styled-component

💬 채팅, stompjs, socketjs

🧡 스토리북 in nextjs and tailwind

👣 @types 폴더에서 전역 type 정의

폴더 구조 📁

전체 구조

├── .yarn
├── .storybook              #
├── public                  #
├── src                     #
    ├── @types              #
    ├── apis                #
    ├── components          #
        ├── common          #
        ├── auction         #
        ├── auth            #
        └── ...             #
    ├── features            #
    ├── hooks               #
    ├── pages               #
    ├── stories             #
    ├── styles              #
    ├── utils               #
├── README.md               #
└── ...

apis

Api 요청과 관련한 함수들 입니다.

.
├── apis
│   ├── _axios
│       └── instance.ts      # api instance를 만들어서 사용합니다.
│   ├── admin                # api class를 만들고 비동기 함수들을 작성합니다.
│   ├── artwork
│   ├── aution
└── ...

components

공통 컴포넌트와 페이지 단위로 필요한 컴포넌트로 분리하여 관리합니다.

.
├── ...
├── components
│ ├── common
│   ├── Button
│   ├── Layout
│   ├── Input
│   ├── Modal
│   └── ...
│ ├── auction
│ ├── chat
│ ├── exhibition
│ └── ...
└── ...

hooks

useQuery, useMutation으로 mapping한 query, mutation hook들과 개별 hook들을 작성합니다.

  .
├── ...
├── hooks
│ ├── mutations
│ ├── queries
│ ├── useCountDown.ts
│ ├── useInterval.ts
│ └── ...
└── ...