본문 바로가기

전체 글100

Next.js 헷갈리는 개념 정리 1. prefetch할때 왜 void를 사용할까?- 명시적으로 이건 의도적으로 기다리지않음을 나타 내기 위함- 클라이언트 컴포넌트가 이미 prefetch가 되어있다 라는 사실을 인식하도록 만들기 위함- 즉, 서버에서 prefetchQuery()를 통해 쿼리 키를 미리 등록하면 클라이언트는 추가 fetch없이 hydration된 상태를 그대로 쓴다.- 한마디로 “이 쿼리는 이미 실행했고, 클라이언트에서도 그걸 알게 해줄 상태 준비가 끝났어” 2. ServerSide란? 클라이언트가 아니라 서버에서 실행되는 모든 로직과 처리 과정을 의미한다. 즉, 서버에서 코드가 동작하며 html, 데이터 혹은 전체 페이지를 만들어 보내는 역할을 한다.대표적인 역할 및 사용 이유는1. 데이터 fetch - db연결, 비공.. 2025. 7. 21.
Next.js 발전에 의한 상태 관리의 변화 React 및 Next.js 개발을 진행하다 보면 상태 관리에 대한 "이 상태는 어디서 관리해야 하지? 서버인가? 클라이언트인가?"라는 생각을 빼놓을 수 없다. 클라이언트에서만 사용하는 UI 상태인지 아니면 서버에서 받아온 데이터를 다뤄야 하는지에 따라 접근 방식이 완전히 달라진다. 그럼 어떻게 접근 방식이 달라져왔을까? 예전 방식은 fetch와 useState를 사용하여 서버에서 데이터를 가져오고 상태를 관리했다.useEffect(() => { fetch('/api/data') .then(res => res.json()) .then(data => setData(data));}, []);방식은 간단하지만 단점이 많은 방식이다.대표적인 단점으론1. 데이터를 요청할 때마다 중복 로직이 발생함2... 2025. 7. 20.
Nginx 페이지 새로고침 Not Found 오류 [Problem]리액트로 만든 프로젝트를 Nginx로 배포를 하고 나서 테스트 중에 발견한 오류이다. 다른 라우팅 페이지에서 새로고침을 하면 404 Not Found가 발생하였다. [Solve]로컬 개발 환경에선 발생하지 않는 오류이니 Nginx의 설정이 잘못되었다고 생각하여 Nginx의 conf설정 파일이 잘 못되었다 생각했다.구글 서칭을 해보니 Nginx의 설정 파일에 다음과 같은 옵션을 추가해주어야 했다. location / { try_files $uri /index.html; # 이 옵션 추가 } [Why]Nginx는 기본적으로 요청된 URL에 해당하는 정적 파일(ex. index.html)을 찾는다. 이걸 우린 초기에 설정할 때 옵션으로 root에 url이 바라봐야 하는 html파일을 연.. 2025. 3. 26.
setState 타입 지정의 차이 [Problem]React + TypeScript로 프로젝트를 진행하면서 setState를 props로 넘길 때 타입을 지정해야 하는데 오류가 발생했다.import { useState } from "react";const Parent = () => { const [number, setNumber] = useState(0); return ;};interface ChildrenProps { setNumber: (value: number) => void;}const Children = ({setNumber}: ChildrenProps) => { const handleClick = () => { setNumber((prev: number) => prev + 1); // .. 2025. 3. 20.