원티드 프리온보딩 챌린지 "레거시 유지보수와 데이터 모으기" 3일차 강의
개요
- 최적화란 성능 향상, 사용자 경험 개선, 비용 절감을 도모하는 것이다.
- 레거시가 있는 상태에서 최적화를 하지 않는 것이 좋다. 최적화는 협업을 동반한, 시간이 오래 걸리는 작업이기 때문. 레거시 처리부터 한다.
최적화의 종류
두 가지로 구분할 수 있다.
1) 비용이 드는 최적화: 초기비용이 들지만 장기적인 유지보수 개선을 위해 하는 작업
- SSR로 변경: SEO와 초기 로딩속도에 이점이 있지만 서버 의존적임. 즉 서버 인프라 비용이 생긴다. (그래서 Vercel 같은게 좋다)
- React-Query(=TanStack Query): 이탈했다가 다시 돌아왔을 때 데이터를 다시 불러올지 결정하는 옵션이 있는데, 기본값은 true이다. 그래서 서버로의 API 요청 비용이 추가로 들 수 있다.
- 애니메이션/인터랙션: 사용성을 좋게 하지만, 역시 비용이 든다.
2) 비용을 줄이는 최적화
- 캐싱: 서버 요청을 줄여 서버 비용 줄이기
- Lazy loading: 초기 로딩 시 모든 데이터를 가져오지 않음. 사용자가 보고 있지 않은 화면은 조금 느리게 가져오는 것.
- 번들 사이즈 줄이기: 트리 셰이킹이나 css, js 압축을 통해 번들 사이즈 줄이기
프론트엔드 성능 지표 측정방법
- 개발자 도구의 Lighthouse: 개발 단계에서 로컬 환경에서의 잠재적인 문제를 수정하는 데 도움을 주지만, 실제 네트워크 환경과 장치의 성능을 반영하지 못하기에 한계가 있다.
- Datadog, webpagetest.org, akamai(유료): RUM(Real User Monitoring) 데이터를 확인할 수 있다. 캐싱에 따른 성능 지표도 확인할 수 있다.
성능 지표 종류
- LCP: 가장 큰 컨텐츠(주요 텍스트나 큰 배너)가 화면에 나타나는 시간, 즉 렌더링 시간이다. 2.5초 이내 권장.
- CLS: 페이지 레이아웃이 얼마나 흔들렸는지 측정하는 지표이다. 시각적 안정성을 평가하고, 0.1 이내 권장.
- FID: 최초 인터랙션 후 얼마나 걸리는지 측정하는 지표이다. 100ms 이내 권장. 요즘은 FID보다 INP를 더 많이 본다. 초기 페이지를 평가하기보단 전체적인 사용자 경험을 보는 게 좋기 때문.
- INP: 인터랙션 후 컨텐츠 업데이트 시간을 측정하는 지표이다. 200ms 이내 권장.
성능 개선 방법
1) LCP 개선 방법
- div 태그 안에서 background 속성으로 이미지를 넣는 행위를 지양한다. 대신 <picture> 태그를 사용한다. <source> 태그 안에서 preload 옵션과 lazyload 옵션을 사용할 수 있다. 하지만 지원하지 않는 브라우저도 있으므로 caniuse.com 에서 꼭 확인한다.
2) CLS 개선 방법
- 스켈레톤을 잘 잡아주자. 로딩 끝났을 때의 사이즈와 같도록 맞춰준다.
3) 캐싱 방법
- TanStack Query 등으로 캐싱할 경우 보통 60초나 그 이상으로 캐싱한다.
4) 번들 사이즈 줄이는 방법 1 - 코드 스플리팅
- 코드 스플리팅(Code Splitting)을 이용한다. 이는 처음부터 모든 것을 로드하지 않고, 필요한 시점에 로드하는 방법이다. 코드 스플리팅 방법에는 다이나믹 임포트(Dynamic Import)가 있다.
- 탭을 나눌 때, 현재 탭이 아닌 탭들까지 같이 가져오는 웹사이트가 있다고 하자. 만약 자주 사용하는 탭이 아니라면, 정적 임포트 대신 다이나믹 임포트를 한다. 그럼 번들러가 알아서 chunk를 나누어 준다.
5) 번들 사이즈 줄이는 방법 2 - 패키지 관리
- 필요없는 패키지를 삭제한다.
- 두 가지 이상의 패키지가 같은 모듈(버전만 다름)을 가지고 있다면 npm에서 둘다 놔둔다. bundlephobia.com 에서 이런 식으로 중복된 모듈들을 확인하고, $ npm dedupe 명령어를 사용하여 하나만 남기는 것도 방법이다. 다만 충분한 서칭 이후 조심해서 해야 하는 작업이다.
- 위의 사이트에서는 무거운 패키지가 뭔지도 확인 가능하다. 패키지를 고를 때 감안하자. 참고로 리액트가 7.3KB다.
SEO 개선 방법
1) 시맨틱 태그 사용하기
- h1은 페이지당 한번만 사용하고, h2와 h3은 내용의 섹션마다 사용한다.
- <main>은 HTML 문서당 하나만 사용한다. 즉 메인에 대한 주제를 담고 있어야 한다. 보통 main 안에 h1이 들어있을 것이다. 탭당 main이 여러개면 검색엔진이 크롤링을 안 할 수도 있다.
- 접근 링크들은 <nav>로 묶는다.
- 관련 컨텐츠는 <section>이나 <article>로 묶는다.
2) JSON-LD 사용하기
- JSON-LD는 구조화 데이터 마크업으로, 검색엔진이 사이트의 구조를 파악할 수 있게 한다. 구글에서 위와 같이 구조화된 데이터에 대한 컨텐츠가 나온다면 JSON-LD가 잘 구성된 것이다.
- schema.org에서 속성을 참고한다. 필수 속성을 누락하지 않게 작성하기만 해도 SEO에 큰 도움이 된다.
- 페이지 컨텐츠와 데이터가 일치하지 않으면 검색엔진에서 밴을 먹이기도 하니 주의.
- JSON-LD는 한 페이지에 하나씩 넣어야 한다.
- <meta> 태그와의 차이는, meta 태그는 공유 형태에 대한 설정을 해주는 것이고 JSON-LD는 검색엔진에 노출되는 형태를 설정하는 것이다.
3) react-helmet-async 사용하기
리액트의 <head> 부분을 동적으로 관리할 수 있는 라이브러리이며, SPA인 리액트에서 SEO를 향상시키기 위해 각 페이지별로 title과 meta 태그를 별도로 관리할 수 있도록 해준다.
Q&A
- 프론트엔드 소식 참고하기 좋은 플랫폼: surfit.io
- svg는 File이라는 컴포넌트를 만들어서 props로 여러가지 설정을 넘겨서 쓰기도 한다. 색상도 css로 변경 가능하다.
- styled-component와 tailwindcss는 현직자들이 많이 쓴다.
저번에도 느꼈지만 진짜 얻어가는 게 많은 강의인듯...
이런 강의가 무료라니...... ㅎㄷㄷ
'IT > React & Next.js' 카테고리의 다른 글
| [JavaScript/React] 다른 탭 간에 데이터 공유하기(postMessage) (0) | 2025.02.09 |
|---|---|
| [Next.js] Next.js에 대해 (0) | 2025.02.08 |
| [IT] FE 레거시 코드 리팩토링 강의 정리 (0) | 2025.01.12 |
| [React] 비즈니스 로직과 UI 분리하기 (0) | 2025.01.12 |
| [React] React Profiler로 성능을 측정해보자 (1) | 2024.11.28 |