Hello, Dev World

프로젝트를 진행하다 보면 "React Query"와 "Context API"를 자주 사용하게 된다.모두 데이터를 관리한다는 공통점이 있지만 데이터의 성격과 목적은 다르다.오늘은 이 둘의 차이점을 비교해 보려 한다. React Query vs Context API React QueryContext API정의서버 상태 관리 라이브러리전역 상태 공유 기능목적서버와의 데이터 동기화, 캐싱, 비동기 요청 관리컴포넌트 간 상태, 데이터 전달기능데이터 캐싱, 자동 리패치, 로딩/에러 상태 관리, 쿼리 무효화, 백그라운드 갱신props drilling 방지, 전역 상태 유지의존성외부 라이브러리 설치 필요추가 설치 불필요(React 내장 기능) 상태의 종류와 사용 범위React Query는 서버 상태에 특화되어 ..

평소에는 서버 상태를 관리하기 위해 useEffect와 useState 혹은 Context API를 사용했다.하지만 로딩, 에러, 성공 상태를 관리하기 위해 코드가 늘어나고, 필요 이상으로 전역 상태에 데이터를 저장하게 되어 관리 포인트가 늘어난다는 단점을 발견하게 되었다.이러한 문제점을 줄이고자 React-Query를 사용해 보았다. React-Query란?React에서 서버 상태를 효과적으로 관리하기 위한 라이브러리데이터 fetching, caching, 동기화, 업데이트를 간편하게 도와준다.구분내용클라이언트(Client) 상태사용자의 입력에 따라 UI가 변함(예: 토글 버튼, 드롭다운 메뉴의 열림/닫힘)서버(Server) 상태서버로부터 받아오는 비동기 데이터(예: 사용자 정보, 게시글 목록) ..

개인 프로젝트를 진행하다 시간을 가져오는 부분이 있었는데 "2025-05-06T13:29:04Z" 이런 형태로 출력되고 있었다. 실제로 화면에 보여줄 때는 이런 형식으로 보여주면 안 될 거 같아서 timeago 라이브러리를 사용해 변환을 시켜줬다. timeago.js란?JavaScript에서 "방금 전", "5시간 전", "2일 전" 등의 상대적인 시간 포맷을 쉽게 만들어주는 라이브러리다. 설치 방법#터미널에 명령어 입력npm install timeago.js 기본 사용법import { format } from 'timeago.js';format(new Date()); // '방금 전' 한국어 포맷 사용index.jsimport { format, register } from "tim..

React를 공부하면서 가장 많이 고민한 것이 컴포넌트를 나누는 기준이다.개발자마다 스타일이 다르기 때문에 명확한 정답은 없지만 이 고민을 통해 나만의 개발 스타일을 찾아봐야겠다. 리액트(React)란?페이스북(현재는 Meta)이 개발한 사용자 인터페이스(UI)를 구축하기 위한 자바스크립트 라이브러리이다.컴포넌트들의 집합체라고도 한다. 컴포넌트는 무엇일까?웹 페이지를 구성하는 UI 블록들을 의미한다.웹 페이지: 여러 개의 컴포넌트로 구성컴포넌트: 헤더, 네비게이션 바, 푸터, 로그인 폼, 댓글 창 등 장점재사용성: 한 번 만들어 놓은 컴포넌트는 다른 페이지나 프로젝트에서도 재활용할 수 있다.유지보수: 특정 컴포넌트의 문제만 해결하면 되므로 유지보수가 훨씬 쉬워진다.가독성: 코드가 기능별로 분리되어..

React Router로 라우팅 마스터하기 ② - useParamsReact Router로 라우팅 마스터하기 ①웹사이트를 만들다 보면 "홈, 소개, 상품" 등 여러 화면 간 페이지 이동이 필요하다. 사용자가 화면을 매끄럽게 오갈 수 있도록 하는 것이 바로 "라우팅"인데 reacdamdadira.tistory.com 이번에는 useNavigate를 사용해서 VideoDetail 페이지로 바로 넘어갈 수 있는 기능을 구현해보려 한다. useNavigate 사용해 보기React Router v6부터 제공하는 훅(Hook)이다.컴포넌트 내에서 프로그래밍 방식으로 페이지를 이동할 수 있게 해 준다.사용자가 특정 버튼을 클릭하거나 이벤트가 발생했을 때 원하는 페이지로 이동시킬 수 있다. Videos.jsximp..

