정말 오오오랜만에 다시 건드려보는 리액트!
부트캠프에서 자바스크립트 팀과제까지 마치고 본격적으로 리액트를 배우기 시작했다.
유데미 강의나 다른 강의들로 리액트를 접해보긴 했지만 그냥 아예 모른다고 생각하고 강의를 들었다.
cra와 vite 두 방법이 있었는데 속도적으로도 빠르고 여러방면에서 좋은 vite를 가지고 리액트를 다루게 되었다.
혼자 공부할 때는 npm으로 했던 것 같은데 부캠에서는 yarn 을 설치하여 사용하였다.
간단하게 yarn 설치 방법과 프로젝트 생성에 대해 정리해보고자 한다.
React를 시작하자!🎉
01. 리액트 개발환경 구축하기
🚧 yarn 설치하기
우선 yarn을 설치해보자
터미널을 열고 아래처럼 입력하면 된다.
//yarn 설치
npm install -g yarn
//yarn 설치 확인(버전확인하기)
yarn -v🚧 yarn으로 패키지 설치하는 방법
yarn add [설치할 패키지 이름]
//예시
yarn add react-router-dom🚧 Vite로 리액트 프로젝트 셋업하기
yarn create vite [프로젝트 폴더 이름] --template react
yarn create vite my-react-app --template reactvite는 리액트만 다루지 않고 vue.js 같은 다른 템플릿도 지원하기 때문에 마지막에 --template react를 작성해주어야한다. 리액트 작업을 할거니까 react라고 꼭 적기!
🚧 프로젝트에 접근 및 실행하기
cd my-react-app
yarn
yarn dev
이렇게 하고 vscode 터미널을 열어보면 위 사진처럼 Local 하면서 주소가 하나 뜨는데 이걸로 열어주어야한다.
LiveServer로 열었을 때 방식으로 열면 내가 아무리 열심히 수정해봤자 확인할 수 없다.
리액트로 작업할 때는 꼭 저 Local 주소로 들어가도록하자!
🚧 기타 환경세팅
프로젝트를 하다보면 절대경로 세팅을 해두면 편리하다.
vite.config.js 수정하기
jsconfig.json 파일 생성 후 작성하기
이렇게 설정해두면 작업할 때 절대경로가 잘 표기되게 만들 수 있다.
🚧 최종 리액트 폴더 파일
결과적으로 세팅이 되었을 때 vscode 속 폴더와 파일들은 아래처럼 정리되어있다.
나는 강의를 듣다가 캡처해서 App.jsx가 빨갛게 되어있는데 세팅만 해둔 상태라면 이런 표시 없이 깔끔하게 정리되어 있을 것이다!
이제 열심히 열심히 리액트를 뿌수러가자! 👊👊👊
출처 및 참고하기
