xu의 성장일지

// 검색 버튼 클릭 시 실행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..

오늘은 S3와 Cloudfront를 활용해서 React 프로젝트를 한 번 배포해 보겠습니다. 먼저 CloudFront에 대해 알아보겠습니다.CloudFrontAWS CloudFront는 콘텐츠 전송 네트워크(CDN) 서비스입니다.CDN은 사용자와 가까운 서버에서 데이터를 제공하여 웹사이트, 애플리케이션, 또는 미디어 파일을 빠르고 안전하게 전송하도록 돕습니다. CloudFront는 전 세계 엣지 로케이션(Edge Location)을 활용해 속도와 안정성을 보장합니다. CloudFront의 주요 기능1. 빠른 콘텐츠 제공: 전 세계에 위치한 엣지 로케이션을 통해 사용자가 가까운 서버에서  콘텐츠를 전달 받음.2. 보안 강화: HTTPS를 지원하고, AWS Shield와 통합하여 DDoS 공격을 방어함.3...

안녕하세요.벌써 React 미니 프로젝트가 마무리 되었습니다.5단계 미션은 배포하는 것 뿐이라서 4단계와 같이 작성할 생각입니다! 4단계 미션은 바로 Supabase를 이용한 회원가입, 로그인, 소셜로그인 및 북마크 기능 구현 입니다!(정말... 정말 어려웠습니다. ㅜㅜ)이번에 제가 구현한 기능은1. 회원가입 구현하기2. 로그인/로그아웃 구현하기3. 소셜 로그인 (카카오) 구현하기4. 북마크 기능 구현하기5. netlify를 통해 배포하기입니다!가장 어려웠던 건... 제가 supabase 자체를 처음 써봐서 그냥 모든게 다 어려웠어요. ㅠㅠ 허엉그래도 한 번 해봅시다......https://supabase.com/ Supabase | The Open Source Firebase AlternativeBui..

3번째 미션도 무사히 마무리 하였습니다!원래는 어제 블로그를 작성했어야 했는데.... 주말이라는 이유로 하루 미뤘습니다 ㅎㅎ3단계 미션은 Nav-bar 검색 기능 구현 및 반응형 디자인 입니다!! 저는 처음에 사이트를 구현하면서부터 반응형 디자인을 신경쓰며 CSS를 만졌기 때문에,이번 미션에서는 검색 기능 구현이 주된 미션이었던 것 같습니당제가 이번에 구현한 기능은1. Nav-bar 검색 기능 구현하기 (API 사용) 2. 다크모드/라이트모드 구현3. 메인 페이지에 들어갈 현재 상영 중 영화 컴포넌트 만들기4. CSS 수정입니다 _^_ 1. Nav-bar 검색 기능 구현하기 (API 사용)Nav-bar에서 검색 기능을 구현하려면, 따로 API가 있더라구요!엔드포인트는  /search/movie 이고, q..