협업을 하다 보면 클래스 이름이 충돌하는 건 흔한 일이다.이런 문제를 해결해 줄 수 있는 방법이 있다고 해서 한번 알아보려 한다. CSS Modules란?각 CSS파일을 로컬 범위(Local Scope)로 처리해 주는 방식이다.작성한 클래스 이름이 컴포넌트 내부에서만 유효하게 만들어주는 기능이라 생각하면 된다. CSS Modules의 장단점장점스타일 충돌 방지: 클래스 이름이 고유하게 만들어져 전역 스코프 문제를 완벽하게 해결해 준다.모듈성: 컴포넌트와 스타일을 1:1로 관리할 수 있어 유지보수가 쉽다.기존 CSS 문법 사용: 기존에 사용하던 CSS 문법을 그대로 활용할 수 있다.컴포넌트 재사용성 향상: 스타일이 컴포넌트에 종속되므로 컴포넌트를 다른 프로젝트에 가져가도 스타일이 깨지는 일이 없다...

React를 공부하다 보니 프레임워크와 라이브러리라는 용어를 자주 접하게 되었다.둘 다 익숙하지만 막상 누군가 차이점을 묻는다면 정확하게 대답을 하지 못할 것 같았다.그래서 이 둘에 대한 차이점을 제대로 이해해야겠다는 생각에 기록을 남기게 되었다. 라이브러리: 개발자가 주도하는 방식특정 기능을 구현하기 위한 도구 상자이다.필요한 기능만 가져와 사용할 수 있고, 전체 애플리케이션의 흐름은 개발자가 통제한다. 예시React: UI를 구성하는 컴포넌트 기반 라이브러리Axios: HTTP 요청을 처리하는 라이브러리특징특정 문제 해결에 집중한다.선택적으로 가져와서 사용한다.제어 흐름은 개발자에게 있다. 프레임워크: 프레임워크가 주도하는 방식애플리케이션의 구조와 흐름을 결정하는 뼈대이다.특정 방식에 따라 개..

지난 포스팅에 이어서 이번에는 Styled-Components를 사용해서 스타일링을 해보려 한다. Styled-Components란?CSS-in-JS 라이브러리 중 하나로, JavaScript 코드 내에서 CSS를 작성할 수 있게 해 준다. 컴포넌트 단위로 스타일을 정의하고 관리할 수 있게 되어 스타일이 특정 컴포넌트에 종속성을 가지고 재사용성을 높여준다. Styled-Components의 장점컴포넌트 기반 스타일링: 개별 컴포넌트에 직접 스타일링을 하며 해당 컴포넌트의 로직과 스타일을 한 곳에서 관리할 수 있다. 코드의 가독성과 유지보수성을 크게 향상시킨다.캡슐화된 스타일: 자동으로 고유한 클래스 이름을 생성하여 스타일 충돌을 막아준다. 여러 컴포넌트에서 동일한 클래스 이름을 사용해도 문제가 ..

프론트엔드 개발을 하다 보면 스타일링에 대한 고민이 크다.웹 페이지를 만들 때마다 CSS 파일에서 클래스 이름을 짓는 것과 원하는 스타일을 위해 속성 하나하나 작성하느라 적지 않은 시간이 소요되곤 한다.그래서 개인 프로젝트에서 간단하게 적용할 수 있는 라이브러리를 찾다가 Tailwind CSS를 발견했다. Tailwind CSS란?기존의 CSS 프레임워크(예: Bootstrap)는 btn, card, navbar와 같이 미리 정의된 컴포넌트 클래스를 제공한다. 이 방식은 빠르지만 디자인을 커스터마이징 하려면 복잡한 오버라이딩 과정을 거쳐야 한다.Tailwind CSS는 flex, pt-4, text-center, bg-blue-500과 같이 하나의 특정 스타일 속성만을 담당하는 유틸리티 클래스를 제공..

React Router로 라우팅 마스터하기 ①웹사이트를 만들다 보면 "홈, 소개, 상품" 등 여러 화면 간 페이지 이동이 필요하다. 사용자가 화면을 매끄럽게 오갈 수 있도록 하는 것이 바로 "라우팅"인데 react-router 라이브러리를 사용하여 기damdadira.tistory.com 지난 포스팅에 이어서 이번에는 URL에 포함된 파라미터를 추출하여 각기 다른 세부 정보를 보여주는 페이지를 구현해보려 한다. useParams 사용해 보기React Router에서 URL 파라미터 값을 가져오는 훅(Hook):videoId 같은 동적 경로 변수에 들어온 값을 컴포넌트 안에서 쉽게 가져올 수 있게 해준다. App.jsximport { createBrowserRouter, RouterProvider } ..