본문 바로가기

코딩이야기44

[React] useFormStatus를 사용한 pending 상태 추적 useFormStatus란?React 18에서 도입된 서버 컴포넌트에서 비동기 폼 처리 상태를 관리하는 데 사용폼 제출 중, 폼 제출이 완료되었을 때 등의 상태를 추적useFormStatus 훅은 자신이 위치한 컴포넌트가 폼의 자식이 되어야 하며, 부모 폼의 상태를 감지할 수 있어야 합니다. Button 컴포넌트에 적용export default function Button({ large = false, //기본값 onClick, type, text, ...rest}: ButtonProps) { const { pending } = useFormStatus(); //useFormStatus를 이용하여 부모 form의 pending상태를 알아냄 //useFormStatus는 form의 자식만 쓸.. 2024. 9. 9.
[Next.js] 로그인 하지 않은 사용자의 강제 접속 이슈 (feat.middleware) 문제 상황로그인 하지 않은 사용자가 url을 통해 강제 접속이 되는 보안 이유가 발생하였습니다.ex) 로그인을 한 유저에게만 다른사람의 프로필 페이지나 게시글을 보게 하려고 했는데 게시글 id, 유저 id를 알아내어 url을 통해 강제로 접속 가능한 이슈 이것을 해결하기 위해 Next.js에서 제공해주는 middleware를 사용하였습니다.  middleware란? Next.js 12부터 도입된 기능으로, HTTP 요청이 서버로 전달되기 전에 특정 작업을 수행할 수 있게 해줍니다.미들웨어를 사용하면 요청을 처리하거나 응답을 가로채서 변경할 수 있으며,API 라우트와 페이지의 로직을 더욱 세밀하게 제어할 수 있습니다.  파일 경로 : 프로젝트의 루트 디렉토리 (최상단)파일 이름 : middleware.js.. 2024. 9. 9.
[React] Input 컴포넌트에서 useRef 오류가 날 때 문제 상황 input과 오류 메세지를 컴포넌트로 만들어서 사용하였고 input에 오류 메세지가 뜨면 useRef로 포커스가 되게 하려고 했으나 포커스가 적용되지 않고 오류 메세지가 나오는 현상 input 컴포넌트"use client";interface InputProps { label: string; name: string; kind?: "text"; errors?: string[]; [key: string]: any; //input으로 오는 모든 props를 받게 해놓음}export default function Input({ label, name, errors = [], kind = "text", //kind의 기본값은 text이고 나머지값들은 객체로 받아옴 ...rest //inp.. 2024. 9. 9.
[Next.js] build시 정적 페이지 생성 오류 프로젝트 build시 정적 페이지를 생성하는 도중 발생한 문제가 생겼습니다.수정 버튼을 누르고 useSearchParams() 훅을 사용할 때 발생한 오류인데 원인을 분석해보니  아이템 수정을 누르면 url에 ?id=113으로 동적으로 id를 useSearchParams() 로 불러오고 있는데 페이지를 정적 페이지로 만들려고 해서 난 오류인 것 같습니다.정적 페이지 SSG - 누가보더라도 똑같은 페이지일 때동적 페이지 SSR - 누가 보는지에 따라 변하는 페이지 // 동적 페이지로 설정export const dynamic = "force-dynamic";동적 페이지로 강제로 설정하여 build 해보았으나 해결이 되지 않았습니다. 오류 내용대로 useSearchParams() 훅이 Suspense로 감싸져.. 2024. 9. 6.

티스토리툴바