애셋 개요

앱과 라이브러리는 모두 asset 폴더를 가질 수 있습니다. 브라우저가 요청할 수 있는 파일은 public에 두고, 서버 코드만 읽어야 하는 파일은 private에 둡니다.

asset/public/

정적 애셋으로 서빙됩니다. 이미지, PDF, 다운로드 가능한 JSON, 아이콘처럼 공개되어도 되는 파일에 사용합니다.

asset/private/

서버 코드에서만 사용할 수 있습니다. seed data, private JSON, 모델 파일, 서버 작업용 리소스에 사용합니다.

Public 애셋

asset/public 아래 파일은 앱의 public surface로 복사되고 서버가 정적 파일로 서빙합니다. 브라우저는 URL로 직접 요청할 수 있습니다.

public asset examples

Link to a PDF

Fetch static JSON

이미지가 public에 있다면 akanjs/ui의 Image 컴포넌트로 렌더링할 수 있습니다. Akan은 Next.js image optimization과 비슷하게 최적화된 이미지 응답을 서빙하므로, UI 이미지는 가능한 일반 img 태그보다 Image를 사용하세요.

HeroImage.tsx

asset/private 아래 파일은 서버 전용 리소스입니다. 브라우저가 직접 다운로드하면 안 되지만 서버가 데이터 로딩, 추론, 서비스 초기화에 사용해야 하는 파일을 여기에 둡니다.

private asset examples

Load private JSON on the server

Use a private model file on the server

라이브러리가 애셋을 가지고 있으면 Akan은 public과 private 애셋을 모두 각 앱으로 sync합니다. public 애셋은 브라우저가 요청할 수 있는 파일이 되고, private 애셋은 sync 이후에도 서버 전용으로 남습니다.

library asset mapping

Use synced public library asset

Use synced private library asset

브라우저가 파일을 직접 요청해도 된다면 public을 사용합니다.

내부 데이터, 모델 파일, 서버 전용 설정처럼 공개되면 안 되는 파일은 private을 사용합니다.

서버 최적화가 필요한 public UI 이미지는 akanjs/ui의 Image를 사용합니다.

여러 앱이 같은 파일을 사용한다면 library asset 폴더에 reusable public 파일로 둡니다.