Thumbnail
BEST
개발 · 프로그래밍 프론트엔드

풀스택 리액트 라이브코딩 - 간단한 쇼핑몰 만들기 대시보드

(5)
12개의 수강평 ∙  1,125명의 수강생

22,000원

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

초급자를 위해 준비한
[프론트엔드, 풀스택] 강의입니다.

개발부터 배포까지! 하나의 서비스를 완성하기 위한 험난한 여정을 여과없이 보여드립니다. 처음 써보는 기술들을 잔뜩 도입하여 좌충우돌 우당탕탕하면서도 어떻게든 헤쳐나갈 수 있어요!

✍️
이런 걸
배워요!
리액트 웹서비스 개발
GraphQL
React-Query
Firebase

생생하게 현장감이 느껴지는 강의를 듣고
무작정 코딩을 시작해 쇼핑몰 서비스 제작까지! 🩳

하나의 서비스를
완성하기까지의 여정 🚢

본 강의는 수강생들과 함께 라이브로 진행된 강의로, 당장 필요한 내용만을 빠르게 찾아내어 적용합니다.
개발 과정에서 처하게 되는 다양한 문제상황들을 고민하고 해결해나가는 과정을 여과없이 보여드립니다.

이 강의를 통해 무작정 코딩을 시작해도 어떻게든 완성해낼 수 있다는 것을 보여드리고 싶습니다.
이로써 무언가를 만들어보는 것에 어려움을 겪는 취준생 또는 주니어 분들께 용기를 드리고자 합니다.
전체 코드는 깃헙에 공개되어 있으니 참고해주세요!

"리액트 학습은 했지만 막상 혼자 프로젝트를 진행하려고 하니 막막해요.
남들은 어떻게 개발 공부를 하고 있는지도 궁금해요."
-프론트엔드 취업준비생-

"백엔드 쪽 지식이 전혀 없어 개발을 생각만 해도 막막하고,
프로젝트 진행에 한계를 느껴요."

-주니어 프론트엔드 개발자-

"코딩하다 막혔을 때 어떻게 처리해야 할지 몰라 쩔쩔매요.
추가적으로 GraphQL과 BFF를 연습해보고 싶어요
."
-프론트엔드 개발자-


라이브코딩에서
매일 하나씩 배워요 🎥

1일차

  • 클라이언트 환경세팅 (vite), 라우터 처리
  • 상품목록 및 상세페이지 작성
  • React Query 캐시정책
  • GNB 작성

2일차

  • Mock Service Worker 도입
  • 상품목록 및 장바구니 mock API 작성
  • 장바구니 페이지 작성

3일차

  • 장바구니 API 적용
  • invalidateQueries vs. 낙관적 업데이트
  • 장바구니 삭제 및 선택하기 기능 구현

4일차

  • 장바구니 상태관리 (recoil)
  • 결제 페이지

5일차

  • 모노레포 도입 (yarn workspace)
  • 서버환경설정
  • schema 및 resolver 정의

6일차

  • json DB 생성
  • 서버 변경사항 클라이언트에 반영

7일차

  • 무한스크롤- 서버 작업
  • useInfiniteQuery
  • intersectionObserver

8일차

  • 어드민 API 작성
  • 어드민 페이지- 목록, 상품 추가, 수정, 삭제 기능 구현

9일차

  • Firebase 적용

10일차

  • Firebase 적용 마무리 및 배포

🔔 10일 동안 직접 부딪히며 배우는 코딩으로 쇼핑몰 서비스를 제작해봅니다.


강의를 다 들은 후
수강생의 모습 😎

스스로 프로젝트를 진행하기에 충분한 지식을 습득할 수 있습니다.
프로젝트 진행과정에서 만나는 다양한 문제상황을 해결할 힘이 생깁니다.

실무 경력 9년차의 다양한 노하우를 아낌없이 나눠드릴게요.
일단 무작정 프로젝트를 시작해서 문제상황에 부딪힐 때마다
검색, 디버깅 및 온갖 추측을 총동원하여 어떻게든 해결해나가는 법을 알려드립니다.

Q&A 💬

Q. 강의 수강이 가능한 수준이 궁금해요.

본 강의에서는 리액트나 타입스크립트에 대한 기본지식은 별도로 다루지 않기에 어느 정도 학습이 되어있는 상태여야 원활한 수강이 가능할 거라고 생각합니다. 하지만 그 밖의 다른 지식들까지 요구되는 정도는 아니며, 무작정 듣고 생각하며 따라하시다보면 자연스럽게 습득하실 수 있어요.

Q. 이론도 강의 내용 중 포함되어 있나요?

중간중간 프로젝트 진행에 필요할만큼의 지식을 알려드리거나, 영상 촬영 시 참여했던 멤버분들의 질문에 실시간으로 답변을 드리는 내용들이 포함되어 있습니다. 그 이상의 자세한 이론 설명은 없기 때문에 참고해주세요!

Q. 이 강의 내용이 포트폴리오로 적합한가요?

스타일링을 최소한으로 줄이고 개발에만 집중하고자 했기 때문에 본 강의 내용만으로는 포트폴리오로 삼을만큼의 퀄리티를 얻기는 힘듭니다. 다만, 본 강의를 통해서 새로운 프로젝트를 진행하기에 충분한 노하우를 얻어가실 수 있으리라고 생각합니다.

Q. 특별히 준비해야하는 실습 환경이 있나요?

강의에서는 MacOS를 바탕으로 작업을 진행했지만 OS의 경우 윈도우 환경에서 발생하는 문제에 대해서도 어느 정도 대응책에 대한 소개를 해두었습니다. 그리고 IDE는 VSCode를 사용했는데, 그 외 다른 개발도구를 사용하셔도 전혀 무방합니다.


지식공유자의
다른 강의가 궁금하다면? 💁‍♂️

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

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

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

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

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
리액트 학습을 하긴 했지만 막상 혼자 프로젝트를 진행하려니 막막한 프론트엔드 취준생
백엔드쪽 지식이 전혀 없어 프로젝트 진행에 한계를 느끼는 주니어 프론트엔드 개발자
GraphQL / BFF를 연습해보고자 하는 프론트엔드 개발자 및 취준생
📚
선수 지식,
필요할까요?
ReactJS
Typescript

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

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼 총 48 개 ˙ 8시간 1분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 무계획 무근본 라이브코딩 강좌 소개
섹션 1. 무작정 시작해 봅시다. 일단 클라이언트부터!
클라이언트 환경세팅 / 라우터 처리 미리보기 09:33
상품목록 페이지 만들기 20:05
상품상세 페이지 / React-Query cache 정책 12:27
GNB / 1일차 마무리 08:22
섹션 2. mock API로 데이터통신을 준비합니다.
MSW (mock service worker) 17:07
문제되는 router 라이브러리 제거 02:27
장바구니 mock API 09:07
장바구니 담기 API / 장바구니 페이지 18:15
2일차 마무리 미리보기 02:28
섹션 3. 장바구니 페이지에 API를 연동합니다.
장바구니 페이지 / 목록, 수정 API 07:25
invalidateQueries vs. 낙관적 업데이트 15:13
장바구니 삭제 06:20
장바구니 선택, 전체선택 및 해제 12:58
3일차 마무리 + QnA (React Query 캐싱 관련) 03:42
섹션 4. 상태관리를 도입하고 결제 페이지를 만듭니다.
장바구니 상태관리 (recoil) 20:47
결제 페이지 16:05
REST vs. GraphQL 미리보기 02:52
결제페이지 스타일 작성 02:17
섹션 5. 로컬 서버 작업을 해봅시다!
결제 페이지 마무리 07:26
모노레포로 변경 / 서버 환경 설정 09:32
schema 정의 08:02
resolver 정의 07:30
서버 실행하기 08:35
5일차 마무리 + QnA (취준 멘토링) 05:18
섹션 6. 서버에 json DB를 연동합니다.
json DB 생성 07:49
resolver - DB 연동 16:24
서버 변경사항 클라이언트에 반영 17:25
6일차 마무리 05:38
섹션 7. 무한스크롤을 적용해 봅시다!
서버 pagination 05:49
무한스크롤 #1 - useInfiniteQuery 12:06
무한스크롤 #2 - IntersectionObserver 14:20
무한스크롤 #3 - hook(useIntersection)으로 추출 09:12
어드민 페이지 - api 작성 10:12
섹션 8. 어드민 페이지에 CRUD를 적용해 봅니다.
어드민 - 상품 목록 09:05
어드민 - 상품 추가 #1 12:31
어드민 - 상품 추가 #2 18:10
어드민 - 상품 수정 10:58
섹션 9. DB를 Firebase로 옮겨봅시다.
어드민 - 삭제 09:46
QnA (상태관리 라이브러리 트랜드) 02:06
Firebase 세팅 + 상품 목록 resolver 17:45
Firebase - 장바구니 목록 resolver 07:11
섹션 10. Firebase 연동 마무리하고 배포까지!
Firebase - 상품 mutation 08:28
Firebase - 장바구니 mutation 13:00
Firebase - 결제 처리 05:15
client 변경사항 반영 07:58
heroku 및 vercel 배포 #1 05:29
heroku 및 vercel 배포 #2 16:50
강의 게시일 : 2022년 05월 04일 (마지막 업데이트일 : 2022년 05월 04일)
수강평 총 12개
수강생분들이 직접 작성하신 수강평입니다.
5
12개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
0S thumbnail
5
드디어 완강했습니다! 먼저 강사님 목소리 너무 좋으십니다. 목소리 자체가 매력이 있으셔서 강의가 되게 끌려요. 그리고... 생각했던거 그 이상의 강의입니다. 처음에 목표했던 것 보다 더 많은 것을 배워갑니다!!
2022-07-16
Yoon Geon-ung thumbnail
5
지금 겨우 1일차까지만 수강하였지만 너무 재미있고 배운게 많아서 강추드리고 싶습니다. 기존 클론코딩이나 강좌들은 너무 재미없고 지루하고 잠들기 까지 했었는데 스터디 하는 느낌의 정재남님의 강의는 너무 재미있네요! 강추강추하고 다음에 기회되시면 초급에서 중급으로 넘어가지 못하고 있는 주니어들을 위한 이와 비슷한 스터디형 강좌 하나 만들어주셨으면 좋겠습니다.
2022-11-23
ak thumbnail
5
좋은 강의 너무 나도 잘 들었습니다. 특히 라이브로 생생히 설명해주는데 인상 깊었습니다.
2022-06-11
Lyn thumbnail
5
리액트 강의 고급버전같아서 좋네요.. 그냥 단순한 crud 가 아니고 조금더 이것 저것 해보는게 매우좋앗습니다
2022-06-11
Ucopy Theme thumbnail
5
실용적인 강의네요.
2022-06-19
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!