강의

멘토링

로드맵

BEST
Programming

/

Full-stack

Dự án đồ chơi React full-stack - REST, GraphQL (dành cho nhà phát triển FE)

Thực hành REST API và GraphQL trong khi tạo dịch vụ SNS dựa trên React đơn giản. Giới thiệu một cách đơn giản và dễ dàng để tạo môi trường phụ trợ cho việc phát triển giao diện người dùng.

(4.7) 40 đánh giá

1,009 học viên

  • jaenam
REST API
GraphQL
React

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Phản ứng

  • Tạo cơ sở dữ liệu và máy chủ cục bộ

  • API REST

  • GraphQL

  • CRUD

Các nhà phát triển front-end, hãy nâng cấp!
Xây dựng sự tự tin trong truyền thông dữ liệu.

Trong bài giảng này

REST API, GraphQL, ReactJS for Front-end

Hiểu cách sử dụng REST APIGraphQL ,
Bằng cách xây dựng một cơ sở dữ liệu đơn giản
Sử dụng nó trong danh mục đầu tư của bạn!

Bạn đang chuẩn bị hồ sơ năng lực với mục tiêu tìm được việc làm lập trình viên front-end ? Trong bài giảng này, chúng ta sẽ tạo một dịch vụ mạng xã hội đơn giản bằng React thông qua một dự án nhỏ mang tên "clone coding ". Chúng ta sẽ cùng theo dõi, xây dựng không chỉ mã máy khách mà còn cả máy chủ và cơ sở dữ liệu.


Một nỗi sợ mơ hồ về máy chủ
Bạn có muốn giải quyết vấn đề này không?

Gần đây, khi hướng dẫn những người chuẩn bị cho công việc front-end, tôi nhận thấy nhiều người cảm thấy áp lực khi phải học các công nghệ phía máy chủ.

Học tập xung quanh phía máy chủ
Những lo lắng của một nhà phát triển FE mới vào nghề.

“Tôi cảm thấy gánh nặng rất lớn khi xây dựng môi trường phụ trợ.”

“Tôi muốn thử GraphQL, nhưng tôi không biết phải bắt đầu thế nào nếu không có sự trợ giúp từ phía sau.”

“Có thực sự đúng khi học MongoDB, MySQL, Firebase, v.v. trước khi đi làm không?”

Là một người không chuyên ngành nhưng cũng từng trải qua những khó khăn tương tự, tôi muốn chia sẻ với các bạn những kiến thức tôi đã tích lũy được. Nếu bạn sao chép, mã hóa bài giảng này và theo dõi dòng suy nghĩ của tôi, bạn sẽ tự nhiên tự tin hơn trong lĩnh vực truyền thông dữ liệu .

  • Bằng cách áp dụng phương pháp sử dụng JSON làm DB, bạn sẽ không gặp vấn đề gì khi thực hành giao tiếp dữ liệu ngay cả khi bạn có ít kiến thức về máy chủ và cơ sở dữ liệu.
  • Bằng cách thực hành di chuyển REST API sang GraphQL, bạn sẽ có đủ kiến thức để áp dụng GraphQL.
  • Nếu bạn đang tìm việc, vẫn chưa quá muộn để học MongoDB, MySQL, Firebase và các công nghệ khác sau này khi bạn cần. Hiện tại, tốt nhất là tập trung vào phát triển front-end. Bạn chỉ nên học các khía cạnh phía máy chủ cần thiết cho phát triển front-end.

Về truyền thông dữ liệu
Xây dựng sự tự tin của bạn.


Gửi đến những người này
Tôi khuyên bạn nên làm vậy.

người tìm việc

Việc làm front-end
Chuẩn bị
Không chuyên ngành

Tiền vệ Junior

Tôi muốn có được bí quyết
Giao diện hiện tại
Các nhà phát triển cũng được chào đón!

Thực hành ngay lập tức

API REST, GraphQL
Cả hai
Bất kỳ ai muốn thực hành

Điều này đặc biệt hữu ích cho những người sau:

✅ Những người cảm thấy gánh nặng khi học tập trên máy chủ
✅ Các nhà phát triển front-end muốn làm việc độc lập trên một danh mục đầu tư hoặc dự án đồ chơi
✅ Các nhà phát triển front-end hiện tại muốn đẩy nhanh quá trình phát triển front-end trước khi API sẵn sàng trong giai đoạn phát triển.


Các tính năng của khóa học này

Để xây dựng một DB cục bộ
CRUD tối thiểu
Bằng cách chỉ xử lý các chức năng
Ít gánh nặng học tập hơn.

