본문 바로가기

전체 글54

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.
SEO 성능 개선을 위한 Lazy Load 및 이미지 사전 블러 렌더링 구현 SEO 성능과 사용자 경험(UX)을 개선하기 위해 이미지를 Lazy Load 방식으로 로드하고, 렌더링 중 블러 처리된 작은 이미지를 표시하며, 원본 이미지는 뷰포트에 들어오면 로드하도록 구현했습니다. 이 글에서는 해당 기능의 구현 방법과 주요 코드 로직을 설명합니다.주요 기능 설명Lazy Load:이미지를 뷰포트(viewport) 영역 내에 들어왔을 때만 로드하여 불필요한 네트워크 요청을 줄입니다.IntersectionObserver를 활용하여 효율적으로 뷰포트 내 이미지 감지.블러 처리된 사전 렌더링:원본 이미지를 로드하기 전에 블러 처리된 50x50 작은 이미지를 보여줍니다.원본 이미지를 로드한 후 블러를 제거하여 자연스러운 전환.반응형 및 디바이스 최적화:디바이스 유형(모바일, 데스크톱)에 따라 .. 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.

티스토리툴바