[React] vite, Cra(Create React App) 없이 Developement Environment 구성하기.

1. 개요

토스 프론트엔드 엔지니어 채용공고..중..

토스 커리어즈에 토스 채용 공고 중 토스가 사용하는 기술 칸이다. 

빌드 툴을 보면 4가지나 빌드 하는 과정에 빌드 툴을 사용하고 있는데, 각 회사의 프로젝트마다, 회사의 특성 마다 이러한 기술사용 스택은 얼마든지 변화하고, 변경되거나, 또한 내가 몰랐던 빌드, 기술을 사용할 가능성이 크기 때문에 이를 위해서는 vite나 cra같이 간편하게 설정을 해주고, 템플릿을 지정해주고 커스터마이징이 제약된 환경보다는 커스터마이징이 자유롭고  , 엄청 큰 프로젝트나, 여러가지 환경이 필요한 상황일 때는 vite, cra없이 개발 환경을 구성하는 것이 필요하다고 생각이 되어 포스팅을 작성하게 되었다. 

2. Example

2-1. React 환경 생성 및 테스트 

https://ko.legacy.reactjs.org/docs/cdn-links.html

CDN 링크 – React

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>

    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

2-2. JSX 환경 생성 및 테스트 

https://babeljs.io/docs/babel-standalone

@babel/standalone · Babel

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

3. Accepting