이미지 경로 폴더

이미지 경로 폴더를 어느 위치에 배치하면 좋은지..?

public

웬만하면 public을 사용하지 않는 편이 좋다

• webpack에 의해 관리되지 않는 폴더
• public폴더로 접근하기 위해서는 PUBLIC_URL 환경변수를 이용해야 함
• 경로가 잘못되었을 경우 컴파일 단계에서 잡지 못하고 접속 시 404에러가 발생

위 세가지 단점에도 사용해야할 경우

• .manifest 처럼 build된 결과물에 특정 파일 이름이 필요할 경우..?
• 매우 많은 이미지 파일을 동적으로 참조해야하는 경우

src

• 파일을 찾지 못하는 경우 컴파일 단계에서 에러 발생함으로 서비스 실행 전 에러 발견
• import로 경로 참조 가능
• content hash를 파일명에 포함하게 되므로 구 버전 파일을 캐싱하고 있는 경우를 고려하지 않아도 됨
• 서버 요청 횟수를 줄이기 위해 10,000 byte 이하의 이미지는 path 대신 data URL을 반환 (svg 제외), 이미지 크기는 환경변수로 설정 변경 가능

기본 경로 설정

tsconfig.json 파일의 compilerOptions 내부에 baseUrl 설정

"compilerOptions": {
	"baseUrl": "src",
  }

svg

React Native와 비슷하다

src/assets 하위에
index.js 파일 생성 후 export 구문을 모아둔다

// src/assets/index.js
export { ReactComponent as logo } from "svgs/logo.svg";

.svg에 대해 컴포넌트로 반환하는 코드 작성 후 default.ts로 작성

// src/custom.d.ts
declare module "*.svg" {
  import React from "react";

  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

tsconfig.json에 작성한 custom.d.ts 추가

tsconfig.json

"include": ["src", "custom.d.ts"]