본문 바로가기

전체 글54

PDF 페이지 분리 처리: CSS를 활용한 페이지 브레이크 최적화 PDF 문서 생성 시 데이터가 페이지를 넘어가거나 잘리는 문제는 빈번하게 발생합니다. 특히 CSS를 활용하여 PDF를 생성할 때 페이지 분리가 적절히 처리되지 않으면 문서의 가독성과 품질이 저하될 수 있습니다. 이 글에서는 PDF 페이지 분리와 관련된 주요 CSS 기법과 최적화 방법에 대해서 테스트 해보며 알아본 내용에 대해서 정리합니다.1. 기본 초기화: Margin과 Padding 초기화PDF 스타일링에서 레이아웃이 예기치 않게 흐트러지는 문제를 방지하려면 모든 요소의 기본 margin과 padding을 초기화하는 것이 중요합니다.* { margin: 0; padding: 0;}일부 라이브러리는 margin과 padding을 강제로 변경하기 때문에, 초기화 설정을 통해 이후 발생할 이슈를 사전에 .. 2024. 9. 4.
MSW를 이용한 Mock API 구현 백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다..백엔드 API가 완전히 준비되기 전에 프론트엔드 개발을 시작해야 할 때, Mock API는 효율적인 대안이 될 수 있습니다. **MSW(Mock Service Worker)**는 API 요청을 가로채서 사전에 정의된 Mock 데이터를 반환하도록 도와주는 라이브러리입니다. 이 글에서는 MSW를 활용해 Mock API를 구현하는 과정을 단계별로 설명합니다.1.. 2024. 5. 22.
Textarea 높이 자동 조절 Textarea의 높이를 입력에 맞춰서 자동으로 변경하고 싶을 때는 아래와 같이 할 수 있습니다..auto-height { width: 100%;}.auto-height textarea { width: 100%; resize: none; overflow-y: hidden; padding: 15px 15px 5px; line-height: 1.5;}  메모  $(document).ready(function() { $('.auto-height').on('keyup', 'textarea', function (){ $(this).css('height', 'auto'); $(this).height( this.scrollHeight ); .. 2022. 11. 15.
React 페이지 이동 Snack bar React에서 페이지 이동이 가능한 스넥바의 동작을 위하여sanckBar.js hook을 생성 후 아래와 같은 내용을 넣어준다.import React from 'react';import { useSnackbar } from "notistack";import Button from "@mui/material/Button";import {useNavigate} from "react-router-dom";const snackBar = () => { const { enqueueSnackbar, closeSnackbar } = useSnackbar(); const nav = useNavigate(); const showSnackbar = (e) => { const action = () .. 2022. 11. 10.
React Class 컴포넌트에서 navigate 동작 방법 먼저 withRouter.js 라는 이름의 Hook을 생성 후 아래와 같은 내용을 입력해준다.import * as React from "react"import {useNavigate} from 'react-router-dom';export const withRouter = (Component) => { const Wrapper = (props) => { const navigate = useNavigate(); return ( ); }; return Wrapper;};그 후 Class 컴포넌트 파일 안에서아래와 같이  props의 navigate에 이동하고자 하는 페이지를 넣고 Class 컴포넌트를 withRouter로 감싸주면 된.. 2022. 11. 10.
React 스크롤 Top 이동 react에서 페이지의 스크롤 top 버튼및 이벤트를 추가하기 위해선아래와 같은 내용의 ScrollToTop.js 파일을 생성 후import { useEffect } from "react";import { useLocation } from "react-router-dom";export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null;}index.js 파일에 아래와 같이 Router 안에 선언하여 모든 화면에 적용시킬 수 있다.if (!!rootElement && rootEle.. 2022. 11. 10.

티스토리툴바