Project/foliohub

서버 측에서 data를 fetch 하도록 한 이후 vercel에 배포하니 아래와 같은 에러가 날 맞이 했다 ㅎㅎ(정말 아직도 의문인건 왜 개발단에서 발견은 안되고 배포 시에만 console 창에 나타나는 걸까...? ) 에러 상황 에러의 내용은 다음과 같았다.Uncaught Error: Minified React error #418;서버에서 렌더링 된 HTML이 클라이언트와 일치하지 않아 Hydration에 실패했습니다. 그 결과 클라이언트에서 다시 생성됩니다. 이는 서버 렌더링된 클라이언트 컴포넌트가 다음을 사용한 경우 발생할 수 있습니다.서버/클라이언트 분기 if (typeof window !== 'undefined')Date.now()나 Math.random()을 호출할 때마다 변경되는 변수 입력서..

Next.js 프로젝트를 하면서 SSR을 잘 활용하지 못한 거 같아서 마음 한구석이 찝찝했다...😃그래서 이번 기회에 SSR을 활용하여 리팩토링 해봤다. Next.js에서 제공하는 data fetch과 캐싱 등을 이용할 수 있지만 무한스크롤, 로딩 처리 등 더 다양한 기능이 있어 react query가 더 유용할 거 같아 react query를 선택했다.(+ Next.js 14 App router와 react query v5를 사용하고 있습니다!) 클라이언트 렌더링과 서버 렌더링서버 렌더링은 사용자가 페이지를 로드하는 즉시 볼 수 있는 내용을 제공하기 위해 초기 HTML을 서버에서 생성하는 것을 말한다. 이는 페이지 요청 시마다 발생(SSR)할 수 있고 빌드 시 미리 발생(SSG)할 수 도 있다. 일반..

🚨 경고 발생 Image with src "~~" has "fill" but is missing "sizes" prop. Please add it to improve page performance. Read more: https://nextjs.org/docs/api-reference/next/image#sizes 🤔 원인 해당 링크로 들어가 보니 내용은 다음과 같았다. sizes의 값은 fill을 사용하는 이미지나 반응형 크기를 가진 이미지에 대한 성능에 큰 영향을 미친다. "fill" 속성이 있는 이미지에 "sizes"값을 지정하지 않으면 기본값으로 100vw가 사용된다. 이게 무슨 뜻인지 좀 더 찾아봤는데 fill 속성을 사용한 이미지의 경우 이미지가 전체 뷰포트를 채우도록 확장되어야 한다는 것을 ..

오늘은 Next.js에서 이미지를 사용하는 방법에 대해서 알아보겠다. 이 글은 Next.js 14를 기준으로 작성되었다. 이미지 최적화 전략 이미지를 최적화하기 위한 전략에는 아래와 같이 다양한 방법이 있다. png, jpeg 형식보다는 webp, avif 형식의 이미지 파일 사용하기 이미지 Lazy Loading 처리하기 디바이스 크기에 알맞은 이미지 크기로 리사이징 이미지 캐싱하기 이러한 작업을 Next.js에서 해주고 있는데 어떻게 적용할 수 있는지 알아보겠다! 1. webp로 변환 next/image는 png, jpeg 등 형식을 webp로 변환해 이미지 용량을 줄여준다. webp보다 2019년에 만들어진 avif가 여러 형식(jpeg, webp) 보다 훨씬 더 좋은 무손실 압축과 고품질을 자랑한..

프론트엔드 개발자가 소소한 취미로 백앤드를 개발해 본 경험 글로, 틀린 점이 있다면 댓글로 부탁드립니다 🙏 에러 처리를 어떻게 하면 좋을까 찾아보다가 에러 핸들링 미들웨어를 만들어 사용하는 예시들을 발견했다! 이를 활용해 에러 처리를 한 곳에서 관리하고 응답의 일관성을 유지할 수 있다는 점이 깔끔해 보여 적용해 봤다. 에러 처리 미들웨어 기본적으로 에러 처리 미들웨어는 반드시 4개의 인수(err, req, res, next)를 가져야 한다! app.use(function(err, req, res, next) { console.error(err.stack); res.status(500).send('Something broke!'); }); 커스텀 에러 처리 핸들링 기존 Error 클래스를 상속받아 커스텀 ..

