vite로 react 설치하기
·
웹개발/REACT
2이번 글에서는 Vite와 TypeScript를 사용하여 React 프로젝트를 설정하는 방법을 단계별로 설명드리겠습니다.1. 폴더 생성 2. VSCode로 폴더 열기 3. 터미널 열기(Crtl + j) // git bash로 열어주세요. 4. Vite를 이용하여 프로젝트 생성npm create vite@latestvite@latest (파일이름) 으로 파일 이름을 지정해줘도 되지만,우리는 이미 파일을 열었기 때문에 .(현재 파일에 설치)를 입력해줘도 됩니다. 5. 설치과정Select a framework: React (리액트 사용할거니까)Select a variant: TypeScript / TypeScript + SWC둘 중에 어느거를 설치해도 상관없지만 저는 SWC버전으로 설치합니다. SWC는 Spe..
vite로 react설치 명령어
·
웹개발/REACT
npx create-react-app .여기서 .은 현재 디렉토리에 설치를 뜻합니다.파일 만들어서 설치 원하시면 . 대신에 파일명 적어주시면 되세요. npm으로 설치하는거는 저는 3분 정도 걸리는거 같아요.yarn이 확실히 빠르긴 한데, 그냥 npm으로 합니다.그동안 잠쉬 폰하거나 유튜브 봐요.설치 완료되면 npm create vite@latestvite패키지를 설치합니다.어떤 모드로 선택해주시면 끝입니다.
바벨과 웹팩, Vite의 역할: 리액트 개발에서의 필수 도구 이해하기
·
웹개발/REACT
바벨의 유래바벨(babel)이라는 이름은 고대 '바벨탑' 이야기에서 유래되었어. 이 이야기에서는 전 세계 사람들이 모여서 세상에서 가장 높은 '바벨탑'을 만들려고 했지만, 언어가 달라서 탑을 완성하지 못했지. 프런트엔드 개발에서도 바벨은 서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 있는 형태로 변환해주는 역할을 해. 자바스크립트 생태계의 큰 변화, ES6 등장자바스크립트는 2009년에 ES5가 출시된 이후로 6년 동안 큰 변화가 없었어. 그러다가 2015년에 ES6(2015)가 등장하면서 자바스크립트 생태계에 큰 변화가 일어났지. ES6는 기존 ES5와 확연히 다른 점이 많아서 새로운 자바스크립트 언어라고 해도 과언이 아니야. 브라우저가 지원을 안하네하지만, ES6가 아무리 훌륭해도 ..