코딩연습장

1. 화면에 뿌려줄 index.html을 생성한다.기존에 리액트에서 화면에 뿌려주듯이 사용하기 위해 root를 id로 갖는 div를 body요소 안에 만들어준다. 2. React, ReactDOM CDN 추가별도의 설치없이 CDN을 import해와 React를 사용할 수 있다. 3. JSX to JS 기존에 컴포넌트를 만들고 해당 컴포넌트를 root div에 할당해 render하는 방식이다.하지만 syntax Error가 출력된다. 이유는 뭘까?우리가 작성한 함수형 컴포넌트 방식은 JSX문법이다. 하지만 바닐라 자바스크립트는 JS를 사용한다.따라서 JSX를 JS로 바꿔주는 과정이 필요하다. 물론 이렇게 사용해도 되지만, 코드작성이 불편하므로 JSX를 JS로..

기존에 CRA로 리액트 프로젝트를 생성하려면 수십초가 걸렸었다. 하지만 vite를 사용하면 다르다!vite가 오래 걸린것으로 보이지만, 직접 프로젝트 명과 프레임워크(라이브러리)를 지정하면 엄청나게 빠르다. 엔터를 누르면 프로젝트가 생성되어있다. 정말 생각지도 못한 속도... 프로젝트 폴더 삭제 또한 빠르다.CRA는 초기 설정을 포괄적으로 잡은 반면, vite는 필수요소만 설치하여 빠른 것이다.또한 필요없는 파일이 없으므로 삭제도 빠르다.   ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev 1. 프로젝트 생성하기yarn create viteyarn create vite 프로젝트명 --template 사용할프레임워크(라이브러리)//ex 리액트 프로젝트 생성yarn create vite ..