vite
-
Vite 환경 변수로 Proxy 설정하기개발 프로젝트: 핀더펜 2024. 12. 2. 17:48
이번 포스트에서는 Vite의 Proxy 설정을 환경변수를 활용해 적용하는 과정을 보여드리겠습니다. 왜 Proxy 설정을 해야 함?가장 중요한 이유는 cors 에러를 해결하기 위해서이다.cors란?Cross-Origin Resource Sharing의 준말로 현재 웹 페이지의 경로와 다른 출처(도메인, 프로토콜, 포트)에서 자원을 가져오는 것을 말한다. 기본적으로는 동일한 출처에서 가져오는 리소스만 허용한다.왜 그럴까?보안의 문제가 있을 수 있기 때문이다. 외부에서 리소스를 가져오는 것 을 허용하면 해커가 심어놓은 코드로 인해 사용자가 모르는 웹 페이지로 사용자의 개인 정보가 넘어가는 문제가 발생할 수 있다.따라서 이런 위험을 방지하기 위해 기본적으로 동일한 출처에서만 리소스를 가져올 수 있게 제한하고 있..
-
[react + vite + vercel] 페이지 배포하기개발 프로젝트: 핀더펜 2024. 11. 7. 13:14
Vercel이란?Next.js 개발 팀에서 만든 프론트엔드 호스팅 사이트로 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공한다 깃허브와 연동해 배포할 수 있기 때문에 자동으로 변경사항을 파악하고 빌드, 배포를 도와준다. 브랜치에서 작업하고 변경 내용을 push하면 vercel이 자동으로 빌드해주기 때문에 PR을 올리기 전에 빠르고 편하게 문제를 파악할 수 있다는 점이 아주 큰 장점이라고 생각한다. 왜 Vercel을 적용하나?현재 프로젝트는 AWS의 S3와 Cloud Front를 이용해 배포하고 있었다. 앱 출시가 계속해서 미뤄지고 있는 상황에서 AWS 무료 계정의 종료 기한이 다가오고 있으며, 앞으로의 유지관리를 위해서는 무료 호스팅 사이트로 넘어가는 것이 좋을 것 같다는 판단이 들었다. 배포하기..