욕심도 참 많아

Babel은 JS 트랜스파일러 입니다. 트랜스 파일러 : 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환해주는 얘 Babel은 주로 최신 JS (ES6 이상)을 구형 브라우저에서도 동작할 수 있도록 ES5 같은 이전 버전의 JS로 변환하는 데 사용됩니다. 또한, React의 JSX같은 문법도 JS로 변환해 줍니다. const add = (a, b) => a + b; ES6 에서 도입된 화살표 함수 이기에 Babel을 사용하면 var add = function(a, b) { return a + b; }; 이렇게 변환 된다. const element = Hello, world!; 같은 JSX는 const element = React.createElement('h1', null, 'Hello, world!..

env 파일이란?? db 관련 데이터 , api key등 외부에 노출되면 안되는 값들을 관리하기 위하여 관련 변수들을 저장해두는 파일이다. 이때 dotenv패키지가 필요하다. 프로젝트의 최상위 루트에 파일을 만들게 된다. CRA (Create React App) 에서의 환경 변수 사용법 cra 에서는 내부적으로 dotenv를 지원해 줌으로써, node js 환경처럼 설치를 따로 안해줘도 된다. 사용 방식은 프로젝트 루트 디렉토리에서 .env 파일을 생성. .env 파일에 변수를 추가해준다. 예를 들어, REACT_APP_API_KEY=abcdefg와 같이 작성한다. 변수 이름은 REACT_APP_으로 시작해야 합니다.(필수!!!!!!) 프로젝트에서 변수를 사용할 파일에서 process.env.REACT_..

Vite란?? Vite는 프론트엔드 프레인워크로, ES 모듈을 기반으로한 개발서버와 빌드 도구를 제공한다. 경량화된 개발 도구로, CRA 같이 React 프로젝트를 생성하고 구성하는데 사용된다. (기존 webpack, rollup, parcel 과 같은 bundler 이다) 기존의 Webpack Webpack은 모든 모듈을 번들링하여 하나의 파일로 만들고, 이 파일을 로딩할때까지 브라우저에서 지연시간이 발생한다. 반면 vite는 es 모듈 시스템을 통하여 필요모듈만 빌드하고, 빌드된 모듈은 브라우저에 바로 로딩된다. Why Use Vite?? CRA대신 Vite를 쓰는 이유는 다음과 같다. 빠른 빌드 시간: Vite는 빠른 빌드 시간을 제공합니다. 이는 Vite가 빠르게 재구성되는 ESM(ES Modul..