본문 바로가기

전체 글16

Tanstack Query 관리 구조 (공통 훅 정의) 1단계: .env (환경 변수 설정)가장 먼저 백엔드 주소들을 환경 변수로 빼둡니다.# .envVITE_APP_API_URL=http://localhost:3000/apiVITE_APP_CLIENT_ID=your_client_id2단계: Axios Instance (공통 전화기)모든 API 요청에 공통으로 들어갈 헤더와 토큰 로직을 처리합니다.// src/api/axiosInstance.tsimport axios from 'axios';export const axiosApi = axios.create({ baseURL: import.meta.env.VITE_APP_API_URL,});axiosApi.interceptors.request.use((config) => { const token = loca.. 2026. 1. 21.
Next.js 정리 — React를 쓰다 보면 반드시 헷갈리는 그 지점들 React로 프로젝트를 시작하다 보면 어느 순간 이런 질문이 생긴다.Next.js는 왜 필요한가?서버 사이드 렌더링이 도대체 뭐길래?React Query는 안 써도 되는 건가?Next.js를 쓰면 Node.js를 안 쓰는 건가?이 글은 내가 보기위해 Next.js의 기초 개념 → 헷갈리는 질문 → 답변 순서로 정리한 기록이다. 1. React와 Next.js의 가장 큰 차이React (Vite / CRA 기준)React는 기본적으로 CSR(Client Side Rendering) 방식이다.실행 흐름은 이렇다.브라우저가 index.html을 요청빈 만 있는 HTML을 받음JS 파일 다운로드JS 실행 → React 실행화면 렌더링즉, HTML은 껍데기고, 화면은 전부 JS가 그린다.Next.jsNext.js.. 2026. 1. 20.
전역 관리 vs 로컬 관리 vs API 📄 React 전역 상태 관리(Redux Toolkit) & API 정리1️⃣ 전역 상태 vs 로컬 상태상태 유형사용 조건예시로컬 상태 (useState)한 컴포넌트 안에서만 쓰이고, 다른 곳과 공유 X입력값, 모달 열림/닫힘, 체크박스 상태전역 상태 (Redux)여러 컴포넌트/페이지에서 동시에 필요로그인 사용자 정보, 권한, 선택된 건물, 다크모드 설정원칙: 여러 페이지/컴포넌트에서 공유되면 전역 상태, 아니면 로컬 상태2️⃣ Redux Toolkit 사용 예시userSlice.jsimport { createSlice } from "@reduxjs/toolkit";const initialState = { id: null, name: "", token: null, isLoggedIn: false.. 2025. 8. 25.
[프로젝트로 리액트 공부해보자01] 라우트 분리, 레이아웃 분리! 나는 프로젝트 경험이 적다. 항상 시간에 쫓겨 효율을 따지지 않으면 처리하기에 급급해왔다. 프론트엔드 개발자인데 기초 기둥 세우는게 너무 부족하다는 것을 느끼고 학습에 열망이 생겨버렸다. 사실 생긴지는 참 오래됐는데, 이제야 시간을 내기 시작했다. 어느새 퇴근 후 저녁 먹고 노트북 앞에 앉아 ai에게 끝없는 질문을 하며 공부를 하기 시작했다. 사수가 없어서 ai에게 많이 물어보는 편인데, 알지 않는가! ai가 항상 100점은 아니라는 것을 ㅜ.ㅜ 항상 되묻는다. "이 방법이 저 방법보다 나아? 그럼 뭐가 나아서 이걸 추천해준거야? 이게 맞다고 하는거야?" 물어보면 80퍼센트가 "너 말이 맞아! 그것도 좋은걸"이다. 이래서는 신뢰가 많이 떨어지지만.. 그래도 도움이 안되는건 아니니, ai의 도움을 받아 만.. 2025. 4. 30.

티스토리툴바