Vercel 배포, 누르기 전에 딱 5분만 확인!

React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다.  하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 17.
• textsms

[React] 웹 스토리지 (Web Storage)

React의 상태(state)는 기본적으로 자바스크립트 변수에 저장되기 때문에 페이지를 새로고침하거나 브라우저를 닫으면 초기화됩니다.하지만 웹 스토리지(Web Storage)를 활용하면 데이터를 브라우저에 저장하여 새 로고침해도 유지할 수 있습니다.데이터를 영구적으로 보관하려면 외부 데이터베이스를 사용해야 하지만,간단하게 데이터를 저장하고 관리하는 방법으로 웹 스토리지를 활용하는 것이 좋습니다.01웹 스토리지 란?웹 스토리지는 웹 브라우저에 기본적으로 내장된 데이터 저장소입니다.따로 라이브러리를 설치하지 않고, 자바스크립트 내장 함수만으로 쉽게 데이터를 저장하고 불러올 수 있습니다.주요특징으로는브라우저가 기본적으로 제공하는 데이터 저장소별도 설치 없이 자바스크립트 내장 함수로 접근 가능새 로고침해도 데이..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 16.
• textsms

[React] 페이지 라우팅 (Routing)

웹 개발을 하다 보면 페이지 이동이 필요할 때가 많습니다. React에서도 이런 페이지 이동을 구현할 수 있는데요, 이를 "라우팅(Routing)"이라고 합니다. 이번 글에서는 라우팅이 무엇인지, 그리고 React에서 어떻게 라우팅을 설정하는지 쉽게 설명해 드릴게요!01페이지 라우팅이란?라우팅은 사용자가 특정 URL(경로)로 이동하면, 해당하는 페이지를 화면에 보여주는 것을 의미합니다. 예를 들어, /home 경로를 입력하면 홈페이지가, /about 경로를 입력하면 소개 페이지가 보이는 식이죠.1. MPA (Multi Page Application) 방식전통적인 웹사이트는 MPA 방식으로 동작합니다. 즉, 서버가 여러 개의 HTML 파일을 미리 가지고 있으며, 사용자가 특정 페이지를 요청하면 서버가 해당..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 13.
• textsms

[React] 컨텍스트 (Context)

React에서 props만으로 데이터를 전달할 때 불편한 점이 많습니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하려면,중간 단계에 있는 모든 컴포넌트가 불필요하게 props를 받아야 하는 문제가 발생합니다. 이 문제를 해결하기 위해 React는 Context API라는 기능을 제공합니다.이 글에서는 Context의 개념부터 사용법, 최적화 방법까지 하나씩 알아보겠습니다.01Context가 필요한 이유1. Props의 단점: Props DrillingReact에서 컴포넌트 간 데이터를 전달할 때 보통 props를 사용합니다.하지만 부모 → 자식 → 손자로 props를 계속 전달해야 하는 경우,중간 단계의 컴포넌트들이 불필요한 props를 받아야 하는 문제가 발생합니다.이러한 현상을 Props Dri..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 10.
• textsms

[React] 최적화 함수 1탄 (useMemo, React.memo, useCallback)

01최적화(Optimization)React는 상태(state)나 props가 변경될 때마다 컴포넌트를 다시 렌더링 합니다.이 과정이 반복되면 성능이 저하될 수 있기 때문에 최적화(Optimization)가 필요합니다. React에서 사용할 수 있는 최적화 기법에는 크게 3가지가 있습니다.불필요한 연산 방지 → useMemo불필요한 렌더링 방지 → React.memo불필요한 함수 재생성 방지 → useCallback이제 각각의 개념을 하나씩 살펴보겠습니다.02useMemo - 불필요한 연산 방지useMemo는 메모이제이션(Memoization) 기법을 활용하여 불필요한 연산을 방지하는 React 훅입니다. ✅ 메모이제이션(Memoization)이란?이전에 계산한 값을 저장해 두고, 필요할 때 다시 꺼내 ..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 10.
• textsms

[Project] TODO LIST

01UI 구현1. 폴더구조 잡기먼저 컴포넌트의 역할을 명확히 구분하기 위해 폴더 구조를 설계했습니다.각 컴포넌트가 독립적으로 관리될 수 있도록 /components 폴더를 만들고 기능별 디렉터리를 생성했습니다. 각 폴더에는 index.jsx파일을 배치해서 import 경로를 단순화했습니다.이렇게 하면 코드가 모듈화 되어각 컴포넌트를 독립적으로 관리할 수 있게 됩니다. 또한 CSS는 module.css 파일을 활용해 스타일 충돌 방지를 했습니다.\---src |---App.css | App.jsx | index.css \---components +---header //상단 헤더 | index.jsx ..

• format_list_bulleted DEVELOPMENT/PROJECTS
• · 2025. 2. 6.
• textsms

[React] 이벤트 핸들링 (Event Handling)

React에서 이벤트 핸들링은 사용자가 웹에서 하는 행동을 처리하는 방법입니다.예를 들어 버튼 클릭, 스크롤, 키 입력 등이 이벤트로 발생할 수 있죠.이 이벤트들을 처리하기 위해 React에서는 이벤트 핸들러를 사용합니다.01이벤트 핸들링이란Event: 웹에서의 이벤트는 사용자의 행동을 의미합니다.예를 들어, 버튼 클릭, 마우스 오버, 입력 폼 작성, 스크롤 등 다양한 사용자 동작이 이에 해당합니다. Handling: Handling은 '다루다', '처리하다'는 뜻입니다. 이 두 가지를 합쳐서 이벤트 핸들링(Event Handling)은 사용자가 특정 행동을 했을 때,  그에 맞는 처리를 해주는 과정을 의미합니다.예를 들어, 버튼을 클릭할 때 경고창을 띄우는 것과 같은 동작을 처리하는 방식입니다.02Re..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 3.
• textsms

Context API로 충분한 줄 알았는데... Zustand 써보니 달랐다!

지난 포스팅에서는 Context API의 기초 사용법을 다뤘습니다.이번에는 Context API와 비슷하지만 더 간단하고 효율적인 상태 관리 도구, Zustand를 소개하려고 합니다.01Context API를 사용해 본 사람이라면...Context API는 React에서 글로벌 상태를 관리할 때 기본적으로 많이 사용됩니다.간단하고 익숙한 도구지만, 실제 프로젝트에서 사용하다 보면 몇 가지 불편함을 느낄 때가 있습니다.Provider 중첩: 여러 컴포넌트가 상태를 공유하면 Provider를 계속 추가해야 해 코드가 복잡해집니다.리렌더링 문제: 상태가 변경되면 관련된 모든 컴포넌트가 리렌더링 되어 성능이 저하될 수 있습니다.기능 한계 : 실시간 데이터 동기화나 대규모 상태 관리를 구현하려면 번거로울 때가 많..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2024. 12. 31.
• textsms