BEST

개발 · 프로그래밍

풀스택

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

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

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

(4.7) 수강평 38개

수강생 1,003명

정재남

REST API GraphQL React

초급자를 위해 준비한
[웹 개발, 백엔드] 강의입니다.

이런 걸 배울 수 있어요

React
로컬 데이터베이스 및 서버 만들기
REST API
GraphQL
CRUD

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

이 강의에서는

REST API, GraphQL, ReactJS for Front-end

REST API 및 GraphQL의 사용방식을 이해하고,
간단한 데이터베이스를 구축함으로써
포트폴리오에 활용해 보세요!

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

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

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

서버사이드 학습을 둘러싼
초보 FE 개발자의 고민.

“백엔드 환경 구축에 큰 부담을 느낍니다.”

“GraphQL을 써보고는 싶은데, 백엔드 도움 없이 어떻게 시작할지 모르겠어요.”

“취업을 앞두고 MongoDB, MySQL, Firebase 등을 학습하는 게 과연 옳을까요?”

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

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

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

이런 분들께
추천합니다.

취업 준비생

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

프론트 주니어

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

한번에 연습

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

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

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

이 강의의 특징

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

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

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

수강 전 확인해주세요!

선수 지식으로 React, YARN, npm 관련 지식이 필요합니다.
전체 코드는 깃헙을 통해 확인하실 수 있습니다. (https://github.com/roy-jung/api-practice)

학습 내용

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

Q. 비전공자도 들을 수 있는 강의인가요?

네, 비전공자를 대상으로 프론트엔드 개발에 필요한 최소한의 백엔드 환경을 구성할 수 있는 것을 목표로 합니다.

Q. 강의를 듣기 전 준비해야 할 것이 있나요?

Node.js(노드), Yarn이 설치되어 있어야 합니다. React 및 최신 ECMAScript에 대한 학습이 어느정도 이루어져 있어야 진도를 수월하게 나가실 수 있습니다.

Q. 강의를 꼭 들어야만 하나요?

그렇지 않습니다. 깃헙에 전체 코드를 공개해 두었습니다. 챕터별로 브랜치를 분리했는데, 코드를 보고 직접 학습하실 수 있다면 굳이 이 강의를 듣지 않아도 강의 전체 내용을 습득하시는 데에 문제가 없습니다.

다만 강의 전반에 걸쳐 말을 통해 전달해드리는 제 의식의 흐름은 깃헙 코드만으로는 얻어가실 수 없겠죠. 스스로 코딩하고 문제를 해결하는 데에 자신이 없는 분들이라면 본 강의를 통해 훨씬 유익한 시간이 되시리라 생각합니다.

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

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

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

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

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

이런 분들께
추천드려요!

학습 대상은
누구일까요?

프론트엔드 취준생
현직 프론트엔드 개발자

선수 지식,
필요할까요?

React
yarn / npm

안녕하세요
정재남입니다.

31,778

명

수강생

655

개

수강평

392

개

답변

4.9

점

강의 평점

개

강의

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI

커리큘럼

전체

25개 ∙ (3시간 37분)

섹션 1. Intro

1개 ∙ (3분)

1. 소개
03:16

섹션 2. Client - 기본기능 구현

7개 ∙ (34분)

2. (공지) 폰트 이슈
01:20
3. 환경 세팅
04:14
4. (추가) Next.js 11 대응
01:44
5. 목록뷰 구현하기
06:18
6. 스타일 작성
01:43
7. 새글쓰기 기능 구현
08:42
8. 메시지 수정, 삭제 기능 구현
10:09

섹션 3. Server - REST API

2개 ∙ (27분)

9. express 서버 및 json database 만들기
08:15
10. routes 정의
19:22

섹션 4. Client - REST API 통신

4개 ∙ (34분)

섹션 5. Server - GraphQL

4개 ∙ (27분)

섹션 6. Client - GraphQL 통신

2개 ∙ (31분)

섹션 7. Client - GraphQL 무한스크롤

2개 ∙ (34분)

섹션 8. 기타 library 소개

2개 ∙ (21분)

섹션 9. Outro

1개 ∙ (2분)

강의 게시일: 2021. 07. 07.

마지막 업데이트일: 2025. 05. 19.

수강평

전체

38개

4.7

38개의 수강평

Mark
수강평 1
∙
평균 평점 5.0
2021. 07. 14.
5
28% 수강 후 작성
짧은 기간동안 완수해야하는 프로젝트를 진행하던 중에 통신 기능을 테스트 해야 함에도 api를 넘겨줄 서버가 없어 급하게 로컬 api를 직접 만들어야 하는 일이 있었습니다. 당시 너무나도 시기 적절하게 해당 강의를 접할 수 있었고, 다행히 기간 내에 문제없이 통신 기능을 테스트 하고 시연할 수 있었습니다 :) 강의 자체가 간결하고 필요한 부분을 콕집어 주시므로 강의를 한 번 완강한 이후에는 혼자서 직접 만들어보기에도 부담없는 강의였습니다. 덕분에 많은 도움이 되었습니다! 감사합니다!
xiuxiu
수강평 2
∙
평균 평점 4.0
2021. 07. 26.
5
48% 수강 후 작성
선생님 안녕하세요! 호랑이 책도 열심히 읽었습니다(큰 목소리)!! 풀스택 프로젝트 찾고 있다가 강의 새로 뜬 거 보고 빛의 속도로 결재(얼리버드 🐶이득!)하고 쟁여놓다가 이제 학습 시작했습니다. 아직 섹션1밖에 보지 않았지만 간결하지만 핵심만 설명해주시는 점 너무 좋아버리고, 소소하지만 계속 추가 대응 업뎃해주시는 것도 완전 서윗하심..앞으로도 좋을꺼니까 미리 수강평 먼저 씁니다! 보다가 모르면 다시 질문으로 찾아뵙겠습니다. 저도 아래 글처럼 ts 추가 버전도 기다려보겠습니다!!
sakom33
수강평 7
∙
평균 평점 5.0
2021. 07. 08.
5
48% 수강 후 작성
평소 다른 강의에서 쉽게 접하지 못했지만 프론트엔드 개발자에게 꼭 필요한 강의 같습니다! 프엔 개발도 서버쪽 지식이 필요하다고 해서 풀스택을 공부해야하는건지 막막했는데, 비교적 쉽게 기본적인 통신 개념을 이해하고 경험해 볼 수 있어서 아주 좋았습니다.
노강표
수강평 5
∙
평균 평점 4.8
2022. 02. 13.
4
100% 수강 후 작성
토이프로젝트를 진행하기전에 전체적인 흐름을잡기위해 강의를들었는데 도움이 되었습니다. rest에서 graphql로 변경하면서 graphql이 좀더 유연하다는것을 직접 느낄수 있었던것같고, 다만 graphql을 아예 처음듣는 입장으로썬 이해하는데는 어려워 다른 내용을 추가로 찾아봤었습니다. 특히 클라이언트 측에서 리액트 쿼리부분은 직접 적용하기에는 좀더 찾아봐야할것같습니다.. 하지만 리액트 쿼리가 주는 장점은 확실히 있는것같습니다. 부트캠프를 마치고 들었던 입장으로썬 단순한 풀스택 토이프로젝트가 아닌 좀더 신기술(?)을 다뤄본것같아 앞으로 공부할 범위가되어 힘들지만 만족스럽게 들었습니다.
임채영
수강평 10
∙
평균 평점 4.5
2021. 12. 27.
5
100% 수강 후 작성
GraphQL에 대한 이해도가 없는 상태에서 수강했어요. 해당 기술이 어떤 건지 어느정도 맛을 볼 수 있었던 시간이었어요. 학습 볼륨이 크진 않지만 재밌게 학습할 수 있었습니다. 리액트와 Next.js에 대한 이해도가 약간 필요하고 섹션6의 mutation 처리 및 기타 기능 보안 부분은 좀 어려웠습니다.

