강의

멘토링

로드맵

개발 · 프로그래밍

/

데이터베이스

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

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

(4.5) 수강평 6개

수강생 218명

  • Indie Coder

먼저 경험한 수강생들의 후기

이런 걸 배울 수 있어요

  • Graphql

  • Apollo

  • MongoDB

  • Svelte

  • NodeJs

  • nodeJs 파일업로드

  • 토큰기반 인증방법

  • 풀스택(웹백앤드 + 웹프런트앤드)

  • 가상의 키오스크 서비스 개발

프론트엔드, 백엔드 모두 구현 가능!
GraphQL 실전을 경험해보세요 💪


자신감의 가장 좋은 비결은
무언가를 처음부터 끝까지 만들어보는 것입니다.
웹에 대한 기초를 조금이라도 배우셨다면
이번 기회에 다양한 기술들로 한발 더 나아가 보세요!

GraphQL 완전 정복 👑

REST API를 보완, 발전하여 만들어진 차세대 API 제어 기술 GraphQL. GraphQL의 기초부터 고급, 완결된 서비스까지! 이번 강의를 통해 백엔드, 프론트엔드, 배포까지의 모든 과정을 학습할 수 있습니다. 같이 스마트 메뉴판 만들어 보실래요?

쉽게 이해할 수 있도록 준비한 강좌 내용

#1.
GraphQL의
기본 문법과 고급 문법

GraphQL에 필요한 문법들을 모두 차근차근 학습하게 됩니다. 강의의 이론 부분은 이미지, 애니메이션 등을 활용하여 최대한 쉽게 이해하실 수 있도록 준비했습니다.

#2.
실제 프로젝트
(스마트 메뉴) 구현

기본 사용 방법을 익혔으면 다음은 실제 프로젝트 구현이겠죠? 가상의 키오스크 서비스인 스마트 메뉴를 GraphQl을 이용해 만들어 볼 것입니다. 백엔드 서버에서 프론트엔드까지 모두 GraphQL을 중심으로 구현하게 됩니다.

#3.
다양한 문제의
해결 방법

단순히 코드를 따라 하면서 데이터를 읽고 쓰고 수정하는 것을 넘어, 서비스를 만들 때 발생할 수 있는 다양한 문제와 해결 방법을 학습하게 됩니다. Apollo 캐시 이용 시 발생하는 데이터 정합성 문제, NodeJS에서 파일을 업로드할 때 주의해야 할 점, 서비스에 꼭 들어가야 하는 인증 등을 배울 수 있습니다.

#4.
더 효율적인
프론트엔드 개발 방법

요즘 핫하게 떠오르고 있는 Svelte라는 프레임워크를 이용해 보다 효율적으로 프론트엔드 개발하는 방법도 알려드려요. 이를 통해 GraphQL의 기본 지식은 물론, 한 서비스의 백엔드, 프론트엔드, 배포까지 경험할 수 있게 됩니다.


이런 분들께 추천해요 🙋‍♀️

GraphQL에 관심이 있어 입문을 고민하는 분

웹 백엔드, 프론트엔드 풀스택을 경험하고 싶은 분

Apollo, Svelte 등 최신 기술로 만드는 웹이 궁금한 분

HTML, Javascript 기초를 익힌 후 뭔가 구현하고 싶은 분


구현 프로젝트 미리 보기 👀

무한 스크롤로 구현된 메뉴 보기 화면

로그인 화면

메뉴 등록 화면

주문 후 알람 화면

강의 참고 자료 📍

  • 강의에 사용된 패키지나 소스코드 등의 링크의 경우 ‘섹션2 GraphQL 기본 - 강의 자료 소개 ‘ 를 참고 바랍니다.

참고 강의 📚


예상 질문 Q&A 💬

Q. GraphQL에 대한 이론 강의 인가요?

기본 사용법부터 실제 프로젝트에 적용하는 방법 모두를 학습합니다. 프로젝트의 경우 백엔드, 프론트엔드 모두에서 GraphQL을 구현하는 방법이 준비되어 있습니다.

Q. 프론트엔드의 경우 Svelte를 미리 학습해야 하나요?

강의 중간에 간략하게 Svelte의 기본 사용 방법을 준비했습니다. 준비한 내용만 알고 넘어가신다면 충분히 끝까지 학습 가능하다고 생각합니다.

Q. 개발환경은 어떻게 되나요? 

맥, 윈도우 그리고 리눅스 등 nodeJs를 설치할 수 있는 어떤 PC에서도 개발환경에 필요한 프로그램을 설치하고 진행할 수 있습니다.


지식공유자 소개 ✒️

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약 5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다.

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹 관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다.

 

  • 현) 프리랜서
  • 전) (주) 비즈플러그 전략솔루션 사업부 팀장
  • 전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

 

email: freeseamew@gmail.com

blog: https://medium.com/freeseamew

출간 도서


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • javascript 기초를 배우신분

  • 웹 서비스를 처음부터 끝까지 한번 만들고 싶은 분들

  • 웹 백엔드 엔지니어

  • 웹 프런트엔드 엔지니어

선수 지식,
필요할까요?

  • html

  • javascript

안녕하세요
입니다.

2,451

수강생

60

수강평

84

답변

4.8

강의 평점

5

강의

2000년도 중반부터 본격적으로 웹개발을 시작하여 현재까지 프리랜서 개발자로 활동하고 있습니다. 약5년간 Amplix BI 솔루션 실무자 교육을 진행하고 개발을 지원하며 새로운 기술을 효율적으로 전달하는 것에 대한 많은 경험과 고민을 했습니다. 

현재는 개발 업무와 함께 개발자들에게 도움이 될만한 웹관련 분야의 새로운 기술을 찾고 강좌와 책을 통해 공유하고 있습니다. 

 

현) 프리랜서

전) (주) 비즈플러그 전략솔루션 사업부 팀장

전) (주) 퍼니몽키스 위니스토리 서비스 개발 팀장

youtube: https://www.youtube.com/channel/UC3cJspjF4TRTyD_RS0azeaw 

email: freeseamew@gmail.com

blog1: https://medium.com/freeseamew

blog2: https://dev.to/freeseamew

 

강좌 목록

출간도서

yes24, 교보문고, 알라딘

 

 

 

커리큘럼

전체

