항해 99 - 2022.01.29.SAT(폰트어썸 리액트에서 사용하기)

이번 챕터 일정

• 01/28 (금) 18:00 : Mingle Friday ✅
• 01/28 (금) 21:00까지 : S.A 제출 ✅
• 02/02 (수) 저녁 : 제3회 항해톡
• 02/03 (목) 21:00까지 : 주특기 숙련 주차 개인/팀 과제 제출 완료
• 02/04 (금) 09:00 : 주특기 심화 주차 발제

오늘 내가 할 일

• 알고리즘 달리기반 32번 문제 풀고 정리 ✅
• 개인과제 기능 구현

---

폰트 어썸을 리액트에서 사용 하는 방법

 

일단 설치 부터 진행 

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome

만약에 여러 가지를 다운로드하여야 한다면? (무료인 것을 한 번에 모음)

npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

사용할 파일에 임포트부터

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPluse } from "@fortawesome/free-solid-svg-icons";

* 이름 사용에 주의할 것 fa-pluse(x) faPluse(o) * 

 

함수 만들고

 const plusicon = <FontAwesomeIcon icon={faPlus}/>

 사용할 부분에 붙여 넣기!

<div onClick={()=>{navigate(`/detail`)}} >{plusicon}</div>

 끝-

 

---

REACT숙련 개인과제 요구사항

1. 게시글 페이지

• 게시글 목록을 화면에 그리기(각각 뷰는 카드뷰로 만들기 ) ✅
• 게시글 내의 예시는 파란글씨로 보여주기
• 게시글 목록을 리덕스에서 관리하기
• 게시글 목록을 파이어스토어에서 가져오기
• (추가) 무한스크롤
• (추가) 게시글 수정

2. 게시글 작성 페이지

• 게시글 작성에 필요한 인풋 을 각각 ref로 관리하기
• 작성한 게시글을 리덕스 내 게시글 목록에 추가하기
• 게시글 목록을 파이어스토어에 저장하기