코딩하는라민

[Vite] tsconfig.json 외에 tsconfig.app.json, tsconfig.node.json 파일이 생성되는 이유  Vite 프로젝트 생성 시  `tsconfig.json` 파일 외에도 `tsconfig.node.json` 과  `tsconfig.app.json` 파일이 생성된다.이번 포스팅에서는 왜 세 개의 파일이 생성되며, 각각의 역할은 무엇인지 그리고 서로 어떤 관계가 있는지 알아보도록 할 것이다. 각 파일의 역할📄 tsconfig.json`tsconfig.json` 파일은 공통적인 설정을 정의하는 파일이다. 주로 빌드 설정, 전역 옵션, 참조 파일 목록 등을 포함한다. 📄tsconfig.app.json`tsconfig.app.json` 는 주로 브라우저와 관련된 옵션을 포함한..

[React, Vite] Vite 에서 .env 환경변수 사용하기 Vite 로 구성된 React 프로젝트를 다루다가 다음과 같은 에러를 마주쳤다. 환경변수 사용을 위해서 .env 파일에 외부로 노출되면 안 되는 key 값을 저장했고, 불러오는 과정에서 발생한 에러였다. 환경 변수란? 환경변수란 프로세스가 실행될 때 사용되는 동적인 값을 말한다. 데이터베이스 연결 정보, API Key, Port Number 등을 환경변수로 설정할 수 있다. 외부로 노출되면 안 되는 중요한 정보의 경우 소스코드에 직접 하드코딩하는 것이 아닌 환경 변수로 관리해야 보안성을 강화할 수 있다. Vite 에서 환경 변수 사용은 다르다. Node.js 환경에서는 `process.env` 를 사용하여 접근할 수 있다. Node.js ..

[React] Vite 차세대 프론트엔드 개발 툴 📌 Vite 란? Vite(프랑스어로 "빠르다(Quick)"를 의미한다. 발음은 /vit/ 이다. → '바이트' 라고 읽지 않도록 주의하자!! Vite 는 CRA(Create React App) 과 달리 구성 환경이 다른 프로젝트를 위한 빌드 툴이다. 속도가 굉장히 빠르기 때문에 요즘 CRA 보다는 Vite 를 많이 사용하고 있는 추세이다. Vite 에 대한 만족도와 관심도가 가장 높으며, 사용량도 빠르게 늘어나고 있다. 반면 Webpack 은 만족도와 관심도가 크게 감소했으며, 사용량이 소폭 감소했다. The State of JS 2022: 빌드 도구 기술 이름을 클릭하면 자세한 정보를 확인하고 관련 데이터를 자세히 볼 수 있습니다. 2022.state..