[4주차] 이주희 미션 제출합니다

[BeanMouse]

느낀점: 시험이라.. 준비를 많이 못했습니다,, ㅜㅜ

1. React Router의 동적 라우팅(Dynamic Routing)

• 동적 라우팅: 실행 중 에 라우트(경로)를 생성하고 연결하는 방식
• 컴파일 시 미리 정해진 고정된 경로(static routing)와 달리 사용자나 데이터에 따르는 유동적인 경로

사용하는 경우

• 게시글 상세 페이지
• 사용자 프로필 페이지
• 상품 상세 페이지 등

=> 데이터에 따라 URL이 달라지는 경우 동적 라우팅을 사용

2. 네트워크 속도가 느린 환경에서 사용자 경험을 개선하는 방법

UI/UX 디자인 전략

• Skeleton UI: 콘텐츠가 로딩되는 동안 자리 표시자 형태를 먼저 보여줌
• 낙관적 UI: 서버의 응답을 기다리지 않고 사용자가 기대하는 결과를 미리 화면에 반영
• 로딩 스피너 최소화: 단순 스피너보다는 Skeleton UI나 부분 렌더링을 사용
• 중요한 정보 우선 표시: 핵심 정보(텍스트, 버튼 등)를 먼저 보여주고 이미지나 부가 콘텐츠는 나중에 불러옴

기술적 최적화 방법

• Code Splitting: React.lazy와 Suspense를 사용해 필요한 컴포넌트만 지연 로드
• 이미지 최적화: 이미지 파일 크기를 줄이기, WebP 포맷을 사용, Lazy Loading 적용
• Preloading / Prefetching: 사용자가 이동할 가능성이 높은 리소스를 미리 로드
• 서버 사이드 렌더링(SSR) 또는 Static Site Generation(SSG): 서버나 빌드 단계 -> HTML을 미리 생성
• HTTP/2 및 CDN 활용: 빠른 리소스 전송과 가까운 서버로부터 데이터를 제공

3. React에서 useState, useReducer, Context API, 전역 상태 관리 라이브러리 비교

useState

• 간단하고 직관적인 상태 관리를 위한 훅
• 주로 버튼 클릭, 토글 스위치처럼 단순한 상태를 관리할 때 사용
• 다루는 상태가 적을 때는 효과적, 상태가 많아지면 코드가 복잡

useReducer

• 복잡한 상태 변경 로직을 관리하기 위한 훅
• 다양한 액션을 통해 상태를 변경해야 하거나, 여러 값이 서로 의존하는 복잡한 폼 입력을 관리할 때 유용
• 상태 전환 과정을 명시적으로 작성 -> 코드량이 증가

Context API

• 컴포넌트 트리 전체에 데이터를 전파하는 데 사용
• 여러 컴포넌트가 공통으로 참조해야 하는 데이터(테마 설정, 다국어 지원, 로그인 정보 공유)를 관리할 때 유용
• Context 자체는 상태를 직접 관리 안 함 -> 많은 컴포넌트가 구독할 경우 성능 최적화 필요

전역 상태 관리 라이브러리(Redux, Zustand ,,,)

• 대규모 애플리케이션에서 전역 상태를 체계적으로 관리하기 위해 사용
• 인증 정보, 알림, 사용자 설정 등 복잡하고 다양한 전역 데이터를 효율적으로 관리
• Redux와 같은 라이브러리는 초기 설정이 복잡 ->코드 구조를 체계적으로 관리 필요

[kkys00]

시험이 아직 안 끝났는데 수고했어요~
주희님도 새로고침하면 404 에러가 뜨시군요, 저도 방금 고쳤어요! 이 파일 추가해야 한다고 합니다~!~!

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}

[kkys00]

css 파일로 폰트를 설정하고 있으니 이 파일은 지워도 괜찮을 거 같아요.

[kkys00]

오 jotai를 쓰셨네요... 열심히 보고 참고할게요!!

[kkys00]

네이밍이 PageContainer가 더 적절할 거 같아요~!

[kkys00]

phoneNumber, birth, email도 현재 유저에 종속된 정보일텐데 user 객체를 별도로 분리하신 건가요?

[kkys00]

svgr 쓰면 svg 파일을 컴포넌트처럼 불러와 사용할 수 있어서 보일러플레이트도 줄고 편한 것 같습니다!