vite.js
-
[vite.js / react] yarn berry 사용하기 (vscode 타입스크립트 오류)React 2024. 7. 14. 14:50
yarn berry는 yarn의 최신 버전(yarn 2와 그 이후의 버전)을 지칭합니다.PnP(Plug 'n' Play) 방식, Zero Install 방식을 지원하며 인기가 많은 패키지 관리 도구입니다.| yarn berry 특징Cache와 Zero-Installyarn berry는 설치된 패키지를 글로벌 캐시에 저장하여, 같은 패키지를 여러 프로젝트에서 사용할 때 다운로드 시간을 절약합니다. 패키지는 zip 파일 형태로 .yarn/cache에 저장되며,이를 통해 네트워크 요청 없이 빠르게 패키지를 불러올 수 있고,디스크 공간을 효율적으로 사용할 수 있습니다. 또한, Zero Install 기능을 통해, 패키지들이 리포지토리에 함께 저장하며 프로젝트를 클론 하는 것만으로 필요한 모든 패키지를 바로 사용..
-
[Next.js, React(vite.js)] 로컬 개발 환경 https 적용하기React 2024. 5. 2. 15:46
보통 웹 개발을 진행할 때 로컬 환경에서의 개발 주소는대부분 http://localhost 이런 식으로 되어 있는 경우가 많습니다. 일반적으로 개발을 진행할 때에는 문제가 되지 않지만 쿠키를 사용하는 경우secure 속성으로 인해 http에서 쿠키를 사용하지 못하는 경우가 있습니다. 이럴 경우 로컬 개발 환경에 https를 적용하여 개발을 진행할 수 있습니다.| mkcerthttps를 적용하기 위해서는 TLS/SSL 인증서가 필요합니다.mkcert는 자체 서명된 인증서를 만들어 주고,이를 신뢰할 수 있도록 로컬 CA(인증 기관)를 설치하고 관리합니다.따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 합니다. 먼저 mkcert를 설치해 줍니다.리눅스brew install mkcert윈도우cho..
-
Vite.config에 환경변수 넣기React 2024. 4. 15. 11:16
보통 vite를 사용하여 리액트 프로젝트를 할 때 환경변수를 import.meta.env.VITE_DEVELOP 이런 식으로 불러와서 사용할 수 있습니다. 하지만 이런 식으로 불러오는 것은 기본적으로 클라이언트에서 사용되는 거라 서버에서 불러와지지 않습니다. 따라서 process.env를 통하여 가져와야 하는데 그냥 사용하면 환경변수가 적용이 안되게 됩니다. https://vitejs.dev/config/#using-environment-variables-in-config vite.js 공식문서에 따르면 vite는 설정을 마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env파일을 로드하지 않는다고 합니다. 따라서 필요시 loadEnv 헬퍼를 사용해 .env 파일을 불러온 후 사용..