hr0513 님의 블로그

Vercel 설치 및 배포 가이드에 대해 포스팅하려구 해요1. Vercel 설치npm install -g vercel 2. Vercel 로그인vercel login성공적으로 로그인하면 위와 같은 화면이 나타납니다3. 프로젝트 배포배포하려는 프로젝트 디렉토리로 이동한 후 아래 명령어를 실행합니다.vercel배포가 성공적으로 완료되면, Vercel 대시보드에서 배포된 프로젝트를 확인할 수 있어요Vercel 사이트에서 로그인 후 프로젝트가 추가되었는지 확인해 주세요 4. vercel Authentication 비활성화 1. Settings > Deployment Protection 접속2. Vercel Authentication을 비활성화활성화되어 있으면, URL에 접근할 때, GitHub 로그인 후 접속하라..

안녕하세요, hr0513입니다!요즘 카카오맵을 리액트 프로젝트에 넣어야 해서, react-kakao-maps-sdk 라이브러리를 사용해봤어요.이번에는 그 과정을 공유하려고 해요. 카카오맵을 리액트에서 쉽게 사용할 수 있는 방법을 알려드릴게요!1. 설치하기먼저, react-kakao-maps-sdk 라이브러리를 설치해야 해요. 터미널에 아래 명령어를 입력해서 설치해 주세요.npm install react-kakao-maps-sdk  그 다음, 카카오맵 API 샘플 문서도 참고할 수 있는 아래 링크를 참고하시면 좋습니다!https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/ Index | react-kakao-maps-sdk docsKakao Maps Api Sa..

보호되어 있는 글입니다.

React Query란?React Query는 서버 상태 관리를 쉽게 해주는 라이브러리로, 캐싱, 동기화, 백그라운드 데이터 가져오기 등을 간편하게 처리할 수 있습니다.React Query 설치React Query는 @tanstack/react-query 패키지를 설치하여 사용할 수 있습니다. 다음 명령어를 사용해 설치합니다.# npm 사용 시npm install @tanstack/react-query# yarn 사용 시yarn add @tanstack/react-query QueryClient 설정React Query를 사용하려면 QueryClient를 생성하고 QueryClientProvider로 감싸야 합니다.import { QueryClient, QueryClientProvider } from "..

커스텀 훅(Custom Hook)이란?리액트(React)에서 커스텀 훅(Custom Hook) 은 여러 컴포넌트에서 재사용할 수 있는 로직을 함수로 추출한 것입니다. 기본적인 훅(useState, useEffect 등)을 조합하여 특정 기능을 수행하는 커스텀 훅을 만들면, 코드의 재사용성을 높이고 가독성을 향상시킬 수 있습니다. 이번 글에서는 로컬 스토리지(localStorage)를 활용하여 다크 모드 상태를 저장하는 커스텀 훅을 만들어 보겠습니다.로컬 스토리지와 다크 모드웹사이트에서 다크 모드(Dark Mode) 를 구현할 때, 사용자의 설정을 유지하는 것이 중요합니다. 그렇지 않으면 페이지를 새로고침할 때마다 모드가 초기화되어 사용자 경험이 떨어질 수 있습니다. 이를 해결하기 위해 로컬 스토리지(lo..

Context API에 대해 정리해 볼게요.React에서 상태를 관리할 때, 보통 props를 이용하여 부모에서 자식 컴포넌트로 데이터를 전달합니다. 하지만 컴포넌트의 깊이가 깊어질수록 props drilling(프로퍼티를 계속 전달하는 문제)이 발생합니다. 이를 해결하기 위해 Context API를 사용하면, 전역적으로 상태를 관리하고 필요한 곳에서 바로 가져올 수 있습니다.Context API 기본 개념Context API는 크게 3가지 요소로 구성됩니다.createContext() - Context 생성Provider - 데이터를 제공하는 역할Consumer 또는 useContext - 데이터를 사용하는 역할Context API 사용 방법1️⃣ Context 생성하기 (UserContext.js)i..

useReducer는 상태가 여러 개일 때, 복잡한 상태 변화 로직을 처리할 때 유용한 React Hook입니다. 주로 여러 개의 상태 값을 한 번에 관리해야 할 때 사용되며,상태 업데이트가 특정 규칙을 따르는 경우 유용하게 사용할 수 있습니다. 아래 예시는 useState와 useReducer를 각각 사용한 예제를 통해 그 차이를 비교해보겠습니다. 1. useState를 사용한 상태 관리useState는 간단한 상태를 관리할 때 유용하지만,상태가 많거나 여러 상태가 서로 연관되어 있을 경우 관리가 복잡해질 수 있습니다. 예를 들어, 데이터를 가져오는 과정에서 로딩 상태, 에러 상태,그리고 실제 데이터 상태를 관리할 때 useState를 사용하면 아래와 같은 코드가 됩니다. Post.jsximport R..

React에서 Jest로 테스트 환경을 구축하는 방법을 정리해볼게요 Jest & 필수 패키지 설치기본적인 Jest 설정을 위한 패키지yarn add --dev jest @types/jestyarn add --dev @testing-library/react @testing-library/jest-domyarn add --dev @babel/preset-env @babel/preset-reactyarn add --dev identity-obj-proxy이렇게 하면 Jest와 React 테스트 환경을 갖출 수 있어요1. 한 번에 설치하는 방법yarn add --dev @testing-library/react @testing-library/jest-dom jest jest-environment-jsdom @ba..

Redux 미들웨어 사용법에 대해 정리해 보려구 해요미들웨어는 중간에서 확인하고 처리해주는 역할을 합니다.Redux에서 미들웨어는 어디에 쓰일까?Redux에서는 액션이 리듀서로 가기 전에 미들웨어가 중간에서 그걸 확인하고 처리할 수 있습니다. 예를 들면,📍 로그를 남긴다지금 어떤 액션이 발생했는지 기록하기📍 비동기 작업을 처리서버에서 데이터를 가져오고 기다리는 기능 추가📍 에러 감지문제가 있으면 경고를 띄우기 🎮 미들웨어를 직접 만들어보자!  const myMiddleware = store => next => action => { console.log("미들웨어가 액션을 받았어요:", action); return next(action); // 다음 단계로 액션을 넘겨줌}; 💡 위 코드에너 s..

주소에 맞게 적절한 페이지를 로드하는 Routing에 대해 정리해 보겠습니다. https://reactrouter.com/home React Router Home | React Router reactrouter.com1. React Router 설치React 프로젝트에서 React Router를 사용하려면 react-router-dom 패키지를 설치해야 합니다.npm install react-router-dom2. 기본 설정 [main.jsx 또는 index.js]애플리케이션에서 React Router를 사용하려면, 최상위 컴포넌트에서 BrowserRouter를 감싸야 합니다.import { StrictMode } from 'react';import { createRoot } from 'react-dom..