주문을 외워봐 -3- FrontEnd 라이브러리

F.E. 단에서 사용하게될 라이브러리를 이야기 해보겠습니다.

시작할때 기본적으로 써보고, 라이브러리 목록을 정리해서 프로젝트 시작할때

설치한 것의 목록이며, 프로젝트 중간에 변동이 있을 수 있습니다.

 

현재 프로젝트의 package.json 입니다.

 

기본적으로 React.js 를 주축으로 하고 있고, 나열해서 정리를 좀 해보겠습니다.

 

리덕스 관련

redux

react-redux

@reduxjs/toolkit

redux-logger

redux-saga

 

- 상태 관리는 리덕스를 사용하였습니다. 아무래도 첫 포트폴리오이기 때문에,

나름 정석이라 생각하는 리액트 리덕스 조합을 사용하기로 생각 했고,

서버와의 비동기 작업을 하기위해 saga를, 개발 중 로그를 찍기위해

logger 를 미들웨어로 채택 했습니다.

 

- 제일 중요한건, redux-toolkit 이라고 생각하는데,

어플리케이션의 폴더구조도 툴킷이 지향하는 구조를 사용하고 있고 ( Features 구조 )

액션과 리듀서를 간단하게 생성하고, 리듀서는 슬라이스로 잘라 관리할 수 있어

좋은 라이브러리라 생각합니다.

 

스타일 관련

bootstrap

react-bootstrap

react-router-bootstrap

react-icons

node-sass

 

- 게슈탈트를 쓸까, 부트스트랩을 쓸까 했지만 결국 부트스트랩을 이용하기로 했습니다. ( doc이 제일 많기도하고 )

react용 bootstrap 은 2개의 라이브러리가 있었는데 ( reactstrap이라는 것도 있었습니다 ) 비교한 내용을 보니

결국 별 차이는 없고 리액트 부트스트랩이 더 문서화가 잘되있어 이쪽을 선택했습니다.

 

- sass 는 사실 이용해보지 않았는데, 후에 커지는 css들은 scss로 정리 하기위해 미리 임포트 했습니다.

css에서 전처리기가 더해져 좀더 함수처럼 사용 할 수 있는 장점이 마음에 들었습니다.

 

기타등등은 하나하나 설명해보겠습니다.

cross-env

- 키나 토큰 같은 값을 가져오기 위해 쓰는 라이브러리입니다.

history

- 리액트 리다이렉션 요청을 하기위해 넣은 라이브러리입니다.

http-proxy-middleware

- golang 서버를 프록시로 이용하기에 넣어주었습니다.

axios

- api 요청을 위한 axios 입니다. 프로미스로 비동기를 처리하기에 유용합니다. 추천

react-router-dom

- 라우터를 이용하기 위해 쓰며, react-router-bootstrap 은 부트스트랩의 Link를 리액트에서 쓰기위해

씁니다.

 

다음 시간에는 Backend 단에서 사용할 기술에 대해 이야기 해보겠습니다.