0 Intro
source: categories/study/react_restapi_graphql/react_restapi_graphql.md
0.1 소개
토이프로젝트 클론코딩으로 REST API 및 GraphQL 연습하기
- ReactJS 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다.
- 클라이언트와 서버 양쪽을 모두 다룸으로써 서버에 대한 두려움을 낮춰드리고자 합니다.
- 프론트엔드 개발을 위해 MySQL, mongoDB, Firebase 등을 찾아다니지 않아도 됩니다.
실무에서 바로 사용할 수 있는 API 및 데이터베이스를 만드는 것은 아니고 토이프로젝트나 연습용,
혹은 포트폴리오 제출용으로 여러분 각자 컴퓨터에서 직접 클라이언트 코드 뿐만아니라 서버 데이터베이스까지 모두 만들 수 있는 것을 목표로 하겠습니다.
대상
- 프론트엔드 개발자 또는 취준생
- 데이터통신 연습을 하고 싶은데 마땅한 방법을 몰라 고민이신 분
- Database나 server에 대해서까지 오랜 시간을 들여 공부해야할지 망설여지는 분
- 개발 단계에서 api가 마련되기 전에 프론트엔드 개발을 서두르고 싶은 분
다루는 내용
- core
- NodeJS
- express: 서버쪽에서 사용하게될 프레임워크
- json Database (file system): NodeJS의 file system을 이용
- code base (optional)
- ReactJS: 클라이언트 쪽 작업에서 활용, 꼭 ReactJS가 아니어도 VueJS나 VinillaJS로 작업하시는 분들도 얼마든지 상황에 맞게 적용 가능
- NextJS: 클라이언트 쪽 작업에서 활용
- GraphQL
- Axios: REST API 통신 라이브러리
- ReactQuery: GraphQL 통신 라이브러리
- LowDB
강의 성격
- 프론트엔드 개발을 위한 백엔드 환경을 보다 쉽고 간단하게 준비할 수 있는 방법을 소개해드리는 내용입니다.
- 최신 javascript 문법을 사용합니다. 최신문법에 익숙하지 않은 분들은 중간중간 별도의 학습이 필요합니다.
- 이론을 자세하게 설명하는 강의는 아닙니다.
목표
- CRUD(Create, Read, Update, Delete)의 기본기를 다집니다.
- 연습용 서버(REST API, GraphQL)를 직접 만들 수 있습니다.
- 로컬에서 간단하게 DB를 구축하는 방법을 배웁니다.
커리큘럼
-
Client - 기본기능 구현
- 클라이언트 환경 세팅
- 목록뷰 구현
- 스타일
- 메시지 추가하기
- 메시지 수정 & 삭제하기
-
Server - REST API
- express 이용한 서버 및 JSON Database 만들기
- server routes
-
Client - REST API 통신
- 클라이언트에서 REST API로 데이터 통신하기
- 무한 스크롤 구현하기
- 서버 사이드 렌더링
-
Server - GraphQL
- GraphQL 환경세팅 및 schema 작성
- resolver 작성
- GraphQL Playground 소개 및 동작 테스트
-
Client - GraphQL 통신
- GraphQL 환경세팅
- 클라이언트에서 GraphQL로 데이터 통신하기
-
Client - GraphQL 무한 스크롤
- useInfiniteQuery 적용하기
- 무한 스크롤 환경에서 mutation 처리 및 기능 보완
-
기타
- LowDB
- json-server