INDEX

프로젝트 소개

<aside> 📌 내 손 안의 작은 전시회, Esthète

B2C 온라인 전시회 플랫폼

• TEAM Stack
  • Next JS, TypeScript, React Native
  • AWS S3, CloudFront, RDS, EC2, Spring boot, Docker Compose, MySQL
  • Figma
  • Swagger

WEB(Front)	오준서	Next JS, TypeScript
APP(Front)	강제구	React Native
WEB / APP(Back)	민한결, 이수빈	Spring boot

</aside>

담당 파트

<aside> 📌 CMS WEB Front-End

개발 환경

Next JS, TypeScript

• Next 14 ver App Router 방식 적용
• ChartJS, Masonry 및 Swiper 라이브러리 활용

기능 구현

• 서비스 관련 통계 데이터 시각화
• 저작권 침해 및 악성 유저 신고 처리
• 관리자 계정 추가 및 삭제 </aside>

디자인

statistic 시연.mp4

masonry 시연.mp4

swiper 시연.mp4

admin 시연.mp4

시연

https://www.youtube.com/watch?v=B-3IrsyK8B4&list=WL&index=1

새롭게 배운 점

<aside> 📌 Next ver14

• App Router
  • 모든 컴포넌트는 기본적으로 서버 컴포넌트로 동작한다.
  • 만약 App directory 내부 client component를 사용하고 싶다면 파일 최상단 ‘use client’라는 directive를 명시해주면 된다.

RSC?

• RSC(React Server Component)는 React18부터 도입된 개념

• 말 그대로 서버에서 동작하는 컴포넌트를 지칭

• Client Component와 가장 큰 차이점은 렌더링되는 장소가 서버인지 클라이언트인지

• RSC는 서버에서 한 차례 해석된 이후 Client로 전달되고, RCC는 Client가 JS 번들을 다운로드 받은 이후 해석함

  

1. 사용자가 브라우저 접근 시도 시 페이지를 띄우기 위해 서버로 요청
2. 서버는 component tree를 root부터 실행하며 serialized json format으로 재구성
   1. RCC는 서버에서 직접 해석하지 않고 ‘Module reference” 라고 하는 새로운 타입 적용하고 placeholder로 대체
3. 서버로부터 직렬화된 결과물을 Stream 형태로 Client가 전달받게 되고, 함께 다운로드한 JS Bundle을 참조하여 Module reference 타입 등장할 때마다 RCC를 렌더링해서 빈 공간 채운 뒤, DOM에 반영하면 실제 화면에 스크린이 보인다.

RSC 장점

• Zero Bundle Size
  • RSC는 서버에서 이미 모두 실행된 후 직렬화된 JSON 형태로 전달되기 때문에 어떠한 bundle도 필요하지 않다.
  • No more getServerSideProps / getStaticProps

</aside>

<aside> 📌 Warning: Prop className did not match. Server: "sc-iBPTVF gYzxoH" Client: "sc-pGaPU jNmjyv"

문제 인식

• Next SSR로 인해 일단 서버에서 렌더링이 되지만, 이후 라우팅 과정에서 브라우저 렌더링(CSR)을 하면서 서버에서의 className과 클라이언트에서 className이 달라져서 생기는 현상

해결 시도

• next.config.js 파일 아래 코드 추가

  const nextConfig = {
  	compiler: {
  		styledcomponents: true,
  	},
  }
  

문제 발생

• CSS-in-JS 방식 styled-component로 커스터마이징된 swiper 라이브러리 간섭 영향 CSS 충돌

재해결

• Next의 RSC와 RCC의 hydration 과정 고려

• 컴포넌트가 렌더링되고 난 후에 HTML요소를 가져오게 한다.

  // Hydration--------------------------------------------
    const [element, setElement] =
      useState<HTMLCollectionOf<HTMLHtmlElement> | null>(null);
    useEffect(() => {
      setElement(document.getElementsByTagName("html"));
    }, []);
    if (!element) return <></>;
  

</aside>

<aside> 📌 Next Image

문제 인식

원리

• Next/Image는 디바이스 크기 별로 srcSet을 미리 지정해두고, 사용자 디바이스에 맞는 이미지를 다운로드할 수 있게 지원
• 디바이스 크기에 맞는 작은 크기의 이미지를 서빙하고 jpeg 혹은 png에서 webp 포맷으로 자동 변경 - 최초 요청 시 Next 서버에서 진행 → 캐시된 이미지 제공
• 캐시 만료 후 요청이 들어오면 오래된 이미지 우선 제공하고, 백그라운드에서 이미지 최적화 다시 진행

해결

<Image sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" />

// next.config.js
const nextConfig = {
	imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  minimumCacheTTL: 60,
	// 이미지가 캐싱 되는 기간은 next.config.js의 images.minimumCacheTTL 구성 또는
	// CDN에서 응답한 이미지의 Cache-Control 헤더 중 더 큰 것으로 정의
}

장점

• 성능 향상: 디바이스마다 적절한 사이즈의 이미지를 서빙하고, webp와 같은 작은 용량의 포맷을 사용함
• 시각적인 안정성: 이미지 로드 전 placeholder를 제공하여 CLS(Cumulative Layout Shift) 방지
• 빠른 페이지 로딩: viewport에 들어왔을 때만 이미지를 로드하고, 작은 사이즈의 blur 이미지를 미리 로딩하여 사용자에게 더 빠른 페이지를 보여줄 수 있음 </aside>