현재 하고 있는 프로젝트에서 좋아요 버튼을 구현하려고 한다. 🧩 요구사항게임 목록 페이지에서 특정 게임 카드를 클릭하면 이러한 게임 상세 모달이 뜨는 구조이다. API 응답받은 좋아요 여부에 따라 isLiked가 true면 채워진 좋아요 아이콘을, false면 비워진 좋아요 아이콘을 띄운다. 이런 식으로.. 좋아요 버튼 옆에는 좋아요 개수도 같이 표시한다. 🚀 옵티미스틱 업데이트(Optimistic Update) 방식원래 그냥 구현하면 좋아요 버튼을 클릭하면 → 백엔드에 요청을 보내고 → 응답이 성공하면 업데이트하는 방식이다.모르는 정보들을 불러오는 것도 아니고 그저 좋아요 on/off인데 응답이 올 때까지 기다려야 하면 사용자 입장에서 답답할 수 있다.Optimistic Update 방식은 백엔드..

📍 img 태그 - srcimport Icon from '@/assets/icons/icon.svg';... ...import한 이미지를 단순히 img 태그에 사용한다간편하지만 svg 파일의 색상을 변경할 수 없다 📍 ReactComponentimport { ReactComponent as Icon } from '@/assets/icons/icon.svg';... ...svg를 컴포넌트화하면 색상을 변경할 수 있다. svg 파일에서 바꾸고자 하는 요소를 current로 바꿔야 커스텀이 가능하다. 📍 svgr나는 vite를 사용하기에 vite를 사용하는 방법으로 소개하겠다.vite 프로젝트에서 svg 파일을 React 컴포넌트처럼 import 할 수 있는 라이브러리를 사용한다. 🔨 세팅하기패키지 설..

무언가 작업을 했을 때 즉각적인 피드백을 제공하기 위해 toast를 사용했다. 사용자에게 경고 등을 표시할 때 alert을 쓸 수도 있지만, alert보다는 toast가 더 예뻐서 toast를 쓰려고 한다.또한, alert은 사용자가 직접 닫아야 하지만 toast는 디자인/스타일/조작 방법 등 커스터마이징해서 사용할 수 있다. 🎈 패키지 설치yarn add react-toastify 🎈 사용하기import {toast, ToastContainer} from 'react-toastify';import 'react-toastify/dist/ReactToastify.css';function App() { const handelButtonClick = () => { toast.error('경고입니다...

🎈 react-signature-canvas 패키지 설치yarn add react-signature-canvas 🎈 서명 컴포넌트 구현import {useRef} from 'react';import SignatureCanvas from 'react-signature-canvas';const SignaturePad = () => { const canvas = useRef(null); const handleCanvasClear = () => { canvas.current?.clear(); }; export default SignaturePad; 🎈 활용편🔨 화면 사이즈 변화하면 입력값이 리셋되는 경우SignatureCanvas props에 추가clearOnResize={false} 🔨 ..

🖥️ React란?Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술 🖥️ React 특징1. 컴포넌트를 기반으로 UI를 표현한다컴포넌트 (Component)화면(UI)을 구성하는 구성 요소 2. 화면 업데이트 구현이 쉽다업데이트사용자의 행동(클릭, 드래그)에 따라 웹 페이지가 스스로 모습을 바꿔 상호작용 하는 것 선언형 프로그래밍 vs 명령형 프로그래밍 선언형 프로그래밍 명령형 프로그래밍 과정은 생략하고 목적만 간결히 명시하는 것목적을 이루기 위한 모든 일련의 과정을 설명하는 방식마치 우리가 식당에서 주문하는 것과 유사함“토마토 파스타 하나 주세요”토마토 파스타를 만드는 방식은 모르겠고, 아무튼 토마토 파스타..

🚨 문제 상황Next.js로 x(구 트위터) 클론코딩하는 강의를 듣는 중 문제가 발생했다.나는 분명 강의 코드를 복사해서 내 프로젝트에 붙여 넣었는데 강의처럼 작동하지 않았다. 'use client';import { useRouter } from 'next/navigation';import Main from '@/app/(beforeLogin)/_component/Main';export default function Login() { const router = useRouter(); router.replace('/i/flow/login'); return ;}코드는 이런 단순한 코드이다.클라이언트에서 로그인 페이지(/login)로 접근할 경우, 내부적으로 router.replace('/i/flow/..

🔍 Control Props 패턴이란?이전 글에서 Compound Component 패턴에 대해 알아봤다.컴파운드 컴포넌트 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이었다. Control Props 패턴은 컴포넌트가 자체 상태를 가질 수도 있고, 부모가 상태를 제어할 수도 있게 만드는 패턴이다.input, select, modal, toggle 등 상태를 외부에서 완전히 제어할 수 있게 해야 하는 컴포넌트에서 사용된다. 🧩 예제 코드이전 글에서 활용한 예제 코드를 수정하여 실습해 보자.Toggle.tsximport { createContext, useContext, useState, ReactNode } from 'react';type ToggleContextType ..

🔍 Compound Component 패턴이란?Compound Component(컴파운드 컴포넌트) 패턴은 부모와 자식 컴포넌트가 자연스럽게 협력하는 구조를 만들기 위한 패턴이다.부모가 Context를 제공하고, 자식 컴포넌트들이 props 없이 그 상태를 자유롭게 사용할 수 있다.이 패턴은 Select, Accordion, Tabs, Modal Step Form과 같은 UI를 구성할 때 자주 사용된다.Toggle 예제를 통해 이 패턴을 이해하고, Context의 역할을 알아보자. 🔍 Context란?Context는 여러 컴포넌트들이 데이터를 공유할 수 있도록 도와주는 기능이다.React에서는 일반적으로 부모 컴포넌트에서 자식으로 데이터를 props를 통해 넘긴다.하지만 컴포넌트 깊이가 깊어질수록 이..