1import fs from "fs";
2import sizeOf from "image-size";
3import Image from "next/image";
4import path from "path";
5import { useMemo } from "react";
6
7interface MDXImageProps {
8  src: string;
9  alt: string;
10}
11
12interface ImageDimensions {
13  width: number;
14  height: number;
15}
16
17export default function SyncImage({ src, alt }: MDXImageProps) {
18  const dimensions: ImageDimensions = useMemo(() => {
19    // 클라이언트 측에서는 실행하지 않음
20    if (typeof window !== "undefined") {
21      return { width: 700, height: 475 }; // 기본값 설정
22    }
23
24    try {
25      // public 폴더 내의 이미지 경로 구성
26      const imagePath = path.join(process.cwd(), "public", src);
27
28      // 파일이 존재하는지 확인
29      if (!fs.existsSync(imagePath)) {
30        console.warn(`Image not found: ${imagePath}`);
31        return { width: 700, height: 475 }; // 이미지를 찾지 못한 경우 기본값 반환
32      }
33
34      // 파일을 바이너리로 읽기
35      const buffer = fs.readFileSync(imagePath);
36
37      // image-size를 사용하여 이미지 크기 계산
38      const dimensions = sizeOf(buffer);
39
40      return {
41        width: dimensions.width || 700,
42        height: dimensions.height || 475,
43      };
44    } catch (error) {
45      console.error("Error getting image dimensions:", error);
46      return { width: 700, height: 475 }; // 오류 발생 시 기본값 반환
47    }
48  }, [src]);
49
50  return (
51    <Image
52      src={src}
53      alt={alt || ""}
54      width={dimensions.width}
55      height={dimensions.height}
56      style={{
57        maxWidth: "100%",
58        height: "auto",
59      }}
60      className="rounded-[10px]"
61    />
62  );
63}

1// 파일을 바이너리로 읽기
2const buffer = fs.readFileSync(imagePath);
3
4// image-size를 사용하여 이미지 크기 계산
5const dimensions = sizeOf(buffer);
6
7return {
8  width: dimensions.width || 700,
9  height: dimensions.height || 475,
10};

1Reading from a file Syncronously (not recommended)
2v1.x of this library had a sync API, that internally used sync file reads.
3This isn't recommended because this blocks the node.js main thread, which reduces the performance, and prevents this library from being used concurrently.
4However if you still need to use this package syncronously, you can read the file syncronously into a buffer, and then pass the buffer to this library.

1import Image from "next/image";
2import { getPlaiceholder } from "plaiceholder";
3import fs from "fs/promises";
4import path from "path";
5
6interface MDXImageProps {
7  src: string;
8  alt: string;
9}
10
11interface ImageMetadata {
12  width: number;
13  height: number;
14  blurDataURL?: string;
15}
16
17// This function can be used with getStaticProps or in a Server Component
18export async function getImageMetadata(src: string): Promise<ImageMetadata> {
19  try {
20    const imagePath = path.join(process.cwd(), "public", src);
21    const buffer = await fs.readFile(imagePath);
22
23    // Get image dimensions and optional blur placeholder
24    const { metadata, base64 } = await getPlaiceholder(buffer);
25
26    return {
27      width: metadata.width,
28      height: metadata.height,
29      blurDataURL: base64,
30    };
31  } catch (error) {
32    console.error(`Error processing image ${src}:`, error);
33    return { width: 700, height: 475 };
34  }
35}
36
37// For use in Server Components (App Router)
38export default async function AsyncImage({ src, alt }: MDXImageProps) {
39  const imageMetadata = await getImageMetadata(src);
40
41  return (
42    <Image
43      src={src}
44      alt={alt || ""}
45      width={imageMetadata.width}
46      height={imageMetadata.height}
47      placeholder={imageMetadata.blurDataURL ? "blur" : "empty"}
48      blurDataURL={imageMetadata.blurDataURL}
49      style={{
50        maxWidth: "100%",
51        height: "auto",
52      }}
53      className="rounded-[10px]"
54    />
55  );
56}

1config:
2  target: "http://localhost:3000"
3  phases:
4    - name: "초기 준비 단계"
5      duration: 10
6      arrivalRate: 100 # 첫 10초 동안 초당 50명
7    - name: "중간 부하 단계"
8      duration: 10
9      arrivalRate: 500 # 다음 10초 동안 초당 100명
10    - name: "고부하 단계"
11      duration: 20
12      arrivalRate: 1000 # 마지막 20초 동안 초당 200명
13scenarios:
14  - name: "테스트 엔드포인트"
15    flow:
16      - get:
17          url: "/test-async"

1docker run --cpus="12" --memory="1024m" -p 3000:3000 test

1phases:
2  - name: "초기 준비 단계"
3    duration: 10
4    arrivalRate: 50 # 첫 10초 동안 초당 50명
5  - name: "중간 부하 단계"
6    duration: 10
7    arrivalRate: 100 # 다음 10초 동안 초당 100명
8  - name: "고부하 단계"
9    duration: 20
10    arrivalRate: 200 # 마지막 20초 동안 초당 200명

1phases:
2  - name: "초기 준비 단계"
3    duration: 10
4    arrivalRate: 100 # 첫 10초 동안 초당 100명
5  - name: "중간 부하 단계"
6    duration: 10
7    arrivalRate: 500 # 다음 10초 동안 초당 500명
8  - name: "고부하 단계"
9    duration: 20
10    arrivalRate: 1000 # 마지막 20초 동안 초당 1000명