코딩이야기/트러블슈팅7 [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. [Next.js] sharp 라이브러리 적용 후 vercel 배포 시 런타임 오류 발생 문제상황https://taehyeon-smilestudy.tistory.com/51 [Next.js] AWS S3 업로드 이미지 최적화를 해보자! (feat. sharp)이미지 최적화란?이미지 최적화는 웹사이트의 성능과 속도를 향상시키기 위해 품질을 손상시키지 않으면서 이미지의 파일 크기를 줄이는 프로세스입니다. 이 프로세스에는 크기를taehyeon-smilestudy.tistory.com sharp 라이브러리를 적용 후 vercel 배포를 했더니 런타임 오류가 발생했습니다. Vercel에서 sharp와 관련하여 발생하는 오류는 sharp가 대상 환경에 맞게 특별히 컴파일되어야 하는 기본 모듈이라는 사실 때문입니다. Vercel은 Linux 환경을 사용하며 설치된 sharp 모듈이 linux-x64 런타.. 2024. 7. 13. 이전 1 2 다음
