💻 TDD(Test Driven Development) : 테스트 주도 개발

<aside> 😲 vite환경에서는 vitest 가 있어야 가능합니다 CRA(Create-react-app) 환경에선 따로 설치하지 않아도 가능해요 !

</aside>

💻 CSR vs SSR

• CSR vs SSR 이미지로 보기 🥰

• 클라이언트 사이드 렌더링

  : 초기에는 빈 페이지를 받아오고 클라이언트 측에서 API 호출 등을 사용해 동적으로 컨텐츠 렌더링

• 서버 사이드 렌더링

  : 서버에서 완전한 HTML을 생성하여 전달 ⇒엘리먼트 패널에서 다 확인 할 수 있음😓

초기 로딩 속도가 앱 규모가 커지면 CSR이 더 느려요. SSR 보다

📦 Vite 환경에서 정적 vs 동적 자산 불러오기

https://ko.vitejs.dev/guide/assets.html

<aside> 😲 src 안에 있는 자산을 번들러를 사용해서 화면에 표시하고, 빌드했을때 정상적으로 이미지를 빌드하려면 import로 호출해서 사용해야함

</aside>

cf ) CRA도 정적 파일 루트는 public이 기준이에요 😌

• svg는 동적으로 관리하면 컴포넌트처럼 불러올 수 있어요
• import meta env : BASE_URL(정적 에셋의 전제 URL)을 확인 가능

import bannerImage from '../assets/banner.png';

function Exercise() {
  return (
    <figure>
      {/* ✅ public 정적 자산 */}
      <img src={getStaticImage('faces/woman-02.jpg')} alt="" />

	      {/* ❌ 마치 정적인 것처럼 src 안의 자산 -> 빌드시 표시 ❌ */}
      <img src="/src/assets/banner.png" alt="" height={100} />

      {/* ✅ src/assets 동적 자산으로 호출(import) */}
      <img src={bannerImage} alt="" height={100} />
    </figure>
  );
}

배포 환경마다 기준으로 하는 디렉터리가 다르기때문에 public base path를 수정해줘야됩니다.

조건부렌더링

⇒ 실제 DOM에 그리지 않음

Conditional Rendering – React