CSV 파일 생성 및 Append 하기

입력 값을 받아 CSV파일로 생성 후, 해당 CSV 파일에 정보가 쌓이도록 구현하였다.
제가 짠 코드의 node 버전은 v22.13.0입니다.
npx create-next-app@latest filetocsv --typescript로 생성했습니다.
아래는 package.json입니다.

{
  "name": "filetocsv",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/css": "^11.13.5",
    "@emotion/react": "^11.14.0",
    "axios": "^1.7.9",
    "next": "15.1.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

 

 

app 하위 파일인 page.tsx에서 작업하였습니다.
css를 제외하고 코드를 작성하도록 하겠습니다.

프론트 부분입니다.

"use client"; // 해당 부분을 작성하지 않으면 에러가 나옵니다!!
import { css } from "@emotion/css";
import axios from "axios";
import { useCallback, useState } from "react";

// 타입선언
interface FormDataType {
  author: string;
  title: string;
  content: string;
}

export default function Home() {
  // 상태 관리를 하기 위한 useState
  const [formData, setFormData] = useState<FormDataType>({
    author: "",
    title: "",
    content: "",
  });

  // 입력 받는 핸들러 부분
  const onChangeInputHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData((prevState) => ({
      ...prevState,
      [name]: value,
    }));
  };

  // 등록 버튼 클릭 시 처리
  const onClickButtonSubmit = useCallback(async () => {
    try {
      const response = await axios({
        url: "/api/csvfile",
        method: "post",
        data: formData,
      });

      if (response.status === 200) {
        // 성공 시 폼 초기화
        setFormData({
          author: "",
          title: "",
          content: "",
        });
      }
    } catch (error) {
      console.error(error);
    }
  }, [formData]);

  return (
    <div>
      <ul>
        <li>
          <span>작성자</span>
          <input
            type="text"
            name="author"
            value={formData.author}
            onChange={onChangeInputHandler}
          />
        </li>
        <li>
          <span>제목</span>
          <input
            type="text"
            name="title"
            value={formData.title}
            onChange={onChangeInputHandler}
          />
        </li>
        <li>
          <span>내용</span>
          <input
            type="text"
            name="content"
            value={formData.content}
            onChange={onChangeInputHandler}
          />
        </li>
        <li>
          <button onClick={onClickButtonSubmit}>등록</button>
        </li>
      </ul>
    </div>
  );
}

서버 부분입니다.

import { NextResponse } from "next/server";
import path from "path";
import { promises as fs } from "fs";

export async function POST(request: Request) {
  // 영문으로 있는 키 값을 한글로 변경해주기 위한 작업
  const headerMapping: { [key: string]: string } = {
    author: "작성자",
    title: "제목",
    content: "내용",
  };
  const csvFileData = await request.json();

  const foloderPath = path.join(process.cwd(), "csv");
  const filePath = path.join(foloderPath, "csv_test.csv");

  try {
    // 폴더가 존재하는 지 체크
    await fs.mkdir(foloderPath, { recursive: true });

    let csvString = "";

    // 파일 존재 여부 판단
    let fileExists = false;

    try {
      await fs.access(filePath);
      fileExists = true;
    } catch (error) {
      console.error("파일 없음", error);
      fileExists = false;
    }

    const values = Object.values(csvFileData);
    if (fileExists) {
      csvString += values.join(",") + "\r\n";
      await fs.appendFile(filePath, csvString, "utf8");
      return NextResponse.json({
        msg: "기존 파일에 텍스트 추가 성공했습니다.",
      });
    } else {
      const titles = Object.keys(csvFileData);
      const translatedTitles = titles.map(
        (title) => headerMapping[title] || title
      );
      csvString += translatedTitles.join(",") + "\r\n";
      csvString += values.join(",") + "\r\n";
      await fs.writeFile(filePath, csvString, "utf8");
      return NextResponse.json({
        msg: "CSV 파일 생성 성공했습니다.",
      });
    }
  } catch (error) {
    console.error(error);
  }
}

위와 같이 설정하셨다면 실행하여 텍스트를 작성해서 버튼을 클릭해주세요.

 

csv폴더가 없었는데

 

생성된 것을 확인하실 수 있습니다.

 

 

작성했던 글 그대로 csv파일에 정보가 담기게 됩니다.

 

기존 파일에 정보를 추가하려면 다시 데이터 입력 후 버튼을 클릭하시면 됩니다.

 

 

csv파일을 확인해보시면 csv파일에 추가적으로 데이터가 담긴 걸 확인하실 수 있습니다.

 

 

제가 짠 코드가 정답은 아닙니다. 참고용으로 부탁드립니다!~~

다음 글은 해당 CSV파일로 Excel 파일 다운로드를 하는 글을 작성하겠습니다.~~꾸벅꾸벅

다음 글