Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: 성능 최적화 #662

Merged
merged 6 commits into from
Mar 17, 2024
Merged

Refactor: 성능 최적화 #662

merged 6 commits into from
Mar 17, 2024

Conversation

dev-dong-su
Copy link
Member

@dev-dong-su dev-dong-su commented Mar 17, 2024

💡 왜 PR을 올렸나요?

💁 무엇이 어떻게 바뀌나요?

withBundleAnalyzer 추가, Tabs하위 컴포넌트의 동적 임포트 적용

49df04a

Sentry 제거, Local Font로 변경

  • 현재 Sentry는 사용하는 큰 이점이 없다고 판단
  • font 최적화를 위해 local로 폰트를 옮기고 next/font/local을 사용
    dee2bda

GroupDetail 페이지에 동적 임포트 적용

f346198

useSearchParams으로 인해 ssr이 안되는 문제 해결

  • Entire page deopted into client-side rendering. https://nextjs.org/docs/messages 경고와 함께 거의 대부분의 페이지가 ssr에서 탈락하고 client rendering이 되는 현상
  • 문제는 layout.ts에 적용된 GoogleAnalytics 컴포넌트의 useSearchParams 때문에 발생
  • useSearchParams를 사용하는 컴포넌트는 client에서 렌더링 되어야하고 정적 렌더링 시점에 useSearchParams을 마주하면 가장 가까운 Suspense를 찾게되고 이를 처리하지 못하면 해당 페이지 전체는 client측 렌더링으로 판단
  • useSearchParams를 사용하는 컴포넌트 바깥에 Suspens 컴포넌트를 감싸 해결
    7719f96

전역으로 로딩되는 google map api script 제거

  • 기존에 사용하던 use-places-autocomplete는 google map api script를 layout.ts에 인라인으로 로드
  • 결과로 모든 페이지 렌더링시 해당 script를 불필요하게 불러오고 해당 script는 대략 75kb정도
  • use-places-autocomplete를 제거하고 필요시에 동적으로 script를 불러오는 기능을 제공하는 react-google-autocomplete로 변경
  • 이에 따라 지도 관련 컴포넌트들을 마이그레이션
    eb36dd7

더이상 사용하지 않는 모듈 제거

use-places-autocomplete와 button 컴포넌트 하나에서만 사용하는 lodash 라이브러리 제거 useDebounce 훅은 직접 작성해서 추가
d7fe18f

💬 리뷰어분들께

@dev-dong-su dev-dong-su merged commit 3aa043d into develop Mar 17, 2024
14 checks passed
@dev-dong-su dev-dong-su deleted the feature/660-chat-pub branch March 17, 2024 14:36
guesung pushed a commit that referenced this pull request Jul 12, 2024
* refactor: 최적화 작업, 컴포넌트 분리

* refactor: sentry 제거 local font로 변경

* refactor: groupdetail page dynmic import

* refactor: 사용하지 않는 모듈 제거

* refactor: useSearchParams으로 인헤 ssr이 안되는 문제 해결

* refactor:  autocomplete api script가 전역에서 로딩되지 않도록 변경
guesung pushed a commit that referenced this pull request Jul 17, 2024
* refactor: 최적화 작업, 컴포넌트 분리

* refactor: sentry 제거 local font로 변경

* refactor: groupdetail page dynmic import

* refactor: 사용하지 않는 모듈 제거

* refactor: useSearchParams으로 인헤 ssr이 안되는 문제 해결

* refactor:  autocomplete api script가 전역에서 로딩되지 않도록 변경
guesung pushed a commit that referenced this pull request Jul 17, 2024
* refactor: 최적화 작업, 컴포넌트 분리

* refactor: sentry 제거 local font로 변경

* refactor: groupdetail page dynmic import

* refactor: 사용하지 않는 모듈 제거

* refactor: useSearchParams으로 인헤 ssr이 안되는 문제 해결

* refactor:  autocomplete api script가 전역에서 로딩되지 않도록 변경
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant