본문 바로가기

리액트(React)

리액트 기본설정하기

리액트 기본 설정하기! 순서대로 차근차근! (맥북 기준)

 

1. Launchpad에서 터미널 검색, 터미널 오픈한다음 ls(디렉토리 정보 명령어)를 누른뒤 내가 저장하고 싶은 공간을 찾고, Desktop(내 기준에) cd(이동명령어) desktop, 그후 npxcreate-react-app react501(파일명) 명령어 입력!

 

2. npm/ yarn 설치하기(서로 비슷함)
sudo npm install -g yarn, sudo yarn install -g yarn 둘중 하나 선택해서 설치해주면 되지만 에러가 뜬다면 sudo(관리자)를 넣고 다시 시도해보기!

 

3. node-sass 설치하기 
npm indsall node-sass 명령어를 입력하면 간단하게 설치가 가능하다

 

4. react-router-dom( 라우터는 리액트의 화면 전환을 도와주는 역할, 네이게이션을 만들어주는 패키지로서 별도의 설치가 필요 ) 설치
 yarn add react-router-dom 명령어 입력

 

react-router - 웹&앱
react-router-dom - 웹
react-router-native -앱

 

5. axios 설치하기
npm install axios 명령어를 입력
axios 란?
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 Ajax와 더불어 사용

 

6.  public 폴더 index.html 빼고 나머지 삭제해주기

 

7. src 폴더 app.js, indes.js 빼고 나머지 삭제해주기

 

8.package.json 설치 내용 확인해주면
"axios": "^0.21.1"
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"react": "^17.0.2"
 "react-dom": "^17.0.2"
 "react-router-dom": "^5.2.0"
 "react-scripts": "4.0.3"

 

코딩을 시작할 준비 끝!!!!