라이브러리
-
React - reselect 사용하기React/라이브러리 2020. 8. 31. 23:37
들어가기에 앞서, 우선 Selector를 먼저 알아야 한다. Selector는 무엇인가? selector는 state에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말한다. 왜 써야 하는가? 다음 예제를 살펴보자. todoApp 리듀서와 getIncompleteTodos selector가 존재한다. // Reducer function todoApp(state = [], action) { switch (action.type) { case GET_ALL_TODOS: return { todos: action.data.todos }; default: return state; } } // Selector function getIncompleteTodos(state) { r..
-
React - Font Awesome과 Toastify 사용하기React/라이브러리 2020. 5. 26. 10:00
Font Awesome 이란? - 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중 하나이다. Font Awesome fontawesome.com Font Awesome 패키지 설치 방법 1. FontAwesome의 SVG 기반 아이콘을 활성화 시키기 위해 기본 패키지를 설치한다. 2. FontAwesome 아이콘 대한 패키지를 설치해야 한다. 여기서 무료로 제공하는 Solid, Regular, Brands 3개의 카테고리에 대한 패키지만 설치한다. 3. 마지막으로 FontAwesome을 React 컴포넌트 형태로 사용할 수 있도록 하는 패키지를 설치한다. 그러고 나서, 적용 시켜보자. 인스타그램 클론 했던 소스에서 Header 컴포넌트에 적용해보았다. 저렇게 돋보기 아이콘이 생긴 것을 확인할..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..