72개 ∙ (10시간 28분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

6개

4.5

6개의 수강평

  • wndtlr10248980님의 프로필 이미지
    wndtlr10248980

    수강평 5

    평균 평점 4.4

    3

    100% 수강 후 작성

    Nhìn chung thời gian giảng ngắn, có ưu điểm là không gây cảm giác nặng nề và có ưu điểm là trả lời câu hỏi nhanh chóng. Về phần nhược điểm... Mã đã được viết sẽ được hiển thị và giải thích ở định dạng ppt. (Khi được nhấn, mã hiện có sẽ bay đi và mã được thêm vào bằng một thanh trượt) Mặc dù tôi đang xem các cấu trúc mã lạ và nghe giải thích ở định dạng ppt, nhưng tôi không thể hiểu được dòng mã và rất khó theo dõi. Đã có mã bài giảng cho phần này trên GitHub, vậy tại sao bạn không sao chép và dán nó? Bạn có thể làm điều đó. Tuy nhiên, nếu bạn đã có ý định làm như vậy thì GitHub lẽ ra cũng nên lưu mã vào các nhánh cho từng phần bài giảng. Mã bài giảng GitHub đã là mã hoàn chỉnh và việc sao chép và dán mã bằng cách so sánh chúng với bài giảng mà tôi hiện đang nghe rất mệt mỏi. Nghe phần server đầu khóa mình đã học chăm chỉ suốt 4 tiếng đồng hồ không ngừng nghỉ và say mê nhưng từ khi tham gia phần front mình bắt đầu nghĩ học phí quá đắt so với chất lượng. của bài giảng tôi đã chuyển nó đi. Cuối cùng, đây không phải là một buổi hội thảo như Tech Tech, nhưng tôi nghĩ sẽ có nhiều người không thích bài giảng dạng PPT này hơn là thích nó. Hơn nữa, mã không quá phức tạp hay dài nên tôi nghĩ sẽ tốt hơn nếu bạn thêm phần giải thích khi nhập mã cùng nhau. Khi tôi theo dõi bài giảng đến ppt, tôi cảm thấy thực sự mệt mỏi với tư cách là một người nghe. Tôi chỉ xem nửa sau của bài giảng và bỏ qua nó bằng cách nhấp vào nút.

    • viewee님의 프로필 이미지
      viewee

      수강평 3

      평균 평점 3.7

      4

      100% 수강 후 작성

      Bạn đã hoàn thành khóa học. Với sự hiểu biết cơ bản về Javascript, HTML và CSS, Tôi tham gia lớp học vì tôi muốn tạo một dịch vụ toàn diện. Ngoài ra còn có React và Vue nhưng Svelte được cho là dễ dàng và hấp dẫn. Tôi đã chọn thư viện này. Lớp này bao gồm toàn bộ quá trình từ con số 0 đến việc tạo ra một dịch vụ menu thông minh. Lời giải thích được giải thích từng bước nên tôi hiểu rất rõ. /// Điều đáng thất vọng là tôi cứ bị mắc kẹt trong giờ học. Tôi đã mắc một số lỗi chính tả khi viết mã, nhưng có nhiều lỗi chính tả quan trọng trong video bài giảng, vì vậy sẽ nảy sinh vấn đề nếu tôi cố gắng làm theo bằng cách chỉ xem video bài giảng. Thỉnh thoảng có lỗi chính tả trong mã ví dụ nên mỗi lần chạy máy chủ và kiểm tra nó, tôi thường bối rối không biết mình đã mắc lỗi hay có lỗi đánh máy trong nội dung bài giảng. (Tôi không hiểu làm thế nào những người viết bài đánh giá lớp khác lại tiến hành lớp học mà không đặt câu hỏi trên bảng thông báo. Chẳng phải họ đã đi đến cùng sao?) Môi trường trong lớp là Mac OS và môi trường của tôi là môi trường Windows, vì vậy không giống như lớp đó, lệnh thực thi máy chủ là met.bat thay vì sao băng. Hoặc có vấn đề về tiến độ lớp học khác nhau do phiên bản hiện tại của Meteor khác. Tuy nhiên, khi tôi đăng câu hỏi về những vấn đề này lên bảng tin cộng đồng, giáo viên đã trả lời trong vòng một hoặc hai ngày nên tôi có thể tiếp tục đến lớp. // Từ phần 4 về cách tạo SMART MENU, ban đầu thì không sao, nhưng khi mã ngày càng mở rộng, việc so sánh sự khác biệt với mã trước đó khi xảy ra lỗi trở nên rất quan trọng. Tôi cảm thấy cần phải kiểm soát phiên bản, đồng thời nghiên cứu và áp dụng Git riêng biệt. Vì tôi tham gia lớp học bằng cách tạo một nhánh bất cứ khi nào mã trong mỗi phần được hoàn thành mà không có lỗi và cam kết mỗi khi hoàn thành một chương nhỏ trong phần đó nên tôi có thể phản hồi nhanh chóng ngay cả khi có lỗi xảy ra sau phần 12 và 13. Đối với những người mới bắt đầu như tôi, tôi khuyên bạn nên học Git riêng và sử dụng nó trong lớp. Ngoài ra, về việc gỡ lỗi trong lớp, tôi nghĩ sẽ tốt hơn cho những người mới bắt đầu như tôi nếu có nhiều phần hơn để kiểm tra cửa sổ terminal cho phần phụ trợ và cửa sổ bảng điều khiển cho giao diện người dùng. Đây là nội dung cơ bản nên tôi không nghĩ nó được đưa vào nội dung của lớp. Tuy nhiên, tôi nghĩ sẽ tốt hơn nếu đề cập ngắn gọn về git và các phương pháp gỡ lỗi trong lớp. // < Sự cố chặn phụ đề > Ngoài ra còn có các video có phụ đề giữa các bài giảng và tôi hy vọng rằng khi đổi mới phụ đề, chúng sẽ được đặt phía trên thanh phát. Mỗi lần tôi dừng lại và nhìn, phụ đề đều bị che khuất. ㅠ // Trong khi dạy lớp, tôi đã làm việc chăm chỉ để báo cáo bất kỳ chỗ mắc kẹt và lỗi chính tả nhỏ nào, và để giải quyết những chỗ này, Giáo viên cho biết công việc đổi mới khóa học sẽ được thực hiện vào tháng 3 năm 2023, vì vậy những người tham gia lớp học sau đó có thể sẽ thấy lớp học thoải mái hơn. // Sau khi hoàn thành lớp học, - Cách thức hoạt động của GraphQL nói chung và cách vận hành nó trên máy chủ Apollo. - Bạn đang sử dụng Svelte để xây dựng front-end kết nối với back-end một cách dễ dàng và nhanh chóng? Tôi đã có thể tìm ra. Tôi chăm chú nghe và hiểu, nhưng tôi nghĩ mình cần đọc lại hai ba lần để hiểu rõ hơn về cấu trúc và cách thức hoạt động. Cá nhân tôi nghĩ mình cần nghiên cứu thêm về cách tạo front-end bằng Svelte, vì vậy tôi nghĩ mình cần phải học thêm. Là người mới bắt đầu chỉ xem React hoặc Vue qua video nên tôi không chắc lắm, nhưng sau khi tạo dịch vụ bằng Svelte, tôi thấy Svelte rất dễ dàng và trực quan. Một khung tích hợp dành riêng cho Svelte có tên là svelteKit đã được phát hành và tôi hy vọng rằng bạn cũng sẽ tạo một khóa học cho phần này.. Nội dung bài giảng thực sự mang tính thông tin nên nếu bạn muốn nghe thì hãy nghe nhé.

      • holocoding
        지식공유자

        Tôi rất vui vì bạn đã hoàn thành bài giảng một cách an toàn. Trước tiên, chúng tôi đã cải thiện lỗi chính tả và các phần có vấn đề bằng cách nhận xét về video. Cảm ơn bạn đã chỉ ra phần này. Và về sveltekit, chúng tôi sẽ cố gắng ra mắt sớm nhất có thể. Một lần nữa xin chúc mừng bạn đã hoàn thành khóa học. Cảm ơn

    • sycheon3883님의 프로필 이미지
      sycheon3883

      수강평 2

      평균 평점 5.0

      5

      80% 수강 후 작성

      Bố cục hay quá

      • holocoding
        지식공유자

        Tôi rất vui vì bạn thích khóa học. Chúng tôi sẽ tiếp tục nỗ lực chuẩn bị những bài giảng hay trong thời gian tới. :)

    • lsmin01님의 프로필 이미지
      lsmin01

      수강평 1

      평균 평점 5.0

      5

      100% 수강 후 작성

      Cảm ơn bạn vì bài giảng tuyệt vời. Tôi quen với cách phát triển giao diện người dùng/được hỗ trợ dựa trên graphql. Các phần bộ đệm, liên kết, tải lên tệp và xác thực cũng rất hữu ích. Đây là lần đầu tiên tôi sử dụng sao băng, nhưng tôi thấy nó hữu ích sau khi làm theo quá trình triển khai cuối cùng. Tôi mong đợi nội dung tốt trong tương lai.

      • holocoding
        지식공유자

        Cảm ơn bạn đã để lại đánh giá. Tôi rất vui vì bạn thấy nội dung này hữu ích. Sau đó hãy vui vẻ viết mã :)

    • leaguematter7718님의 프로필 이미지
      leaguematter7718

      수강평 5

      평균 평점 4.6

      5

      31% 수강 후 작성

      월 ₩232,795

      5개월 할부 시

      ₩55,000

      Indie Coder님의 다른 강의

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

      비슷한 강의

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

      연관 로드맵

      강의가 포함된 로드맵으로 학습해 보세요!