분류 전체보기 (36) 썸네일형 리스트형 [React 19] useFormStatus로 더 똑똑한 폼 UI 만들기 들어가며폼을 다루다 보면 로딩 상태 관리가 늘 골치 아프죠?버튼은 비활성화하고, 스피너는 보여주고... 이런 보일러플레이트 코드에 지치셨다면,React 19의 `useFormStatus`가 여러분의 구원자가 될 거예요! 😊 useFormStatus란? 🤔`useFormStatus`는 React의 Form Action과 함께 사용되는 훅으로, 폼의 제출 상태를 자동으로 추적합니다.더 이상 로딩 상태를 수동으로 관리할 필요가 없어요! 기본 사용법 📝```tsximport { useFormStatus } from 'react-dom'; function SubmitButton() { const { pending, data, method } = useFormStatus(); return ( .. [React 19] useOptimistic으로 낙관적 UI 구현하기 - 좋아요 버튼 UX 개선하기 들어가며몇 달 전, React Query로 낙관적 UI를 구현하면서 꽤나 고민했던 기억이 있습니다.그런데 React 19에서 소개된 useOptimistic을 보고 "아, 이거였구나!" 하는 깨달음을 얻었어요.오늘은 제가 겪었던 문제를 React 19의 새로운 훅으로 어떻게 더 우아하게 해결할 수 있는지 이야기해보려 합니다! 😊문제 상황: 느린 좋아요 버튼 🐢인스타그램 스타일의 좋아요 기능을 구현하면서 마주쳤던 문제는 다음과 같았어요:서버 응답을 기다리느라 버튼 반응이 느림 (1-2초)연속 클릭 시 처리가 까다로움사용자 경험이 매끄럽지 않음useOptimistic으로 해결하기 ⚡1. 기본 구현function LikeButton({ postId }: { postId: string }) { const .. [React 19] useActionState로 서버 상태 관리하기 들어가며React 19에서 새롭게 소개된 useActionState는 서버 액션의 상태를 우아하게 관리할 수 있게 해주는 강력한 훅입니다.React Query(TanStack Query)에 익숙하신 분들이라면 더욱 반가우실 것 같네요! 😊useActionState란? 🤔useActionState는 서버 액션의 전체 생명주기를 관리하는 훅으로, 다음과 같은 상태를 제공합니다:pending: 액션 실행 중 여부error: 발생한 에러 정보data: 성공 시 반환된 데이터기본 사용법 📝import { useActionState } from 'react';// 서버 액션 정의async function submitComment(formData: FormData) { 'use server'; const c.. [React 19] useTransition으로 더 부드러운 UI 구현하기 들어가며React 애플리케이션을 개발하다 보면 무거운 작업으로 인해 UI가 버벅이는 경험을 해보셨을 거예요.오늘은 이런 문제를 해결할 수 있는 useTransition 훅에 대해 자세히 알아보겠습니다! 😊useTransition이란? 🤔useTransition은 우선순위가 낮은 상태 업데이트를 표시하는 React 훅입니다.이 훅은 두 가지 값을 반환합니다:isPending: 전환이 진행 중인지 여부startTransition: 우선순위가 낮은 업데이트를 시작하는 함수기본 사용법 📝import { useTransition } from 'react';function SearchComponent() { const [isPending, startTransition] = useTransition(); c.. [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( (.. [React] 렌더링 최적화하기 - React.memo 현명하게 사용하기 들어가며React 애플리케이션에서 불필요한 리렌더링은 성능 저하의 주요 원인입니다. React.memo는 이러한 문제를 해결할 수 있는 강력한 도구지만, 무분별한 사용은 오히려 성능을 저하시킬 수 있습니다. 언제, 어떻게 React.memo를 사용해야 할지 알아보겠습니다.React.memo가 필요한 이유// 부모 컴포넌트가 리렌더링될 때마다 자식 컴포넌트도 불필요하게 리렌더링됩니다const ParentComponent = () => { const [count, setCount] = useState(0); return ( setCount(count + 1)}> Count: {count} );};React.memo 기본 사용법1. 간단한 사용 .. [Git] 실수로 올린 커밋 되돌리기 - reset, revert 차이점 들어가며Git을 사용하다 보면 "앗!" 하는 순간이 있습니다. 중요한 정보를 실수로 커밋했거나, 잘못된 코드를 푸시했을 때죠.이런 상황에서 사용할 수 있는 git reset과 revert의 차이점과 적절한 사용법을 알아보겠습니다.git reset vs git revert간단히 말하면:git reset: 커밋 히스토리를 실제로 지웁니다 (혼자 작업하는 브랜치에 적합)git revert: 새로운 커밋을 만들어 변경사항을 되돌립니다 (협업하는 브랜치에 적합)git reset 사용하기1. reset의 세 가지 모드# 1. Soft Reset: 커밋만 되돌리고 변경된 파일은 스테이징 영역에 유지git reset --soft HEAD~1# 2. Mixed Reset (기본값): 커밋과 스테이징을 되돌리고 변경된 파.. [Error] EPERM: operation not permitted, scandir 해결 방법 문제 발생 오랫만에 vscode로 확인할게 있어서 평소처럼 `yarn dev` 명령어를 통해 작업 중이던 프로젝트를 실행했다. 그런데 다음과 같은 에러가 발생하고 동작하지 않았다. `[Error] EPERM: operation not permitted, scandir ... ` 원인 Mac으로 금융 업무를 보려는 시도로 인하여 시스템 설정을 잘못 건드렸었다. 해결 방법 1. 시스템 설정 > 개인정보 보호 및 보안 > 전체 디스크 접근 권한 2. Visual Studio Code 접근 허용 vscode를 찾아서 스위치를 on으로 켜주고 프로그램 재실행을 한다. 결론 시스템에서 막은 파일 스캔 에러라는 문구를 보고 바로 이런 간단한 문제였단걸 알 수 있지 않았을까... 조금씩 성장 중 이전 1 2 3 4 다음
