[Toy project] Llama's Magazine

Llama's magazine

라마의 매거진은 일상을 공유할 수 있는 SNS서비스로, 항해99 PBL과제로 만들게된 프로젝트 입니다.

Demo : Llama's magazine

API Guide : Postman Document

📌 API 서버가 5분간 요청을 받지 않은 경우 suspend mode에 들어가기 때문에, 사이트 첫 접속 시 속도가 느릴 수 있습니다

Requirements

과제 수행의 필수 사항은 아래와 같습니다

• 토큰 기반 인증 - 회원가입, 로그인, 로그아웃
• 게시물 CRUD
• 4가지 레이아웃을 가진 게시물
• 게시글 좋아요, 댓글 기능
• 게시물 무한 스크롤
• 상태 관리 툴 사용 (redux, recoil 등)
• 반응형 웹
• 예외처리
  • 로그인한 사용자가 로그인, 회원가입 페이지에 접근시 경고문을 보여주고 홈페이지로 이동
  • 로그인하지 않은 사용자가 좋아요 버튼을 눌렀을 경우 경고문을 보여주고 로그인페이지로 이동
  • 백엔드 서버와 통신할때 발생하는 에러 핸들링
• Route lazy loading

Teck Stack

React, React-router-dom, Redux, Redux-toolkit, Material UI, Styled-components, React-hook-form, React-infinite-scroller

What I Learned

전역 상태 관리

• Redux, React-redux, Redux-toolkit을 사용한 전역 상태 관리
• Logger와 Redux-devtools을 사용한 디버깅
• redux-thunk를 이용해 redux에서 비동기 작업 처리

Token과 Cookie

• Token 기반의 인증 시스템에 대한 이해
• Token을 보관하는 방법에 대한 이해 (Cookie VS Local / Session Storage)
• Cookie의 기본적인 사용법 익힘
• Token 기반 인증 API를 활용

Library 선정

• Library를 고르는 방법을 익혀봄
  • npm trend 웹사이트에서 비슷한 기능을 하는 라이브러리를 골라서 Star, Download 수 등을 비교
  • 각 Library의 Github Repo에 들어가서 사용법과 데모페이지, 예시 등을 확인
• 이 프로젝트에서 도입한 Library
  • Material UI
    • 디자이너의 도움 없이도 통일된 UI를 갖추고, 손쉽게 반응형 웹을 구현하기 위해 도입
  • react-infinite-scroller
    • 무한 스크롤을 손쉽게 구현하기 위해 도입
  • react-hook-form
    • component에서 form state를 관리할 필요가 없고, 간편하게 validation을 구현 할 수 있는 장점이 있어 도입
  • redux-toolkit
    • Boilerplate code를 줄이고, 여러 라이브러리가 내장되어 있어 도입

Etc
Postman을 이용해 API 문서를 제공 받고, API Collection도 제공받아 API 테스트를 해 봄

📌 한 줄 회고

뭐가 안된다? 다 내 잘못이다.