Thumbnail
BEST 개발 · 프로그래밍 풀스택
풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
(4.8)
13개의 수강평 ∙ 318명의 수강생

22,000원

지식공유자 : 정재남
총 25개 수업˙총 3시간 37분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
폴더에 추가 322 공유
초급자를 위해 준비한
[풀스택, 백엔드] 강의입니다.

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

✍️
이런 걸
배워요!
React
로컬 데이터베이스 및 서버 만들기
REST API
GraphQL
CRUD

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

이 강의에서는

REST API, GraphQL, ReactJS for Front-end

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

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


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

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

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

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

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

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

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

  • 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

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

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

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

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

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

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

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


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

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

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

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

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

지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
프론트엔드 취준생
현직 프론트엔드 개발자
📚
선수 지식,
필요한가요?
React
yarn / npm

안녕하세요
정재남 입니다.
정재남의 썸네일

Naver 프론트엔드 개발자입니다.
지식공유를 좋아하며
꾸준히 멘토링 및 스터디를 진행하고 있습니다.

 

저서: 코어 자바스크립트

Github: github.com/roy-jung

블로그: roy-jung.github.io

유튜브 채널: FE재남

커리큘럼 총 25 개 ˙ 3시간 37분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. Intro
섹션 1. Client - 기본기능 구현
(공지) 폰트 이슈 01:20
환경 세팅 04:14
(추가) Next.js 11 대응 01:44
목록뷰 구현하기 미리보기 06:18
스타일 작성 01:43
새글쓰기 기능 구현 08:42
메시지 수정, 삭제 기능 구현 10:09
섹션 2. Server - REST API
express 서버 및 json database 만들기 08:15
routes 정의 19:22
섹션 3. Client - REST API 통신
REST API 통신 기능 구현 14:53
(추가) windows - case issue 대응 / userId 예외처리 02:30
무한스크롤 구현 11:33
서버사이드 렌더링 05:41
섹션 4. Server - GraphQL
GraphQL 환경세팅 및 schema 정의 08:43
resolver 정의 11:23
GraphQL Playground 04:16
(추가) Apollo Server 3.0 업데이트 대응 - 환경세팅 + playground 03:21
섹션 5. Client - GraphQL 통신
ReactQuery 환경세팅 08:50
GraphQL 통신 기능 구현 22:17
섹션 6. Client - GraphQL 무한스크롤
무한스크롤 및 useInfiniteQuery 17:02
mutation 처리 및 기타 기능 보완 17:36
섹션 7. 기타 library 소개
LowDB 09:05
json-server 12:29
섹션 8. Outro
마치며 02:56
강의 게시일 : 2021년 07월 08일 (마지막 업데이트일 : 2021년 07월 21일)
수강평 총 13개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
13개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
김흰둥이 thumbnail
감사합니다.
2021-10-18
xiuxiu thumbnail
선생님 안녕하세요! 호랑이 책도 열심히 읽었습니다(큰 목소리)!! 풀스택 프로젝트 찾고 있다가 강의 새로 뜬 거 보고 빛의 속도로 결재(얼리버드 🐶이득!)하고 쟁여놓다가 이제 학습 시작했습니다. 아직 섹션1밖에 보지 않았지만 간결하지만 핵심만 설명해주시는 점 너무 좋아버리고, 소소하지만 계속 추가 대응 업뎃해주시는 것도 완전 서윗하심..앞으로도 좋을꺼니까 미리 수강평 먼저 씁니다! 보다가 모르면 다시 질문으로 찾아뵙겠습니다. 저도 아래 글처럼 ts 추가 버전도 기다려보겠습니다!!
2021-07-26
sakom33 thumbnail
평소 다른 강의에서 쉽게 접하지 못했지만 프론트엔드 개발자에게 꼭 필요한 강의 같습니다! 프엔 개발도 서버쪽 지식이 필요하다고 해서 풀스택을 공부해야하는건지 막막했는데, 비교적 쉽게 기본적인 통신 개념을 이해하고 경험해 볼 수 있어서 아주 좋았습니다.
2021-07-08
김성수 thumbnail
강사님께서 고민해서 강의를 만드신게 많이 느껴졌습니다. 좋은 강의 만들어주셔서 감사합니다
2021-09-28
Mark thumbnail
짧은 기간동안 완수해야하는 프로젝트를 진행하던 중에 통신 기능을 테스트 해야 함에도 api를 넘겨줄 서버가 없어 급하게 로컬 api를 직접 만들어야 하는 일이 있었습니다. 당시 너무나도 시기 적절하게 해당 강의를 접할 수 있었고, 다행히 기간 내에 문제없이 통신 기능을 테스트 하고 시연할 수 있었습니다 :) 강의 자체가 간결하고 필요한 부분을 콕집어 주시므로 강의를 한 번 완강한 이후에는 혼자서 직접 만들어보기에도 부담없는 강의였습니다. 덕분에 많은 도움이 되었습니다! 감사합니다!
2021-07-14

22,000원

폴더에 추가 322 공유
지식공유자 : 정재남
총 25개 수업˙총 3시간 37분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
이 강의는 멘토링 신청이 가능합니다.
멘토링은 수강 신청과 별개로 운영되며, 수강생이 아니어도 신청할 수 있습니다.
수강 전 궁금한 점이 있나요?
문의하기
문의
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스