Next.js에서는 아래와 같은 NotFound 페이지를 기본적으로 제공한다. NotFound 페이지는 사용자가 존재하지 않는 url에 진입 시 나타나는 페이지로, 사용자의 이탈을 막고 정상적인 페이지로 유도하기 위해 이를 적절하게 활용하는 것이 사용자 경험에 도움이 된다. Next.js에서 NotFound와 Error 페이지를 간단하게 커스텀 할 수 있는데 이번 글에서는 이를 다루는 방법에 대해서 알아보겠다! NotFound 페이지 나의 경우엔 - 없는 페이지 경로로 진입 시 - 존재하지 않는 username로 포트폴리오 상세 페이지(/[username]) 진입 시 두가지 경우에 NotFound 처리가 필요했다. not-found.tsx 생성하기 간단하게 에러문구와 메인으로 돌아갈 수 있는 버튼을 추가..

시작은정적인 포트폴리오 사이트를 만들려고 다른 레퍼런스를 찾다 문득 그런 생각이 들었다. 포트폴리오가 모여 있는 사이트가 있으면 좋지 않을까? 자신의 이력도 공유할 수 있고!!! 다른 사람들은 뭐하고 사나 구경도 하고그렇게 시작되었다. 예전부터 프론트와 백앤드를 모두 만들어 실 사용되는 서비스를 운영해보고 싶다는 생각을 했었다.회사 다니면서 둘 다하기엔 벅찼고 잠시 휴식기를 가지는 지금이 바로 적기였다! 프론트와 백앤드를 둘 다 구현해보고 싶었던 이유는 풀스택 개발자가 되기 위해서는 아니다 ㅎㅎ...(하나만 제대로 하기에도 벅차다)프론트엔드 개발자도 백앤드에 대한 이해도가 있다면 백앤드 개발자와의 소통이 더 원활하지 않을까라는 생각과서비스를 A부터 Z까지 운영해보고 싶었다. 프론트 기술 스택은 예전 회..

이미지 업로드가 느려 사용자에게 로딩 중임을 알려줄 로딩 UI가 필요했다. 이미지를 업로드하는 과정에서 시간이 걸려, 사용자가 이미지가 업로드되는 동안 아무런 표시가 없어 이미지가 업로드되고 있음을 인식하기 어려웠다. 그래서 사용자에게 업로드 중임을 명확히 알리기 위해서 로딩 UI가 필요했다. 나는 이미지 업로드 시 상단에 progressBar를 통해 업로드 진행률을 표시하기로 결정했다. spinner, skeleton 등 로딩 UI 중에 progressBar를 선택한 이유는 다른 UI를 가리지 않고 전역에서 로딩 상태를 관리하여 표시하고 싶었다. OnUploadProgress를 활용해 ProgressBar에 진행률 업데이트하기 ProgressBar 전역 상태관리 이미지 업로드뿐만 아니라 저장하기 등의..

저번 글에서 가비아에서 도메인을 구매했다! 가비아 도메인 구매 오늘은 드디어 도메인을 구매해 볼 시간이다! 가비아에서 구매를 진행했다. 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 원하는 도메인을 입 sollogging.tistory.com 오늘은 구매한 도메인을 EC2 서버에 연결해 보겠다. Amazon Route 53 | DNS 서비스 | AWS Amazon Route 53는 가용성과 확장성이 뛰어난 도메인 이름 시스템(DNS) 웹 서비스입니다. Route 53는 사용자 요청을 AWS 또는 온프레미스에서 실행되는 인터넷 애플리케이션에 연결합니다. aws.amazon.com Route 53에서 호스팅 영역 생성을 해준다. 도메인 이름에는 구매..

오늘은 드디어 도메인을 구매해 볼 시간이다! 가비아에서 구매를 진행했다. 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 원하는 도메인을 입력하고 적절한 가격에 원하는 도메인을 선택한다. 신청하기를 누르고 정보를 입력한다. 정보를 입력하고 결제를 하면 결제를 하면 이제 foliohub.me는 1년 동안 나의 도메인이다 ㅎㅎ 저도 이제 도메인이 있답니다 ㅎㅎ