ChatGPT Plus와 OpenAI API 요금 차이: 별도 과금일까? ChatGPT Plus를 이용하고 있다면 OpenAI API도 구독료에 포함되어 있다고 생각하기 쉽습니다. 하지만 ChatGPT Plus와 OpenAI API는 서로 다른 서비스이며, 결제 시스템도 별도로 운영됩니다. 즉, ChatGPT Plus를 유료로 사용하고 있더라도 블로그, 웹사이트, n8n 자동화, 프로그램 등에서 OpenAI API 키를 사용하면 API 사용량에 따른 비용이 별도로 발생합니다. 이번 글에서는 […]
리액트 API 연동: Axios 한 번에 정리(로딩·에러·취소) Axios는 인스턴스·인터셉터로 공통 헤더·에러 포맷·타임아웃을 표준화하기에 적합합니다. 예제로 실무 기본 흐름(로딩/에러/요청 취소)을 알아봅니다. fetch vs Axios: 무엇을 쓸까? 가이드: 의존성 최소·간단한 연동이면 fetch, 범용 공통 헤더·토큰·리트라이·에러 표준화가 필요하면 Axios 권장. 1) axios 인스턴스 + 인터셉터 1. 패키지 설치 2. HTTP 인스턴스 파일 2) 예제: UsersAxiosBasic (로딩/에러/취소) ▼ 실행
리액트 Context API 전역 상태 관리: 드릴링 끝내는 실전 패턴 리액트 Context API는 트리 어디서든 값을 꺼내 쓰게 해주는 전역 전달 메커니즘입니다. createContext → Provider → useContext 흐름만 알면, 테마·언어·인증 같은 공통 값을 props 드릴링 없이 공유할 수 있습니다. 이 글에서는 최소 예제와 테마 토글 데모를 통해 기본 사용법과 실무 팁(리렌더 최소화, 안전한 커스텀 훅)을
리액트 인라인 스타일 vs 외부 스타일: 언제 무엇을 써야 할까? 리액트에서 스타일을 적용하는 방법은 크게 두 가지입니다. 인라인 스타일(style prop)과 외부 스타일(클래스 기반)입니다. 두 방식은 적용 범위·표현력·성능 특성이 꽤 다릅니다. 이 글은 “언제 무엇을 써야 하는지” 선택 기준과 함께, 실습 가능한 짧은 예제를 제공합니다. 요약 선택 기준 인라인 스타일: 장단점과 예제 장점 단점 예제 1)
리액트 스타일링 비교: CSS 모듈 vs styled-components CSS 모듈과 styled-components는 리액트에서 가장 많이 쓰이는 두 가지 스타일링 방식입니다. 이 글에서는 설치부터 기본 사용법, 유지보수/성능/테마링까지 비교하고, 동일 UI를 두 방식으로 구현하는 실습 예제를 제공합니다. 1) 개념 한눈에 보기 항목 CSS 모듈 styled-components 핵심 아이디어 파일 단위 클래스 이름 해싱으로 자동 스코프 JS 안에서 styled.* 함수로 컴포넌트화
리액트 라우터 DOM 설치 및 기본 사용법(React Router v6) 싱글 페이지 애플리케이션(SPA)에서 화면 전환과 URL 관리를 담당하는 표준 라이브러리가 react-router-dom입니다. 이 글에서는 설치 → 기본 셋업 → 페이지 이동 → 파라미터/검색쿼리 → 중첩 라우팅 → 404 처리 순서로 핵심만 알아봅니다. (GitHub Pages 배포 시 HashRouter 권장 안내 포함) 1) 설치 설치 확인: 2) 라우터 선택:
리액트 커스텀 훅 만들기: useLocalStorage·useFetch 핵심 2가지 커스텀 훅(Custom Hook)은 컴포넌트 간에 상태 로직을 재사용하는 가장 깔끔한 방법입니다. 이 글에서는 실무에서 특히 많이 쓰는 두 가지 패턴만 선별해 빠르게 알아봅니다. 언제 커스텀 훅을 만들까? 예제 1) useLocalStorage — 상태를 브라우저 저장소와 동기화 상태를 localStorage에 저장해 새로고침/다른 탭에서도 유지합니다. storage 이벤트로 탭 간 동기화도 처리합니다. 코드:
리액트 useCallback 제대로 쓰기: 참조 안정화로 자식 리렌더 줄이기 useCallback은 함수의 참조를 의존성 배열이 바뀔 때만 새로 만들어 전달하는 훅입니다. “계산 결과”를 캐시하는 useMemo와 달리, 콜백 함수의 레퍼런스를 안정화해 자식의 React.memo와 조합할 때 리렌더를 줄이는 데에 쓰입니다. 1) 언제 useCallback을 쓸까? 2) 쓰지 말아야 할 때 예제 1 — React.memo + useCallback으로 자식 리렌더 억제
리액트 useMemo 제대로 쓰기: 언제 이득이고 언제 오버엔지니어링일까 useMemo는 비싼 계산 결과나 파생 데이터를 의존성 배열(deps)이 변할 때만 다시 계산하도록 메모화하는 훅입니다. 모든 계산에 붙이면 성능이 좋아지는 게 아니라, 연산 비용이 높거나 참조 동일성 유지가 중요한 구간에서만 이득입니다. 이 글에서는 선택 기준과 실전 예제 2개로 핵심을 정리합니다. 1) 언제 useMemo를 쓸까? 2) 쓰지 말아야 할
리액트 useReducer vs useState: 언제 쓰고 어떻게 마이그레이션할까 useState는 가장 단순한 상태 관리 훅이고, useReducer는 여러 상태가 서로 연관되어 한꺼번에 업데이트되거나, 업데이트 로직이 분기·규칙으로 복잡할 때 유리합니다. 이 글에서는 선택 기준과 마이그레이션 방법을 간단한 예제로 알아봅니다. 1) 언제 useState, 언제 useReducer? 2) 마이그레이션 기본 원칙 예제 1 — 카운터(단순 useState → 규칙 많은 useReducer) 처음엔