전체 글 (56) 썸네일형 리스트형 Jest 사용법 완전 정복 리액트 테스트의 핵심 도구 Jest란?JavaScript 테스트 프레임워크Facebook에서 개발 & 리액트 프로젝트에 최적화빠른 속도, 풍부한 기능, 쉬운 설정이 장점테스트 러너 + assertion + mock 기능을 한 번에 제공설치 방법1. Create React App 프로젝트라면?CRA는 이미 Jest가 내장돼 있어 별도 설치 필요 없음.2. 직접 설치하려면?npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom 또는 TypeScript 사용 시:npm install --save-dev jest ts-jest @testing-library/react @testing-library/jest-dom기본 설정 (필요한 경우).. Next.js에서 자주 사용하는 SEO 전략 3가지 SEO란? SEO(Search Engine Optimization)는 웹사이트가 검색 결과에서 더 잘 노출되도록 최적화하는 작업입니다.사용자의 유입 경로 중, 가장 강력한 채널이 바로 검색엔진입니다. Next.js에서 가능한 SEO 전략1. 메타 태그 설정 - 컴포넌트 사용Next.js는 기본적으로 모든 페이지에서 컴포넌트를 사용할 수 있습니다. 이를 활용해 각 페이지마다 제목, 설명, OG(Open Graph), 트위터 카드 등의 메타 태그를 설정할 수 있습니다. // pages/about.tsximport Head from 'next/head';export default function AboutPage() { return ( 회사 소개 | MySite .. CSR, SSR, ISR 알아보기 CSR(Client-Side Rendering)이란?CSR은 브라우저에서 JavaScript가 실행되면서 데이터를 패칭하고 화면을 그리는 방식입니다.Next.js, React 등에서는 가장 기본적인 데이터 패칭 전략이죠.// pages/client-example.tsximport { useEffect, useState } from "react";export default function ClientPage() { const [data, setData] = useState(null); useEffect(() => { fetch("/api/hello") .then((res) => res.json()) .then((data) => setData(data)); }, []); if .. React에서의 Fetching 전략 – React Query, SWR, Axios 왜 Fetching 전략이 중요한가?React 애플리케이션에서는 서버에서 데이터를 가져와서 화면에 보여줘야 하는 일이 많습니다.이때 단순히 fetch()나 axios.get()만 사용하는 방식은 다음과 같은 문제를 만듭니다:로딩 상태 / 에러 상태 관리 어려움중복 요청 문제데이터 캐싱 없음서버 상태와 클라이언트 상태 분리 어려움 그래서 등장한 것이 데이터 패칭을 전문적으로 관리해주는 라이브러리들, 대표적으로:React QuerySWR그리고 여전히 많이 쓰이는 Axios (기본 통신 도구)Axios – 기본 중의 기본import axios from "axios";import { useEffect, useState } from "react";function Post() { const [data, setDa.. React Context API 사용 전략 1. Context API란?React에서 props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 공유할 수 있는 방법입니다.전역 상태를 간단하게 관리할 때 사용합니다.2. 언제 Context API를 써야 할까?전역으로 필요한 데이터가 있을 때 (예: 사용자 정보, 테마, 다국어 설정)상태 관리 라이브러리(Redux, Recoil 등)가 너무 무거울 때간단한 전역 상태가 필요할 때3. 사용법 기본 Context 만들기import React, { createContext, useState } from 'react';export const ThemeContext = createContext();export function ThemeProvider({ children }) { const [theme, se.. Jotai 상태 관리 완전 정복 React에서 상태 관리는 중요한 부분입니다.기존에 Redux, Context API, Recoil, Zustand 등이 있는데요,오늘은 이 중에서 Jotai라는 라이브러리를 자세히 알아보겠습니다. Jotai란?Jotai(조타이)는 일본어로 ‘원자(atom)’라는 뜻입니다.React에서 상태를 ‘작고 독립적인 단위’인 atom으로 관리하는 가벼운 상태 관리 라이브러리입니다.복잡한 설정 없이도 간단하게 상태를 만들고 사용할 수 있어서 배우기 쉽고, 사용법도 직관적입니다. Jotai 설치하기 npm install jotai Jotai 핵심 개념: atomatom은 상태의 최소 단위입니다.기본값을 주고 useAtom 훅으로 상태를 읽고 변경합니다.import { atom, useAtom } from 'jota.. Zustand로 상태 관리하기 리액트 애플리케이션을 만들다 보면 컴포넌트 간에 상태를 공유하거나, 전역 상태 관리를 해야 할 때가 많습니다. Redux처럼 복잡한 상태 관리 라이브러리도 있지만, 설정이 번거롭고 코드가 길어질 수 있죠. 이런 점에서 Zustand는 매우 간단하고 직관적인 상태 관리 솔루션으로 주목받고 있습니다. Zustand 상태 관리란? Zustand(독일어로 "상태"라는 뜻)는 React 상태 관리 라이브러리입니다.Redux보다 간단하고, Recoil보다 유연하고 직관적한 게 특징입니다. npm install zustand 기본 사용법 // store/counterStore.jsimport { create } from 'zustand';const useCounterStore = create((set) => ({ .. Recoil로 간단하게 전역 상태 관리하기 Recoil이란?Recoil은 Facebook에서 만든 React 전용 상태 관리 라이브러리입니다.Context보다 강력하고,Redux보다 간편하며,React스럽게 설계되어 있습니다. 설치하기 npm install recoil Atom: 상태를 저장하는 가장 기본 단위 // store/countState.jsimport { atom } from 'recoil';export const countState = atom({ key: 'countState', default: 0,}); key: 전역적으로 고유한 값default: 초기값 useRecoilState: 상태를 읽고 수정하기import { useRecoilState } from 'recoil';import { countState } from .. 이전 1 2 3 4 5 6 7 다음
