강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

フルスタックリアクトトイプロジェクト - REST, GraphQL (for FE開発者)

ReactベースのシンプルなSNSサービスを作成しながら、REST APIとGraphQLを練習します。 フロントエンド開発のためのバックエンド環境を簡単かつ簡単にする方法を紹介します。

  • jaenam
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関連の知識が必要です。
  • 完全なコードは羽毛で確認することができます。

学習内容

1. Client - 基本機能の実装

React と Next.js ベースのフロントエンド開発を開始します。

2. Server - REST APIの実装

Node.jsでExpress(Express)フレームワークに基づいてサーバーを駆動します。JSONでDBを構築し、ルートを作成します。

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がインストールされている必要があります。

Q. 講義を必ず聞かなければなりませんか?

そうでありませんでした。

ただ、講義全般にわたって言葉を通じて伝えてくれる私の意識の流れは、フェッヘットコードだけでは得られないでしょう。


知識共有者の
他の講義が気になったら?

コアJavaScript (クリック)

Javascript ES6+を正しく学ぶ - 初心者 (クリック)

Javascript ES6+を正しく学ぶ - 中級(クリック)

Javascript ES6+を正しく学ぶ - ボーナス(クリック)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • フロントエンド就任生

  • 現職のフロントエンド開発者

前提知識、
必要でしょうか?

  • React

  • yarn/npm

こんにちは
です。

32,417

受講生

672

受講レビュー

393

回答

4.8

講座評価

11

講座

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

カリキュラム

全体

25件 ∙ (3時間 37分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

39件

4.7

39件の受講レビュー

  • sakom33님의 프로필 이미지
    sakom33

    受講レビュー 7

    平均評価 5.0

    5

    48% 受講後に作成

    평소 다른 강의에서 쉽게 접하지 못했지만 프론트엔드 개발자에게 꼭 필요한 강의 같습니다! 프엔 개발도 서버쪽 지식이 필요하다고 해서 풀스택을 공부해야하는건지 막막했는데, 비교적 쉽게 기본적인 통신 개념을 이해하고 경험해 볼 수 있어서 아주 좋았습니다.

    • xiuxiu님의 프로필 이미지
      xiuxiu

      受講レビュー 2

      平均評価 4.0

      5

      48% 受講後に作成

      선생님 안녕하세요! 호랑이 책도 열심히 읽었습니다(큰 목소리)!! 풀스택 프로젝트 찾고 있다가 강의 새로 뜬 거 보고 빛의 속도로 결재(얼리버드 🐶이득!)하고 쟁여놓다가 이제 학습 시작했습니다. 아직 섹션1밖에 보지 않았지만 간결하지만 핵심만 설명해주시는 점 너무 좋아버리고, 소소하지만 계속 추가 대응 업뎃해주시는 것도 완전 서윗하심..앞으로도 좋을꺼니까 미리 수강평 먼저 씁니다! 보다가 모르면 다시 질문으로 찾아뵙겠습니다. 저도 아래 글처럼 ts 추가 버전도 기다려보겠습니다!!

      • Mark님의 프로필 이미지
        Mark

        受講レビュー 1

        平均評価 5.0

        5

        28% 受講後に作成

        짧은 기간동안 완수해야하는 프로젝트를 진행하던 중에 통신 기능을 테스트 해야 함에도 api를 넘겨줄 서버가 없어 급하게 로컬 api를 직접 만들어야 하는 일이 있었습니다. 당시 너무나도 시기 적절하게 해당 강의를 접할 수 있었고, 다행히 기간 내에 문제없이 통신 기능을 테스트 하고 시연할 수 있었습니다 :) 강의 자체가 간결하고 필요한 부분을 콕집어 주시므로 강의를 한 번 완강한 이후에는 혼자서 직접 만들어보기에도 부담없는 강의였습니다. 덕분에 많은 도움이 되었습니다! 감사합니다!

        • 노강표님의 프로필 이미지
          노강표

          受講レビュー 5

          平均評価 4.8

          4

          100% 受講後に作成

          토이프로젝트를 진행하기전에 전체적인 흐름을잡기위해 강의를들었는데 도움이 되었습니다. rest에서 graphql로 변경하면서 graphql이 좀더 유연하다는것을 직접 느낄수 있었던것같고, 다만 graphql을 아예 처음듣는 입장으로썬 이해하는데는 어려워 다른 내용을 추가로 찾아봤었습니다. 특히 클라이언트 측에서 리액트 쿼리부분은 직접 적용하기에는 좀더 찾아봐야할것같습니다.. 하지만 리액트 쿼리가 주는 장점은 확실히 있는것같습니다. 부트캠프를 마치고 들었던 입장으로썬 단순한 풀스택 토이프로젝트가 아닌 좀더 신기술(?)을 다뤄본것같아 앞으로 공부할 범위가되어 힘들지만 만족스럽게 들었습니다.

          • 임채영님의 프로필 이미지
            임채영

            受講レビュー 10

            平均評価 4.5

            5

            100% 受講後に作成

            GraphQL에 대한 이해도가 없는 상태에서 수강했어요. 해당 기술이 어떤 건지 어느정도 맛을 볼 수 있었던 시간이었어요. 학습 볼륨이 크진 않지만 재밌게 학습할 수 있었습니다. 리액트와 Next.js에 대한 이해도가 약간 필요하고 섹션6의 mutation 처리 및 기타 기능 보안 부분은 좀 어려웠습니다.

            ¥2,680

            jaenamの他の講座

            知識共有者の他の講座を見てみましょう!

            似ている講座

            同じ分野の他の講座を見てみましょう!