코드 스플리팅
초기 로딩 시 모든 JS 파일을 한 번에 다운로드하지 않고, 필요한 시점에 필요한 코드만 나눠서 로드하는 기법
React - Lazy loading + Suspense로 구현
Next - Dynamic import 로 구현
Lazy loading + Suspense
컴포넌트를 필요할 때 비동기로 불러오고, 로딩 중 UI를 보여주는 방식
렌더링될 때 다운로드 된다
Dynamic import
에디터를 다운받는데 일반 에디터가 있고 버튼을 눌러야 열리는 고급 에디터가 있다면
다이나믹 임포트를 통해 고급 에디터는 버튼이 눌리는 순간 다운받는다
프리패치
사용자가 곧 필요할 것 같은 파일을 미리 받아두는 것
1. <Link>를 사용하면 자동 프리 패치 됨
2. <button
onMouseEnter={() => router.prefetch("/profile")}
onClick={() => router.push("/profile")}프리로드
필요한 리소스를 지금 바로 다운로드
프리패치보다 우선순위 높음
Tree Shaking
안 쓰는 import 코드 삭제
import _ from "lodash"; // lodash 전체 포함 가능
import debounce from "lodash/debounce"; // Tree ShakingCDN
사용자와 가까운 서버에서 제공하는 네트워크다. 이미지, JS, CSS 같은 리소스를 빠르게 전달해 로딩 성능을 개선한다.
서버 한국 → 유저 미국 → 느림
미국 CDN 서버 → 빠름
즉 가까운 서버에서 빠르게 전달하는 것
Lighthouse
웹 성능, 접근성, SEO, Best Practices 등을 측정하는 도구
상태 코드 (Status Code)
2xx는 성공, 3xx는 리다이렉션, 4xx는 클라이언트 오류, 5xx는 서버 오류를 의미한다.
200: 조회 성공
201: 생성 성공
204: 삭제 성공, 응답 없음
304: 캐시 사용
400: 잘못된 요청
401: 인증 필요
403: 권한 없음
404: 리소스 없음
409: 충돌
422: 유효성 실패
429: 요청 과다
500: 서버 오류
503: 서버 일시 장애
REST API란
자원을 URI로 표현하고, HTTP 메서드를 사용해 자원에 대한 행위를 정의하는 API 설계 방식입니다.
브라우저 통신이 5분 정도 걸릴대 최적화 방법
먼저 Chrome DevTools의 Network, Performance 탭, Lighthouse를 통해 병목이 네트워크, JavaScript 실행, 렌더링 중 어디인지 파악한다.
네트워크 영역에서는 API 요청을 최적화한다.
불필요한 요청을 제거하고, 독립적인 요청은 Promise.all을 통해 병렬 처리한다.
또한 서버에서 모든 데이터를 가져오는 것이 아니라 필요한 데이터만 가져오도록 API를 수정한다.
JavaScript 영역에서는 번들 사이즈를 확인하고, 코드 스플리팅과 tree shaking을 통해 초기 로딩 비용을 줄인다.
렌더링 영역에서는 한 번에 모든 데이터를 그리지 않고 lazy loading, 페이지네이션, 무한 스크롤을 적용해 렌더링 부담을 줄인다.
XSS
React의 Hidration
IPV6 브로드캐스트 멀티캐스트 애니캐스트
IPV6는 멀티캐스트 씀
디바운스
이벤트가 연속 발생해도 “마지막 이벤트 이후 일정 시간 지나면 한 번 실행”
검색창 자동완성에서 사용
쓰로틀링
스크롤 이벤트 발생 시킬 때 1초에 한번만 발생시키게 하기
번들
여러 개의 JS/CSS 파일을 브라우저가 효율적으로 로드할 수 있도록 하나로 묶은 결과물
번들사이즈
브라우저가 다운로드해야 하는 JS/CSS 파일 크기
code splitting과 tree shaking을 활용해 초기 번들 크기를 줄이기 가능
position
relative - 자기 자신을 기준으로 이동
absolute - 부모를 기준으로 이동
grid 문법
<div class="grid grid-cols-12"> // 부모 12칸
<div class="col-span-4"></div> // 자식 4칸 차지
<div class="col-span-8"></div> // 자식 8칸 차지
</div>
// gap 없을 때
[1][2][3]
// gap-4 있을 때
[1] [2] [3]에러가 났을 때 확인법
- 브라우저 콘솔에서 에러 혹은 상태코드 확인 / 에러를 확인해 어떤 js에서 오류 났는지 확인
- 네트워크 탭에서 status 확인
- git 히스토리를 확인해 최근 변경사항 확인
웹팩
Webpack은 여러 JS/CSS/image 파일들을 하나의 번들로 묶어주는 모듈 번들러
브라우저가 직접 이해하지 못하는 모듈, TypeScript, JSX 등을 변환하고, 번들링 및 최적화를 하기 위해 사용한다
Loader
Loader는 JS 외 파일(CSS, TypeScript, JSX 등)을 Webpack이 이해할 수 있도록 변환하는 역할을 합니다.
Loader와 Plugin 차이
Loader는 파일 변환, Plugin은 번들링 확장 기능
Babel
최신 JavaScript 문법을 오래된 브라우저에서도 실행 가능하도록 변환해주는 트랜스파일러
JSX, 화살표형 함수 등을 브라우저가 알 수 있게 변환해줌(옛날 문법으로 변환해주는듯)
Vite
ES Module 기반으로 필요한 파일만 즉시 제공해서 엄청 빠르다
