Next.js - 서버 액션

Next.js - 서버 액션

서버 액션

서버 액션의 특별한 점 :

• NextJS는 풀스택 프레임워크이기 때문에 프론트엔드, 백엔드 모두 가능하다. 프론트엔드에서 폼(form)부분을 백엔드에 보내줘야하는 경우, 일반적으로 form태그에 onSubmit을 활용하지만, NextJS에서는 그렇게 사용하지 않는다.
• 함수를 생성한 후, 함수 안에 "use server"라는 키워드를 작성한다.(서버에서 작동하는 함수이기 때문에)
• async 키워드를 사용한다.
• form 태그에 action 속성을 만들고, 해당 함수를 집어넣는다.(action에는 요청이 보내질 곳에 대한 경로가 설정되기 때문에))

"use server";

export async function shareMeal(formData) {
  const meal = {
    title: formData.get("title"), // input필드의 name속성이 들어온다.
    summary: formData.get("summary"),
    instructions: formData.get("instructions"),
    image: formData.get("image"),
    creator: formData.get("name"),
    creator_email: formData.get("email"),
  };

  // console.log(meal); // 서버에 콘솔이 찍힌다.
}

export async function saveMeal(meal) {
  meal.slug = slugify(meal.title, { lower: true });
  meal.instructions = xss(meal.instructions);

  const extension = meal.image.name.split(".").pop();
  
  // 파일 이름이 겹치지 않도록, 랜덤하거나 유니크한 이름을 각각 붙여야한다.
  const fileName = `${meal.slug}.${extension}`;

  const stream = fs.createWriteStream(`public/images/${fileName}`);
  const bufferedImage = await meal.image.arrayBuffer();

  stream.write(Buffer.from(bufferedImage), (error) => {
    if (error) {
      throw new Error("Saving image failed!");
    }
  });

  meal.image = `/images/${fileName}`;

  db.prepare(
    `
    INSERT INTO meals
      (title, summary, instructions, creator, creator_email, image, slug)
    VALUES (
      @title,
      @summary,
      @instructions,
      @creator,
      @creator_email,
      @image,
      @slug
    )
  `
  ).run(meal);
}

XSS(크로스 사이트 스크립팅)

• XSS(크로스 사이트 스크립팅)이란 : 웹 애플리케이션의 보안 취약점 중 하나로, 공격자가 악의적인 스크립트를 웹 페이지에 삽입하여 다른 사용자의 브라우저에서 실행되도록 하는 공격입니다. XSS 공격은 주로 사용자가 입력한 데이터를 제대로 검증하거나 필터링하지 않은 웹 페이지에서 발생합니다.

• 사용자가 만든 instruction을 HTML의 형태로 출력하려고 할 때, 크로스 사이트 스크립팅 공격에 취약하고, 이 공격으로부터 방어해야 하며, 사용자로부터 보내진 컨텐츠를 잘 검열해야한다.
• 이것들을 xss패키지를 설치하면 도움받을 수 있다.

npm i xss