Prettier - NPM (개발자를 위한 작동 방식)

설치

Prettier를 프로젝트에서 사용하려면 NPM 또는 yarn을 통해 설치하면 됩니다.

npm install prettier --save-dev

npm install prettier --save-dev

또는

yarn add --dev prettier

yarn add --dev prettier

용법

• 명령줄 인터페이스(CLI): Prettier는 파일을 수동으로 포맷하거나 자동화된 포맷 작업을 위한 스크립트에 통합할 수 있는 CLI 도구를 제공합니다.
• 에디터 통합: Visual Studio Code, Sublime Text, Atom 등 인기 에디터용 플러그인이 제공되어 입력하는 동안 실시간으로 서식을 지정할 수 있습니다.
• Git Hooks: Git Hooks를 사용하여 커밋 전에 Prettier가 실행되도록 설정하여 모든 코드 변경 사항이 정의된 서식 규칙을 준수하도록 합니다.

통합 및 생태계

Prettier는 다양한 개발 도구 및 워크플로와 완벽하게 통합됩니다.

• IDE 플러그인: IDE 및 텍스트 편집기와 통합되어 코드를 즉시 포맷팅함으로써 개발자 생산성을 향상시키고 코딩 표준을 유지합니다.
• 빌드 시스템: 빌드 파이프라인 및 지속적 통합(CI) 워크플로에 통합되어 팀 프로젝트 전반에 걸쳐 일관된 코드 형식을 적용합니다.
• 버전 관리: Git과 같은 버전 관리 시스템과 원활하게 연동되어 협업 과정 전반에 걸쳐 형식이 일관되게 유지되도록 합니다.

HTML을 PDF로 변환

HTML 콘텐츠를 PDF 문서로 손쉽게 변환하세요. 이 기능은 웹 콘텐츠에서 동적 PDF를 생성하는 데 특히 유용합니다.

URL을 PDF로 변환

URL에서 직접 PDF를 생성하여 웹 페이지의 콘텐츠를 캡처하고 프로그램 방식으로 PDF 파일로 저장할 수 있습니다.

PDF 조작

기존 PDF 문서를 손쉽게 병합, 분할 및 편집하세요. IronPDF 페이지 추가, 문서 분할 등의 기능을 제공합니다.

PDF 보안

PDF 문서를 암호로 암호화하거나 디지털 서명을 적용하여 보안을 강화하세요. IronPDF 무단 접근으로부터 중요한 문서를 보호할 수 있는 다양한 옵션을 제공합니다.

고품질 출력

텍스트, 이미지 및 서식이 정확하게 표현된 고품질 PDF 문서를 제작하세요. IronPDF 생성된 PDF 파일이 원본 콘텐츠와 동일한 품질을 유지하도록 보장합니다.

크로스 플랫폼 호환성

IronPDF 는 Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.

간단한 통합

IronPDF의 npm 패키지를 사용하면 IronPDF Node.js 애플리케이션에 쉽게 통합할 수 있습니다. API 문서가 잘 되어 있어 프로젝트에 PDF 생성 기능을 쉽게 통합할 수 있습니다.

설치

IronPDF NPM 패키지를 설치하려면 다음 명령어를 사용하십시오.

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

PDF 생성

이제 IronPDF 사용하여 간단한 PDF 생성 예제를 만들어 보겠습니다.

PDF 생성 API: 첫 번째 단계는 PDF 문서를 생성하는 백엔드 API를 만드는 것입니다. IronPDF 서버 측에서만 실행되므로 사용자가 PDF를 생성하고자 할 때 호출할 API를 만들어야 합니다. 파일을 pages/api/pdf.js 위치에 생성하고 아래의 내용을 추가하세요.

IronPDF 사용하려면 라이선스 키가 필요하며, 이 키는 라이선스 페이지 에서 얻어 다음 코드에 사용할 수 있습니다.

// pages/api/pdf.js

imp또는t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

exp또는t default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (err또는) {
    console.err또는("Err또는 generating PDF:", err또는);
    res.status(500).end();
  }
}

// pages/api/pdf.js

imp또는t { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

exp또는t default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();

    // Configure response headers to ensure the PDF file is downloaded
    res.setHeader("Content-Type", "application/pdf");
    res.setHeader(
      "Content-Disposition",
      "attachment; filename=awesomeIron.pdf"
    );
    res.send(data);
  } catch (err또는) {
    console.err또는("Err또는 generating PDF:", err또는);
    res.status(500).end();
  }
}

이제 index.js 코드를 수정하여 아래와 같이 Prettier와 IronPDF를 사용하세요.

imp또는t Head from "next/head";
imp또는t styles from "../styles/Home.module.css";
imp또는t React, { useState } from "react";

exp또는t default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (err또는) {
      console.err또는("Err또는 generating PDF:", err또는);
    }
  };

  // Handle input changes, updating the state
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: b또는der-box;
        }
      `}</style>
    </div>
  );
}

imp또는t Head from "next/head";
imp또는t styles from "../styles/Home.module.css";
imp또는t React, { useState } from "react";

exp또는t default function PrettierDemo() {
  const [text, setText] = useState("");

  // Function to generate PDF using the IronPDF backend API
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement("a");
      link.href = url;
      link.setAttribute("download", "awesomeIron.pdf");
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (err또는) {
      console.err또는("Err또는 generating PDF:", err또는);
    }
  };

  // Handle input changes, updating the state
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Prettier and Generate PDF Using IronPDF</h1>
        <p>
          <span>Enter Url To Convert to PDF:</span>{" "}
          <input type="text" value={text} onChange={handleChange} />
        </p>
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: b또는der-box;
        }
      `}</style>
    </div>
  );
}

yarn prettier를 사용하여 코드 형식을 지정합니다.

yarn prettier . --write

yarn prettier . --write

이제 다음 명령어를 사용하여 애플리케이션을 실행하세요.

yarn dev

yarn dev

출력

PDF