백엔드 부분은 생략했다. 추후 Node.js 파트에서 따로 설명할 예정이다. 본 글에선 hooks와 axios를 이용해서 좋아요 하트 아이콘을 구현하는 방법을 소개하고자 한다. 먼저 무료 아이콘 사이트에서 필요한 아이콘을 다운받자. https://www.flaticon.com/ Flaticon, the largest database of free vector icons Download all icons in SVG, PSD, PNG, EPS format or as webfonts www.flaticon.com 'heart'를 검색하면 다양한 하트 아이콘들이 나온다. 맘에 드는 걸로 빈 하트와 채워진 하트 두 가지를 골라준 후, 저장한 이미지는 src/assets 폴더 내에 저장한다. 먼저 자식 컴포넌트부..
React Pagination 구현하기 리스트를 띄워줄 페이지를 만드는 과정에서 Pagination이 필요했다. 처음엔 Material-UI에서 제공하는 Pagination 컴포넌트를 이용해서 구현하려 했으나 문제가 있었다. 삽질끝에 포기하고 결국 다른 패키지를 사용했다. 📦 Material-UI (비추) 다음은 Material-UI에서 제공하는 데모 컴포넌트이다. https://material-ui.com/components/pagination/#pagination React Pagination component - Material-UI The Pagination component enables the user to select a specific page from a range of pages. ma..
사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 물론 서버쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직하다. 이를 그림으로 표현하면 다음과 같다. 1. 접근 제한 (Access Control) PrivateRoute는 로그인한 사용자에게 제공되는 루트이고, 만약 로그인하지 않은 사용자가 이 루트로 접근하고자 한다면 로그인 페이지로 Redirection한다. 반대로, PubilcRoute는 로그인 여부와 상관없이 사용자에게 제공되는 루트이다. 아래 그림과 같이 이미 로그인한 사용자가 해당 루트로 접근하는 것을 막고자 한다면 restricted 옵션을 줘서 제어할 수 있다. 2. 구현 1) 로직 App.jsx의 Router 컴포넌트 안..
리액트를 쓸 일이 있어서 리덕스 구조부터 코드를 짰는데, 코드만 짜고나니 기본적인 개념이 너무 머리에 정리가 안돼서 리덕스에 대해서 간략하게 정리하고자 남겼다. 1. 리덕스(Redux)란? 리덕스는 상태를 전역(global)으로 관리하게 해주는 라이브러리다. 즉, 리덕스는 상태 관리를 컴포넌트 바깥에서 할 수 있게 도와준다. 2. 리덕스 동작 방식 1) 스토어 설정 2) 컴포넌트의 스토어 구독하기(subscribe) 3) 스토어에게 상태 변경하라고 알리기(dispatch) 3. 리덕스 용어 정리 스토어(store) 상태에 관한 데이터들이 담겨있는 저장소 액션(action) 상태변화를 일으킬 때 참조하는 객체 디스패치(dispatch) 액션을 스토어에 전달하는 행위 리듀서(reducer) 상태를 변화시키는..
