Thumbnail
개발 · 프로그래밍 데이터베이스

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

(4.8)
4개의 수강평 ∙  184명의 수강생

55,000원

지식공유자: Indie Coder
총 72개 수업 (10시간 28분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

초급자를 위해 준비한
[풀스택, 웹 개발] 강의입니다.

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

✍️
이런 걸
배워요!
Graphql
Apollo
MongoDB
Svelte
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

안녕하세요
Indie Coder 입니다.
Indie Coder의 썸네일

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분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. GraphQL 완전정복 강좌 소개
섹션 1. GraphQL 소개
섹션 2. GraphQL 기본
섹션 3. GraphQL 고급
apollo-server 기본구조 미리보기 07:22 MongoDB 기본 미리보기 20:04
Query를 좀 더 깊게 알아보기 13:15
nova를 통한 성능 개선 15:05
nova를 이용한 쿼리 작성 04:51
Subscription을 이용한 실시간 데이터 처리 05:41
섹션 4. SMART MENU 서비스 개발 환경 설정
SMART MENU 서비스 개발환경 설정 10:25
섹션 5. Backend 개발 1
Smart menu 서비스 소개 미리보기 02:15
폴더 구조 설명 04:19
collection 작성 03:32
menu Schema 작성 12:32
order resolver 작성 08:35
item resolver - Query 작성 11:46
item resolver - Mutation 작성 07:20
apollo-server 설정 05:23
menu API 테스트 15:04
subscription 16:13
섹션 6. Backend 개발 2
인증과정 설명 05:46
auth Schema 작성 05:02
auth resolver - Mutation 작성 08:28
auth resolver - Query 작성 03:04
기본 사용자 등록 06:31
섹션 7. Frontend 개발 - 개발 준비 및 기본 설정
Svelte 기본 27:06
Svetle store 09:38
필수 모듈 설치 & 폴더 구조 설명 08:11
svelte-apollo 기본 사용방법 06:02
apollo-client 기본 설정 02:19
apollo-client - link 07:28
디자인 요소 배치 30:12
섹션 8. Frontend 개발 - category 관련 기능구현
category 목록 보기 06:05
modal compoent 만들기 12:12
categoryForm - 추가, 삭제 08:19
categoryForm - 수정 04:23
섹션 9. Frontend 개발 - item 관련 기능구현
fragment를 이용한 GraphQL문 효율증가 미리보기 02:12
item 목록 보기 04:22
item 추가 11:05
item 무한 스크롤 기능 09:50
item 수정 삭제 09:36
category 선택 및 검색 10:02
섹션 10. apollo-cache
apollo-cache 기본 15:06
apollo-cache 조작 방법 13:34
섹션 11. 파일 업로드
파일 업로드 API 서버 구현 12:20
Frontend 업로드 구현 05:35
이미지 출력 07:55
파일 검증 05:20
섹션 12. Frontend 개발 - 인증
인증 기본 설정 미리보기 03:03
로그인 12:03
로그아웃 06:18
관리자 로그인시 페이지 변화 05:42
가입유저 관리 11:15
섹션 13. Frontend 개발 - 메뉴 주문
Svelte store를 이용한 주문 처리 18:37
관리자 화면에서 주문목록 보기 13:22
주문관련 캐시 설정 03:57
섹션 14. 서비스 고도화
validate(폼검증) 설정 17:21
notyf를 이용한 알람 효과 05:40
화면전환 효과 04:54
페이지 로딩 효과 08:37
category 선택 중 호출금지 01:42
동적 css 적용 04:41
sandbox 비활성화 01:32
섹션 15. 서비스 배포
섹션 16. 맺음말
섹션 17. 강좌 AS
apollo-server v4로 마이그레이션 08:39
강의 게시일 : 2022년 07월 12일 (마지막 업데이트일 : 2024년 02월 23일)
수강평 총 4개
수강생분들이 직접 작성하신 수강평입니다.
4.8
4개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
JaeWon Kim thumbnail
5
중간에 안되는 부분들이 있었는데 친절하게 모두 설명 해 주셔서 감사했습니다! 키오스크가 필요했는데 사용할 수 있게 해주셔서 감사합니다! 사실 graphql과 meteor는 잘 사용안해봐서 적응하기까지는 좀 걸릴거 같아요..! 나중에 서버는 자바로 바꿔보면서 더 공부해봐야겠습니다 자세하게 설명해주셔서 감사합니다 즐겁게 수강했어요
2023-01-03
지식공유자 Indie Coder
감사합니다. 도움이 되셨다니 저도 기쁘네요. 앞으로 계속 도움이 되는 강의 만들도록 노력하겠습니다. 감사합니다.
2023-01-03
lsmin01 thumbnail
5
좋은 강의 감사합니다. graphql 기반으로 frontend/backed 개발하는 방법이 손에 익었고 cache, link, file upload, 인증 파트도 도움이 많이 되었습니다. meteor는 처음이지만 마지막배포까지 따라하면서 사용해보니 유용한거 같습니다. 앞으로 좋은 컨텐츠 기대하겠습니다.
2022-08-22
지식공유자 Indie Coder
수강평 달아주셔서 감사합니다. 내용이 도움이 되셨다니 다행입니다. 그럼 즐거운 코딩 하세요 :)
2022-08-22
천세영 thumbnail
5
구성이 너무 좋습니다
2022-10-26
지식공유자 Indie Coder
수강이 맘에 드셔서 다행입니다. 앞으로도 계속 좋은 강의 준비하기 위해 노력하겠습니다. :)
2022-10-26
viewee thumbnail
4
수강을 완료하였습니다. Javascript, html, css 기초 닦은 상태에서, 풀스택 서비스를 만들어보고 싶어서, 수강했습니다. react 나 vue 도 있는데 svelte가 쉽고 핫하다고 해서, 이 라이브러리로 선택했습니다. 이 수업은 제로부터 스마트메뉴 서비스를 만들기까지 모든 과정이 다 녹아져있었습니다. 설명도 차근차근 잘 해주셔서, 이해가 잘 되었습니다. /// 아쉬웠던 점은, 수업을 진행할때, 중간중간 계속 막혔었는데. 제가 코드를 작성시 오타를 낸 것도 있지만, 강의영상에 중요한 오타가 많이 있었어서, 강의영상만 보고 따라칠 경우 문제가 발생하기도 했습니다. 예제코드에서도 오타가 간간히 있어서, 서버를 실행해서 테스트할 때마다, 내가 잘못친건지, 강의내용에 오타가 있는건지 헷갈리는 경우가 많았습니다. (수강평을 작성하신 다른 분들은 게시판에 질문없이 어떻게 수업을 진행하셨는지.. 좀 이해가 안가기도.. 완강까진 하지 않으신건가?) 수업에서 진행되는 환경은 맥OS였고, 저는 windows 환경이었기 때문에, 수업과 다르게 서버실행 명령어가 meteor 가 아닌 meteor.bat 이라던지. 또는, 수업과 지금의 meteor 버젼이 달라서 다르게 진행되는 문제등이 있었습니다. 그래도, 이런 문제들을 커뮤니티 게시판에 질문을 올리면, 선생님께서 답변을 하루이틀 안에 잘 해주셔서, 계속해서 수업을 이어나갈 수 있었습니다. // SMART MENU 를 만드는 섹션4부터는, 처음에는 괜찮았는데, 점점 코드가 방대해지면서, 버그가 발생할 때, 이전 코드와 차이점을 비교하는게 매우 중요했어서, 버젼관리의 필요성을 느끼고, 따로 git 을 공부하고 적용해가며 들었습니다. 각 섹션의 코드가 버그 없이 끝날때마다 branch를 만들어주고, 섹션안의 작은 챕터가 끝날 때마다 commit 을 해주면서 수업을 들으니, 섹션 12, 13 이후로 가서 버그가 발생해도 빠르게 대처할 수 있었습니다. 저같은 초보분들은 git을 따로 공부하셔서 수업에 활용하시는 것을 추천드립니다. 또, 수업에서 디버깅관련하여, 백엔드는 terminal 창, 프론트엔드는 console 창을 확인하는 부분이 좀 더 있었으면, 저같은 초보들은 더 좋았지 않았을까 싶습니다. 이런건 기초적인 내용이라 수업흐름상 들어가진 않은 것 같습니다. 하지만 수업에서 git이나 디버깅 방법등에대해서 간단한 언급정도는 해주시면 좋을 것 같다는 생각이 들었습니다. // < 자막 가림문제 > 중간중간 강의에 자막이 들어가는 영상도 있었는데, 자막의 경우 리뉴얼작업하실 때는 꼭 재생바 위로 위치하도록 해주셨으면 좋겠습니다. 멈춰서 볼 때마다 자막이 가려져요. ㅠ // 제가 수업을 진행하면서, 막혔던 부분과 사소한 오탈자등을 제보를 열심히 했었는데, 이런 부분들을 반영하여, 선생님께서 강좌 리뉴얼 작업을 23년 3월 중 진행하신다고 하시니, 이후 수업을 들으시는 분들은 더 쾌적하게 수업을 들으실 거 같습니다. // 수업 정주행을 완료하니, - 전반적인 GraphQL 의 작동 방식과 그것을 Apollo 서버에서 어떻게 운용하는지. - Svelte 를 활용해서 쉽고 빠르게 백엔드와 연결되는 프론트엔드를 구축하는지 등을 알 수 있었습니다. 열심히 들으면서, 이해는 했는데, 두세번은 정주행을 해봐야, 더 그 구조와 작동방식이 익숙해질 것 같습니다. 개인적으로 svelte 를 이용해서, 프론트엔드를 만드는 부분은 좀 더 공부가 필요할 거 같아서, 추가적인 학습을 좀 더 해야할 것 같습니다. react 나 vue 를 영상을 통해 구경만 해본, 초보 입장에서 잘은 모르겠지만, svelte 를 활용해 서비스를 따라 만들어보니 svelte가 쉽고 직관적으로 느껴졌습니다. svelteKit 이라는 svelte 전용 통합 프레임워크가 나왔던데, 선생님께서 이부분 강좌도 만들어주셨으면 하는 바램도 있습니다.ㅎㅎ.. 강의 내용이 정말 알차니 들어보고 싶으신 분들은 들어보시길 바랍니다.
2023-03-09
지식공유자 Indie Coder
강의 무사히 마치셔서 다행입니다. 오타나 문제있는 부분들은 일단 영상에 코멘트하는 방식으로 해서 우선 개선했습니다. 이부분 지적 감사합니다. 그리고 sveltekit관련해서도 최대한 빨리 한번 만들어 보도록 하겠습니다. 다시한번 완강 축하드립니다. 감사합니다.
2023-03-09
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!