전체 글45 [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. [Next.js] AWS S3 업로드 이미지 최적화를 해보자! (feat. sharp) 이미지 최적화란?이미지 최적화는 웹사이트의 성능과 속도를 향상시키기 위해 품질을 손상시키지 않으면서 이미지의 파일 크기를 줄이는 프로세스입니다. 이 프로세스에는 크기를 최소화하면서 최상의 형식, 크기, 해상도 및 품질로 이미지를 제공하는 것을 목표로 하는 여러 기술과 도구가 포함됩니다.즉, 품질을 손상시키지 않으면서 크기를 최소화하여 최적화한다는 것이죠. 이미지 최적화를 해야되는 이유?1. 로딩 속도 개선 최적화된 이미지는 더 빠르게 로드되어 더 원활한 탐색 환경을 제공합니다.2. SEO 우선순위 향상 검색 엔진은 빠르게 로딩되는 웹사이트를 우선시합니다. 최적화된 이미지는 로드 시간을 단축하여 검색 엔진 순위를 향상시킵니다.3. 향상된 사용자 경험빠른 로딩 시간과 반응형 이미지는 연결 속도가 느린 모바일.. 2024. 9. 5. AWS S3(스토리지 서비스) 생성 및 설정하기 S3는 Simple, Storage, Service의 약자라고 합니다.간단하게 말하면 사진,동영상 등의 파일을 저장하기 위해 사용하는 서비스라는 거죠. AWS S3의 특징저장할 수 있는 파일 수의 제한이 없습니다.최소 1바이트에서 최대 5TB의 데이터를 저장할 수 있습니다.REST, SOAP 인터페이스를 제공합니다.SSL을 통한 데이터 전송과 암호화로 높은 내구성과 보안성을 가지고 있습니다.다른 모델들과 비교해 상대적으로 저렴한 비용으로 무료 사용자도 불편함 없이 사용할 수 있습니다. AWS S3 용어 정리1) 객체(object)S3에 저장된 데이터의 기본 단위, 파일 하나하나가 전부 객체라고 생각하면 됩니다.2) 버킷(Buket)S3에서 생성 가능한 최상위 디렉토리입니다. 객체를 하나로 묶어서 그.. 2024. 8. 21. [항해99 취업 리부트 코스 수강 후기] 코딩테스트를 준비하며 💡 오늘 진행된 강의에서 학습한 내용은 무엇인가요?코딩 테스트를 처음 항해99로 준비하면서 알고리즘이나 CS 지식이 부족해 걱정이 많았습니다. 하지만 제공되는 강의를 통해 알고리즘의 기본 개념부터 문제 해결 전략까지, 이론이 실전에 어떻게 적용되는지를 쉽게 이해할 수 있었습니다. 막연히 두렵기만 했던 코딩 테스트에 점점 익숙해지고 있는 것을 느끼고 있습니다.문제를 하나씩 풀어가며 자신감을 얻었고, 이를 통해 문제 해결 능력이 크게 향상되었습니다. 또한, 다양한 예제를 통해 실전 감각을 키울 수 있었고, 여러 가지 문제를 접하며 새로운 접근 방식을 배울 수 있었습니다. 💡 이번 주 진행된 팀 스터디에서 얻은 인사이트는 무엇인가요?같은 문제라도 각기 다른 접근 방식과 해결 방법이 존재할 수 있다는 것을 .. 2024. 7. 23. [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. [Redux] 리덕스 사용법 및 예제 (2) (feat.payload, ducks패턴) https://taehyeon-smilestudy.tistory.com/49손자) 부모 " data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/48" data-og-url="https://taehyeon-smilestudy.tistory.com/48" data-og-image="https" data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/49" data-og-url="https://taehyeon-smilestudy.tisto.. 2024. 7. 8. [Redux] 리덕스 사용법 및 예제 (1) https://taehyeon-smilestudy.tistory.com/48부모->손자) 부모 " data-og-host="taehyeon-smilestudy.tistory.com" data-og-source-url="https://taehyeon-smilestudy.tistory.com/48" data-og-url="https://taehyeon-smilestudy.tistory.com/48" data-og-image="https://scrap.kakaocdn.net/dn/c0cvtc/hyWvTJkPCB/qj6Td4hsYkneXxjydB3vPk/img.png?width=500&height=315&face=0_0_500_315,https://scrap.kakaocdn.net/dn/yGnkn/hyWvTWS.. 2024. 7. 5. 이전 1 2 3 4 5 다음
