BEST
개발 · 프로그래밍

/

프론트엔드

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

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

(5.0) 수강평 13개

수강생 1,234명

Thumbnail

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

이런 걸
배워요!

  • 리액트 웹서비스 개발

  • 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분)

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

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!