React - Font Awesome과 Toastify 사용하기

 

 

Font Awesome 이란?

- 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다.

Font Awesome

 

Font Awesome 패키지 설치 방법

1. FontAwesome의 SVG 기반 아이콘을 활성화 시키기 위해 기본 패키지를 설치한다.

2. FontAwesome 아이콘 대한 패키지를 설치해야 한다.

여기서 무료로 제공하는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지만 설치한다.

 

3. 마지막으로 FontAwesome을 React 컴포넌트 형태로 사용할 수 있도록 하는 패키지를 설치한다.

 

그러고 나서, 적용 시켜보자.

인스타그램 클론 했던 소스에서 Header 컴포넌트에 적용해보았다.

저렇게 돋보기 아이콘이 생긴 것을 확인할 수 있다.

Toast 팝업창 띄우는 방법

 

리액트에서 다른 패키지를 가져와서 팝업 창으로 사용할 수 있다.

간단하게 설명하자면, 로그인 버튼을 눌렀을 때, 서버에 해당 아이디와 비밀번호를 보내서 있으면 토근이라는 값을 가져와서 브라우저의 localStorage에 저장한다.

그리고 나서, 토큰이 존재하다면 toast.success로 성공 메세지를 띄우고, 없다면 toast.error로 실패 메세지를 띄우는 로직이다.