풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

프론트엔드 개발자, 레벨 업!
데이터 통신에 대한 자신감을 길러보세요.

이 강의에서는

프론트엔드 개발자 취업을 목표로 포트폴리오를 준비하고 계신가요? 이번 강의에서는 React(리액트) 기반으로 간단한 SNS 서비스를 만드는 토이프로젝트 클론코딩을 통해, 클라이언트 코드뿐만 아니라 서버 및 DB까지 모두 직접 따라 만들어봅니다.

서버에 대한 막연한 두려움을
해결하고 싶다면?

최근 프론트엔드 취업 준비 중인 분들을 대상으로 멘토링을 하다 보니, 많은 분들이 서버사이드 학습에 부담을 느끼고 계시더군요.

저 역시 같은 고충을 겪어온 비전공자로서, 그간 제가 쌓은 노하우를 여러분께 공유해드리고자 합니다. 본 강의를 그대로 클론코딩하시면서 제 의식의 흐름을 따라가다보면, 자연스럽게 데이터 통신에 대한 자신감을 얻게 될 것입니다.

• JSON을 DB로 쓰는 방법을 적용하면 서버 및 데이터베이스에 대한 지식이 거의 없더라도 데이터통신을 연습하는 데 아무런 문제가 없게 됩니다.
• REST API를 GraphQL로 전환하는 연습을 통해, GraphQL을 도입하기 위한 충분한 지식을 쌓을 수 있습니다.
• 취준생이라면 MongoDB, MySQL, Firebase 등은 나중에 필요할 때 학습하셔도 늦지 않습니다. 당장은 프론트엔드에 집중하시는 편이 좋겠죠. 서버사이드에 대한 학습은 딱 프론트엔드 개발에 필요한 만큼만 하시면 됩니다.

데이터 통신에 대한
자신감을 길러보세요.

이런 분들께
추천합니다.

취업 준비생

프론트엔드 취업을
준비하고 있는
비전공자

프론트 주니어

노하우를 얻고 싶은
현직 프론트엔드
개발자도 OK!

한번에 연습

REST API, GraphQL
두 가지를 모두
연습하고 싶은 분

이런 분들께는 특히 도움이 됩니다.

✅ 서버사이드 학습에 부담을 느끼는 분
✅ 단독으로 포트폴리오 또는 토이프로젝트를 진행하고자 하는 프론트엔드 개발자
✅ 개발 단계에서 api가 마련되기 전에 프론트엔드 개발을 서두르고 싶은 현직 프론트엔드 개발자

이 강의의 특징

로컬 DB 구축을 위한
최소한의 CRUD
기능만을 다룸으로써
학습 부담이 적습니다.

문법 위주 설명 대신,
실제 쓰이는 예제 중심으로
실전 개발 능력을
기를 수 있습니다.

실제 개발 과정을
그대로 따르면서
자연스레 전체적인 흐름을
파악할 수 있습니다.

학습 내용

1. Client - 기본 기능 구현

React 및 Next.js 기반의 프론트엔드 개발을 시작합니다. 서버와의 통신 없이 Mock 데이터를 만들어 모든 기능이 동작하도록 구현합니다.

2. Server - REST API 구현

Node.js에서 Express(익스프레스) 프레임워크를 기반으로 한 서버를 구동합니다. JSON으로 DB를 구축하고 route를 작성합니다.

3. Client - REST API 통신

클라이언트에서 REST API 통신을 통해 실제 데이터를 바탕으로 CRUD를 완성합니다.

4. Server - GraphQL 구현

Apollo Server를 기반으로 하여 서버를 GraphQL 문법으로 변경합니다.

5. Client - GraphQL 통신

클라이언트에 GraphQL 통신을 적용합니다. 무한스크롤 전용 react-query API도 알아봅니다.

예상 질문 Q&A

지식공유자의
다른 강의가 궁금하다면?

코어 자바스크립트 (클릭)

Javascript ES6+ 제대로 알아보기 - 초급 (클릭)

Javascript ES6+ 제대로 알아보기 - 중급 (클릭)

Javascript ES6+ 제대로 알아보기 - 보너스 (클릭)