TWIL 2021-3 (5)

1. 리액트로 프린트 기능 구현하기

---

react-to-print
🔗 https://www.npmjs.com/package/react-to-print

라벨 출력 기능 구현을 위해 도입해본 패키지
html이 아닌 리액트 컴포넌트 단위로 출력 설정할 수 있어서 편리하다.

import React, { useRef } from "react";
import ReactToPrint from "react-to-print";

const data = ["label1", "label2", "label3"];

const ComponentToPrint = () => {
  return (
    <div>
      {data.map((item, index) => (
        <div className="page-break">
          <strong>{item}</strong>
        </div>
      ))}
    </div>
  );
};

const Example = () => {
  const componentRef = useRef();

  const pageStyle = `
  @page {
    // size: auto
  }

  @media all {
    .page-break {
      display: none;
    }
  }

  @media print {
    @page {
      size: A4
    }
    .page-break {
      page-break-after: always;
      margin-top: 5rem;
      display: block;
    }
  }
  `;

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print this out!</button>}
        content={() => componentRef.current}
        pageStyle={pageStyle}
      />
      <div ref={componentRef}>
        <ComponentToPrint ref={componentRef} />
      </div>
    </div>
  );
};

export default Example;

2. 리액트 webpack 이미지 로드 설정

file-loader, url-loader 설치
🔗 file-loader
🔗 url-loader

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(gif|svg|jpg|png)$/,
        loader: "url-loader"
      },
    ],
  },
}

웹팩 설정에 url-loader가 아닌 file-loader를 추가하여 브라우저에서 이미지가 보이지 않았다.

리액트 공식 문서를 보면 url을 import하고 있으므로 웹팩에서 url-loader를 설정해야 하는 것

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

🔗 Adding Images, Fonts, and Files

3. module

---

훌륭한 작가가 챕터와 섹션으로 나누어 책을 구성하듯 좋은 프로그래머는 프로그램을 모듈로 나눈다. 모듈의 생김새는 책의 챕터처럼 언어(코드)의 뭉치일 뿐이다. 이 중 좋은 모듈은 의미적으로 다른 코드 뭉치들과 구별되는데, 독자적인 기능을 지니며 어디에든 동원되어 사용, 제거되더라도 전체 시스템에 영향을 주지 않도록 독립적으로 존재하는 단위라고 할 수 있다.

🔗 JavaScript Modules: A Beginner’s Guide