본문 바로가기

반응형

전체 글

(32)
[npm/yarn] package.json 스크립트 명령어 예시 들어가며package.json의 scripts 필드는 단순한 명령어 모음이 아닌, 개발 생산성을 크게 높여주는 강력한 도구입니다.오늘은 실무에서 바로 활용할 수 있는 유용한 스크립트 팁들을 알아볼게요. 😊기본적인 스크립트 활용1. 기본 스크립트 구조{ "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }}실용적인 스크립트 팁들 🚀1. 병렬 실행과 순차 실행{ "scripts": { // 순차 실행 (&&) "build:sequence": "npm run clean && ..
[JavaScript] 디바운스와 쓰로틀링 구현하고 활용하기 들어가며안녕하세요! 오늘은 프론트엔드 개발자라면 반드시 알아야 할 디바운스(Debounce)와 쓰로틀링(Throttling)에 대해 알아볼게요.스크롤 이벤트나 검색 입력 등에서 성능 최적화가 필요하다면, 이 두 기법은 여러분의 강력한 무기가 될 거예요! 😊디바운스와 쓰로틀링이 필요한 이유먼저, 문제 상황을 한번 볼까요?// 😱 이런 코드는 성능 저하의 지름길입니다!window.addEventListener('scroll', () => { // 스크롤할 때마다 실행되는 무거운 작업 doSomethingHeavy();});// 🤔 검색창에서도 문제가 발생해요searchInput.addEventListener('input', () => { // API 호출이 입력할 때마다 발생! searchAPI..
[JavaScript] axios 인터셉터로 전역 에러 처리하기 들어가며API 요청 시 발생하는 에러를 각 컴포넌트에서 개별적으로 처리하다 보면 코드가 중복되고 관리가 어려워집니다. axios 인터셉터를 활용하면 이러한 에러 처리를 전역적으로 깔끔하게 관리할 수 있습니다.axios 인터셉터 설정하기1. 기본 인스턴스 생성// src/api/axios.tsimport axios from 'axios';export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, timeout: 5000, headers: { 'Content-Type': 'application/json', },});2. 요청(Request) 인터셉터instance.interceptors.request.use( (..