- Codelion '프론트엔드 트랙 - React'
- 챕터4. 리액트 라우터 활용하기& 폼제출 & memo
- 챕터6. REST api 연동 axios
⚠ 위 강의를 수강하지 않을 경우 과제 진행이 어렵습니다.
- 실제 동작하는 간단한 멀티페이지 웹 어플리케이션을 개발할 수 있다.
- REST API 가 무엇인지 이해하며, 활용할 수 있다.
- React Router (react-router-dom@6)
- Styled Components (styled-components)
- Axios (axios)
접속해서 직접 기능을 사용해볼 수 있습니다.
http://likelion-10th-inha-gallery.surge.sh
지금까지 배운 모든 개념을 활용하여 인스타그램st의 간단한 갤러리 앱을 만듭니다.
- REST API를 사용하여 여러가지 이미지를 불러와 사용자에게 표시합니다.
- 이미지를 클릭하면, REST API를 사용하여 해당 이미지에 달린 댓글 목록을 불러와 사용자에게 표시합니다.
- REST API를 사용하여 댓글을 새로 작성할 수 있습니다.
- REST API를 사용하여 댓글을 삭제할 수 있습니다.
- 전체 이미지의 개수를 출력합니다.
- 여러 이미지들을 Grid 형태로 이미지, 제목, 설명을 함께 표시합니다.
- 여러 이미지 중 하나를 클릭하면 상세한 이미지 정보와 댓글 목록을 확인할 수 있는 페이지 (2번째 사진)로 이동합니다.
- 댓글을 작성할 수 있습니다.
- 댓글 목록을 표시합니다.
- 삭제 버튼을 클릭하면 해당 댓글을 삭제하고, 댓글 목록을 다시 불러옵니다.
기타 디자인과 레이아웃은 원본과 요구사항과 크게 다르지 않은 범위에서 원하는대로 만드셔도 좋습니다.
요청을 호스트 정보와 문서는 아래와 같습니다.
- React Router v6 공식문서 (영어)
- Velopert님의 RR v6 튜토리얼 (한국어)
- REST API가 무엇인가요? (한국어)
- Axios 공식문서 (한국어)
- Axios 러닝 가이드 (한국어)
예제 코드는 과제 중 자유롭게 참고 가능하지만, 최대한 본인의 힘으로 해결하려 노력합시다 😇