본문 바로가기

분류 전체보기46

[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.

티스토리툴바