🙆‍♀️ FE/Next

💡 문제 상황해당 글은 Mixed Content 에러를 만나 해결하면서 겪은 모든 에러에 대한 기록이다.HTTP와 HTTPS 통신 간의 보안 문제를 만나 프론트엔드 개발자인 내가 잘 모르는 부분을 해결할 수 있었는지.. 기록해보겠다.  📌 백엔드 서버로 AWS를 도입하게 된 계기Next 프로젝트로 1:1 실시간 채팅 기능을 개발하고 있었다. Next의 자체 서버를 이용하여 Route Handlers를 이용한 API를 설계해 둔 상황이었다. 그러나, Next를 Vercel로 배포하고 있었던 터라 Vercel의 서버리스 환경에서는 Websocket 연결을 유지할 수 없어 Nods.js로 간단하게 socket 서버만 로컬 서버로 따로 구축했다.하지만 배포환경에서 채팅도 연결하려고 하다보니, 클라우드 환경을..

📌 현재 상황지금 개발중인 Next SNS프로젝트에서는 이미지가 메인 화면에 처음 진입 시 바로 노출된다. 때문에 이러한 부분이 LCP에 영향을 줄 수 있을 것 같았다. LCP는 Last Contentful Paint로 가장 마지막 텍스트 또는 이미지가 표기되기까지 소요되는 시간이기 때문이다. LCP를 조금이라도 줄여 Lighthouse 성능을 개선해보고자 우선 이미지 사이즈 최적화를 하게 되었다.  📌 문제 상황 분석하기그렇다면 기존에 LCP는 얼마였을까? 아래 이미지를 보면 알 수 있듯이 4.1초로 성능이 좋지 않았다. 추측해봤을 때, 사용자가 추가한 이미지를 Storage에 원본 그대로 저장하다보니 LCP에 영향을 미칠 것 같았다. Next에서 제공하는 Image 컴포넌트는 렌더링 시 이미 이미..

📌 사용자 경험(UX) 을 개선하자사용자 경험을 개선하는 것은 프론트엔드 개발자의 숙명이다. 현재 개발중인 SNS 프로젝트의 경우, 각 피드들을 확인하면서 원하는 게시글에 버튼을 클릭해 좋아요 표시를 할 수 있다. 그러던 와중 좋아요 버튼을 클릭했을 때, 업데이트되는 시간이 오래 걸린다는 문제가 있었다. 인스타그램과 같은 SNS에서는 즉각적으로 반영되는 것을 볼 수 있기 때문에 나도 이 부분에 대한 기능을 개선해보려고 한다.    📌 Optimistic UpdatesOptimistic Updates는 낙관적 업데이트로 서버에 요청을 보내고 응답을 기다리지 않고 '미리 성공함'을 가정하여 UI를 즉시 갱신하는 것이다. 만일 서버 요청이 실패하면 롤백된다. 낙관적 업데이트의 장점은 '사용자 경험 개선' ..

문제 상황현재 개발중인 Next.js 프로젝트를 Vercel로 배포하였다.그러나 배포 환경에서 특정 URL로 이동했을 때, 404 에러가 발생했다.반면 개발 환경에서는 정상적으로 동작했다.   문제 원인이는 배포 환경에서 정상적으로 라우팅이 제대로 안되는 요소가 있다고 생각했다.혹시나 라우트에 영향을 끼치는 어떠한 요소들이 있는지 파악하기 위해 Next 공문을 읽어보았다. 나의 경우, Parallel 라우팅으로 Modal 창을 띄우고 있었기 때문에 @Modal 파일이 있었는데, 기존에는 @Modal 파일 내에 page.tsx 컴포넌트만 존재했다.우선 Vercel 배포환경과 개발환경에서의 정확한 차이를 발견하지는 못했으나, 에러는 해결할 수 있었다.   문제 해결Next App Router 는 기본적으로 ..