xu의 개발일지

내가 헷갈리는 훅들인 useRef, useMemo, useCallback에 대해서 정리하려고 한다.useRef1. 무엇을 기억? : 변경 가능한 값 혹은 DOM 요소의 참조2. 렌더링에 영향? : 값이 바뀌어도 컴포넌트는 다시 렌더링되지 않음3. 렌더와 상관없이 값을 저장할 때 사용 (ex. 타이머 ID, 이전 상태값 저장) / DOM 엘리먼트에 직접 접근할 때 (ref 연결)import { useRef } from "react";function Timer() { const timerId = useRef(null); const startTimer = () => { timerId.current = setInterval(() => { console.log("Tick"); }, 1000..

MUI에서 제공하는 Typography 컴포넌트는 UI 라이브러리나 디자인 시스템에서 글자를 일관된 스타일로 표시하기 위해 제공하는 컴포넌트이다.→ "제목은 이렇게, 본문은 이렇게"특징1. 일관성 유지- 디자이너가 정의한 폰트 크기, 굵기, 줄 간격을 컴포넌트로 묶어 페이지 전체에서 같은 스타일 보장!2. 접근성 개선- HTML 시맨틱 태그와 스타일을 함께 관리해, 스크린 리더나 SEO에도 유리3. 재사용성- 여러 화면에서 동일한 타이포 스타일을 쉽게 불러다 쓰기 좋음! import Typography from '@mui/material/Typography';// orimport { Typography } from '@mui/material';이렇게 import 해서 사용할 수 있다.다양한 Propsva..

포트폴리오 페이지를 만들려는데, 스크롤 기반으로 동작되도록 하고 싶었다.일단 필요한 기능은1. 스크롤 시 경로 변경2. 메뉴 클릭 시 해당 섹션으로 이동3. 특정 페이지(메인, 마지막)에선 메뉴 숨김const mainRef = useRef(null); // 타입 명시const aboutMeRef = useRef(null);const projectRef = useRef(null);const experienceRef = useRef(null);const contactRef = useRef(null);useRef로 각 세션의 DOM을 저장한다.이걸 이용해서 scrollntoView()로 해당 섹션으로 스크롤 하거나, IntersectionObserver로 감시할 수 있다.useRef리액트 컴포넌트에서 DOM ..

// 검색 버튼 클릭 시 실행const searchHandler = () => { if (!selectedProvider) globalSearch("전체", selectedTag, selectedTerm); else globalSearch(selectedProvider, selectedTag, selectedTerm); // 통합 검색의 경우 통합 검색 페이지로 이동 if (type === "header") { router.push(`/global-search`); }};기존에는 배급사와 입력한 태그, 입력한 검색어를 바탕으로 globalSearch를 호출해서 검색 API를 호출했었다.이렇게 호출해서 스토어에 검색어들도 저장해놓고, 이걸 다시 불러와서 검색창에 적용해놨..

Swiper.js 라이브러리를 사용해서 반응형 슬라이더를 구현해 보았다.Swiper는 브라우저에서만 동작하는 라이브러리라서, 'use client'를 선언하여 클라이언트 컴포넌트로 지정해야 사용이 가능했다.// Swipers.tsx"use client";import React, { ReactNode } from "react";import { Swiper, SwiperSlide } from "swiper/react";import { Pagination, Navigation, Autoplay } from "swiper/modules";import "swiper/css";import "swiper/css/navigation";import "swiper/css/pagination";interface Swiper..

카카오 소셜 로그인은1. /social/kakao/login 으로 이동하여 인증 진행2. 받아온 code로 /social/kakao/callback에 GET 요청 보내서 토큰 받기3. 토큰은 쿠키에 저장4. 로그인 성공 후 토큰으로 유저 정보 GET 요청으로 받아옴5. 유저 정보 Redux에 저장이런 흐름으로 진행하였다. // sign-inconst handleLogin = (provider: string) => { switch (provider) { case 'kakao': // 서버의 카카오 로그인 엔드포인트로 이동 window.location.href = 'kakao login endpoint'; // 해당 페이지로 리디렉션 break; case 'google..

RTK Query로 로그인 API 구현하고 RTK로 유저 정보 관리하기RTK (Redux Toolkit)Redux의 공식적인 도구 모음으로, 복잡한 상태 관리 로직을 간단하고 효율적으로 작성하도록 돕는다.RTK 상태 관리 기본 흐름1. createSlice로 상태와 리듀서 정의- 상태의 초기값 (initialxuwon.tistory.com↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑ ↑로그인을 성공하면 access token으로 유저 정보를 받아와서 Redux에 저장하는 것까지 구현했다.이걸로 이제 유저 정보를 회원정보 수정 페이지에서 불러오려고 했으나...새로고침 및 페이지 이동이 이루어지자 Redux가 깔끔하게 비워졌다. redux-persist알고보니 원래 그렇다는 것!redux-persist ..

RTK (Redux Toolkit)Redux의 공식적인 도구 모음으로, 복잡한 상태 관리 로직을 간단하고 효율적으로 작성하도록 돕는다.RTK 상태 관리 기본 흐름1. createSlice로 상태와 리듀서 정의- 상태의 초기값 (initialState) 정의- 상태를 변경할 리듀서 함수 작성- createSlice 호출로 액션과 리듀서 생성import { createSlice, PayloadAction } from '@reduxjs/toolkit';type CounterState = { value: number;};const initialState: CounterState = { value: 0 };const counterSlice = createSlice({ name: 'counter', // sli..

RTK QueryRedux Toolkit의 강력한 데이터 패칭 및 캐싱 라이브러리1. 데이터 패칭 및 캐싱2. 자동 상태 관리- API 요청의 상태(isLoading, isSuccess, isError, isFetching 등)를 자동으로 관리- 수동으로 로딩 상태를 설정하거나 에러를 처리할 필요 X3. 데이터 변조 지원- POST, PUT, DELETE 요청과 같은 데이터 변조 작업도 간단히 구현 가능4. React Hooks 자동 생성- API 엔드포인트 정의만 하면 React Hooks가 자동으로 생성됨.- 이를 통해 컴포넌트에서 쉽게 API를 호출할 수 있음. RTK Query의 주요 구성 요소1. createApiAPI 서비스 로직을 정의하는 데 사용import { createApi, fetch..

전에 회원가입, 로그인 페이지를 만들 때는 직접 유효성 검사 코드를 작성했었는데,이번에는 react-hook-form과 zod를 활용해서 진행했다. react-hook-formReact에서 폼을 효율적으로 관리하기 위한 라이브러리. 1. 폼 상태 관리- useState 없이 폼 상태를 관리하여 성능 최적화2. 간편한 유효성 검사- zod, Yup 등의 스키마를 통해 유효성 검사 가능3. 최소한의 리렌더링- 입력 필드마다 독립적으로 상태를 관리하여 불필요한 리렌더링 방지!4. 타입스크립트 지원 react-hook-form 핵심 개념// register// 입력 필드를 react-hook-form에 등록!// handleSubmit// 폼 제출 시 데이터를 검증!// 제출 시 실행할 콜백 함수 호출// fo..