Thay vì giải thích tập trung vào ngữ pháp,
Tập trung vào các ví dụ thực tế
Kỹ năng phát triển thực tế
Bạn có thể nâng nó lên.

Quá trình phát triển thực tế
Chỉ cần làm theo
Tất nhiên, dòng chảy tổng thể
Bạn có thể hiểu được.

Vui lòng kiểm tra trước khi tham gia lớp học!


Nội dung học tập

1. Client - Triển khai các chức năng cơ bản

Chúng ta sẽ bắt đầu phát triển front-end bằng React và Next.js. Chúng ta sẽ tạo dữ liệu giả và triển khai tất cả các chức năng mà không cần giao tiếp với máy chủ.

2. Máy chủ - Triển khai REST API

Chạy máy chủ dựa trên nền tảng Express trong Node.js. Xây dựng cơ sở dữ liệu và tạo tuyến đường bằng JSON.

3. Giao tiếp giữa máy khách và REST API

Khách hàng hoàn thành CRUD dựa trên dữ liệu thực tế thông qua giao tiếp REST API.

4. Máy chủ - Triển khai GraphQL

Chuyển đổi máy chủ sang cú pháp GraphQL dựa trên Apollo Server.

5. Khách hàng - Giao tiếp GraphQL

Triển khai giao tiếp GraphQL trên máy khách. Chúng ta cũng sẽ khám phá API react-query, chuyên về cuộn vô hạn.


Câu hỏi dự kiến Hỏi & Đáp

H. Đây có phải là khóa học mà sinh viên không chuyên ngành cũng có thể tham gia không?

Đúng vậy, mục tiêu của chúng tôi là cung cấp một môi trường backend tối thiểu để phát triển frontend cho những người không chuyên.

H. Tôi có cần chuẩn bị gì trước khi tham dự buổi thuyết trình không?

Bạn cần cài đặt Node.js và Yarn. Bạn cũng nên làm quen với React và ECMAScript mới nhất để quá trình diễn ra suôn sẻ.

H. Tôi có phải tham dự buổi thuyết trình không?

Không, điều đó không đúng. Tôi đã đăng toàn bộ mã nguồn lên GitHub . Tôi đã tách từng chương thành các nhánh. Nếu bạn có thể xem mã nguồn và học trực tiếp, bạn vẫn có thể nắm vững toàn bộ khóa học mà không cần phải tham dự bài giảng này.

Tuy nhiên, dòng chảy ý thức mà tôi truyền tải bằng lời nói trong suốt bài giảng không thể đạt được chỉ thông qua mã GitHub. Đối với những ai chưa tự tin vào khả năng lập trình và tự giải quyết vấn đề, tôi tin rằng bài giảng này sẽ mang lại trải nghiệm bổ ích hơn nhiều.


Người chia sẻ kiến thức
Bạn có quan tâm đến các bài giảng khác không?

JavaScript cốt lõi (nhấp chuột)

Hiểu về Javascript ES6+ - Người mới bắt đầu (Nhấp chuột)

Javascript ES6+: Hướng dẫn đầy đủ - Trung cấp (Nhấp chuột)

Hiểu về Javascript ES6+ - Phần thưởng (Nhấp chuột)

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • Người tìm việc front-end

  • Nhà phát triển front-end hiện tại

Cần biết trước khi bắt đầu?

  • Phản ứng

  • sợi/npm

Xin chào
Đây là

32,627

Học viên

679

Đánh giá

395

Trả lời

4.8

Xếp hạng

11

Các khóa học

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

Chương trình giảng dạy

Tất cả

25 bài giảng ∙ (3giờ 37phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

40 đánh giá

4.7

40 đánh giá

  • sakom33님의 프로필 이미지
    sakom33

    Đánh giá 7

    Đánh giá trung bình 5.0

    5

    48% đã tham gia

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

    • xiuxiu님의 프로필 이미지
      xiuxiu

      Đánh giá 2

      Đánh giá trung bình 4.0

      5

      48% đã tham gia

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

      • Mark님의 프로필 이미지
        Mark

        Đánh giá 1

        Đánh giá trung bình 5.0

        5

        28% đã tham gia

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

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

          Đánh giá 5

          Đánh giá trung bình 4.8

          4

          100% đã tham gia

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

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

            Đánh giá 10

            Đánh giá trung bình 4.5

            5

            100% đã tham gia

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

            476.857 ₫

            Khóa học khác của jaenam

            Hãy khám phá các khóa học khác của giảng viên!

            Khóa học tương tự

            Khám phá các khóa học khác trong cùng lĩnh vực!