[React 기본] React 세팅하기 (fontawesome 설치하기)

1. 설치목록

• node.js
• 크롬 확장도구 react dev
  
  

2. vscode 에디터 확장 툴 설치목록

• reactjs snippet (rcc enter 하면 자동으로 기본 형태 만들어줌)
• auto import (컴포넌트 자동으로 import 해주는 툴)
  
  

3. 북마크하기

• 리액트공식문서: https://ko.reactjs.org/docs/getting-started.html

 

4 작업할 폴더에서 터미널 열어서 아래 명령어 실행 (my-app 대신에 본인이 하고싶은 이름)

npx create-react-app my-app

 

5. 설치가 되면 해당 폴더로 이동하여 (cd my-app) 서버를 실행한다. (npm run start)

cd my-app
npm run start

 

** 만약 create-react-app 설치과정에서 오류가 난다면 아래 포스팅 글 참고

[React 세팅] 리액트 create-react-app 세팅 오류 ! (You are running `create-react-app` 4.0.1, which is behind the latest

---

부가적인 것 다운로드

- fontawesome 다운받기 (무료 아이콘)

세팅1. 루트 폴더 경로에서 아래 명령어 실행

yarn add @fortawesome/fontawesome-free

세팅2. index.js 에 import하기

import '@fortawesome/fontawesome-free/js/all.js';

세팅3. 사이트 가서 원하는 아이콘 검색해서 태그 복사하기

fontawesome 사이트: https://fontawesome.com/v5.15/icons?d=gallery&p=2

아이콘 검색하여 선택

 

태그 복사하기

 

react에 fontawesome 주의할점 !

class를 className으로 변경하여 사용하기