정재남님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기

정재남

개발부터 배포까지! 하나의 서비스를 완성하기 위한 험난한 여정을 여과없이 보여드립니다. 처음 써보는 기술들을 잔뜩 도입하여 좌충우돌 우당탕탕하면서도 어떻게든 헤쳐나갈 수 있어요!

초급

React, GraphQL, Firebase

리액트 공식문서 함께 공부하기

정재남

2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

입문

React, JavaScript, react.js

[React / VanillaJS] UI 요소 직접 만들기 Part 2

정재남

대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

초급

React, vanilla-js, ui

[React / VanillaJS] UI 요소 직접 만들기 Part 1

정재남

초급

React, vanilla-js, ui

모던 자바스크립트 딥다이브 스터디

정재남

《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!

초급

JavaScript

이펙티브 타입스크립트 스터디

정재남

《이펙티브 타입스크립트》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!

초급

TypeScript

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

초급

ES6, JavaScript

Javascript ES6+ 제대로 알아보기 - 중급

정재남

ES6+ 제대로 알아보기 강좌는 Javascript의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 살펴봅니다.

중급이상

JavaScript, ES6

Javascript ES6+ 제대로 알아보기 - 초급

정재남

초급

JavaScript, ES6

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

JavaScript

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

Indie Coder

차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

초급

GraphQL, Svelte, MongoDB