library

필요할 때 가져다 쓰자, 라이브러리😎

개발자는 이상해

개발자는 이상한 사람들이다. 누가 시키지 않아도 자기가 무언가 만들어 인터넷 상에 무료로 배포한다. 이렇게 개발자들이 미리 만들어 둔 코드 모음을 라이브러리라고 하는데, 개발하면서 '이런 function이 있으면 편하지 않을까?' 하고 구글에 서칭하면 99프로 있다. 이런걸 가져다 쓰기만 하면 된다. 도서관에서 책을 하나씩 꺼내 읽는 것을 생각하면 이해가 될 것이다.📚

아무튼 알아두면 유용한 라이브러리들을 정리!

---

Node 환경에서 라이브러리 받기

PC에 Node가 다운되어져 있다는 가정하에, 터널을 열고

npm i(or install) 다운받고 싶은 라이브러리 [--save](package.json에 표시)[-dev(or -D)](develop 환경에서만 추가)

yarn 사용시

yarn add 다운받고 싶은 라이브러리

---

라이브러리 잘 쓰는 법

처음 라이브러리들을 사용했을 때, 어떻게 하면 잘 쓸 수 있을까
1. 처음쓰는 초보자라면 라이브러리 Doc를 통해 사용법을 숙지 후 사용.
2. 중급자라면 Doc를 대충보고 사용.
3. 고급자라면 Doc를 잠깐 보고 사용.

결론, Doc 보면서 쓰면됨. 처음에 라이브러리가 어떻게 구현되어 있는지 생각하느라 정작 라이브러리를 쓰지도 못하고 골머리만 앓았던 경험이 있는데 그러지 마시고, 적재적소에 알맞은 라이브러리를 가져다 쓰세요!

---

라이브러리 사용시 주의점

과연 정말 필요한 라이브러리인지 한번 고민해보자. 안그래도 Node는 의존성이 깊이가 블랙홀보다 깊은데 나중에 버젼 업이 되거나, 변경이 있을때 충돌나면 깊은 함정에 빠질 수 있다.

---

라이브러리

- 포괄 용도

이름	쓰임새	사용법
redux	전역 상태 관리 대장님	redux-actions
redux-actions	리덕스 액션 생성 함수를 편하게 만들수 있음
redux-logger	redux 상태와 요청된 상태 콘솔 로깅	{createLogger}
qs	요청에 담여 있는 파라미터를 JSON으로 파싱
antd	대륙의 실수, 스타일 프레임워크	@ant-design/icons
styled-components	CSS in Js
emotion	CSS in Js, (2021년 기준, 핫함)	@emotion/core

- 리액트(프론트)

이름	쓰임새	사용법
eslint	코드 점검 라이브러리	eslint-plugin-import, eslint-plugin-react
eslint-plugin-react-hooks	위와 동일
react	리액트, SPA 대장님	react-router-dom
react-redux	리액트 리덕스
next	코드스플리팅과 서버사이드랜더링을 편하게 해주는 리액트 프레임 워크
next-redux-wrapper
@material-ui/core	리액트 진영 씨에스에스 프레임워크
redux-devtools-extension	크롬에 리덕스 데브툴 익스텐션	{composeWithDevtools} => 함수
react-slick	리액트에서 슬라이더를 편하게 만들수 있는 라이브러리	slick-carousel도 함께 설치

- 노드

이름	쓰임새	사용법
express	노드 서버 프레임워크(가장 많이 사용되는 노드 진영 서버사이드 기술)
body-parser	리퀘스트 요청 바디를 파싱해줌
cors	cors 이슈 해결
nodemon	서버를 내리지 않아도 변경 사항 반영해줌
mongoose	MongoDB 커넥팅 및 사용의 모든걸 서포팅해줌