개발/프론트엔드

Intro이번 글은 2개의 시리즈로 나누어 Next.js Middleware로 Refresh Token Rotation 만들어보는 경험하기를 주제로 포스팅해보려고 한다.지난 글을 잠깐 인용하자면 아래와 같다. 왠지 모르겠지만 부트캠프를 하면서 웹 쪽 보안에 꽂혔다. 충격적인 API를 봐서 그런가? 마음 한편에 내버려두었다가 이번에야말로 글을 쓰려고 한다. 이번 프로젝트를 진행하며 한 가지 신경을 썼던 점이라면 바로 비밀번호와 토큰을 암호화하여 저장하는 것이었다. 개인적으로도 그리고 팀적으로도 암호화에 관심이 있었고, 프론트엔드에서도 암호화를 적용하여 조금 더 프로젝트의 완성도를 올려보고 싶었다. 또한 이번 프로젝트에서 사용되었던 API는 다수의 요구사항에 맞춰야 했고 실습의 느낌에 더 가까운 API였기에..

이번 포스팅에서는 기존에 진행했던 팀 프로젝트에서 빌드 후 배포하는 과정과 용량을 최적화하는 과정에 대해서 포스팅해보려고 한다. 이 과정이 중요한 이유는 고정적으로 발생하는 네트워크 비용을 줄일 수 있기 때문이다. 구체적인 수치는 아래 글에서 비교, 분석해 보는 것으로 하겠다. ⚠️Warning일전에 프로젝트를 완료하고 Vercel 배포를 진행하기 전, 배포 명령어인 `npm run build`가 제대로 동작하는지 로컬에서 확인하고자 하였다. 해당 명령어를 실행하니 빌드는 잘되었다. 하지만..에러는 아니지만 Vite에서 경고문구를 출력해 주었다. 이 문구의 내용은 다음과 같다.(!) 일부 청크는 최소화 후 500 kB보다 큽니다. 다음을 고려해 보세요:- 동적 import() 사용: 애플리케이션을 코드 ..