BEST

개발 · 프로그래밍

프론트엔드

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

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

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

(5.0) 수강평 13개

수강생 1,272명

정재남

React GraphQL Firebase

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

이런 걸 배울 수 있어요

리액트 웹서비스 개발
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

안녕하세요
정재남입니다.

31,847

명

수강생

657

개

수강평

393

개

답변

4.9

점

강의 평점

개

강의

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

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI

커리큘럼

전체

48개 ∙ (8시간 1분)

섹션 1. 무계획 무근본 라이브코딩 강좌 소개

1개 ∙ (4분)

1. Intro
04:17

섹션 2. 무작정 시작해 봅시다. 일단 클라이언트부터!

4개 ∙ (50분)

2. 클라이언트 환경세팅 / 라우터 처리
09:33
3. 상품목록 페이지 만들기
20:05
4. 상품상세 페이지 / React-Query cache 정책
12:27
5. GNB / 1일차 마무리
08:22

섹션 3. mock API로 데이터통신을 준비합니다.

5개 ∙ (49분)

6. MSW (mock service worker)
17:07
7. 문제되는 router 라이브러리 제거
02:27
8. 장바구니 mock API
09:07
9. 장바구니 담기 API / 장바구니 페이지
18:15
10. 2일차 마무리
02:28

섹션 4. 장바구니 페이지에 API를 연동합니다.

5개 ∙ (45분)

섹션 5. 상태관리를 도입하고 결제 페이지를 만듭니다.

4개 ∙ (42분)

섹션 6. 로컬 서버 작업을 해봅시다!

6개 ∙ (46분)

섹션 7. 서버에 json DB를 연동합니다.

4개 ∙ (47분)

섹션 8. 무한스크롤을 적용해 봅시다!

5개 ∙ (51분)

섹션 9. 어드민 페이지에 CRUD를 적용해 봅니다.

4개 ∙ (50분)

섹션 10. DB를 Firebase로 옮겨봅시다.

4개 ∙ (36분)

섹션 11. Firebase 연동 마무리하고 배포까지!

6개 ∙ (57분)

강의 게시일: 2022. 05. 03.

마지막 업데이트일: 2025. 05. 13.

수강평

전체

13개

5.0

13개의 수강평

Ucopy Theme
수강평 5
∙
평균 평점 5.0
2022. 06. 19.
5
94% 수강 후 작성
실용적인 강의네요.
Lyn
수강평 8
∙
평균 평점 4.8
2022. 06. 11.
5
31% 수강 후 작성
리액트 강의 고급버전같아서 좋네요.. 그냥 단순한 crud 가 아니고 조금더 이것 저것 해보는게 매우좋앗습니다
Yoon Geon-ung
수강평 12
∙
평균 평점 5.0
2022. 11. 23.
5
63% 수강 후 작성
지금 겨우 1일차까지만 수강하였지만 너무 재미있고 배운게 많아서 강추드리고 싶습니다. 기존 클론코딩이나 강좌들은 너무 재미없고 지루하고 잠들기 까지 했었는데 스터디 하는 느낌의 정재남님의 강의는 너무 재미있네요! 강추강추하고 다음에 기회되시면 초급에서 중급으로 넘어가지 못하고 있는 주니어들을 위한 이와 비슷한 스터디형 강좌 하나 만들어주셨으면 좋겠습니다.
ak
수강평 9
∙
평균 평점 5.0
2022. 06. 11.
5
27% 수강 후 작성
좋은 강의 너무 나도 잘 들었습니다. 특히 라이브로 생생히 설명해주는데 인상 깊었습니다.
0S
수강평 5
∙
평균 평점 5.0
2022. 07. 16.
5
100% 수강 후 작성
드디어 완강했습니다! 먼저 강사님 목소리 너무 좋으십니다. 목소리 자체가 매력이 있으셔서 강의가 되게 끌려요. 그리고... 생각했던거 그 이상의 강의입니다. 처음에 목표했던 것 보다 더 많은 것을 배워갑니다!!

정재남님의 다른 강의

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

코어 자바스크립트

정재남

ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.

초급

JavaScript

[React / VanillaJS] UI 요소 직접 만들기 Part 1

정재남

대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.

초급

React, vanilla-js, ui

[React / VanillaJS] UI 요소 직접 만들기 Part 2

정재남

초급

React, vanilla-js, ui

리액트 공식문서 함께 공부하기

정재남

2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

입문

React, JavaScript, react.js

모던 자바스크립트 딥다이브 스터디

정재남

《모던 자바스크립트 딥다이브》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!

초급

JavaScript

이펙티브 타입스크립트 스터디

정재남

《이펙티브 타입스크립트》 책 내용을 그대로 따라가는 스터디 영상입니다. 함께 공부하면 훨씬 쉬워질 거에요!

초급

TypeScript

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

React 기반의 간단한 SNS 서비스를 만들면서 REST API 및 GraphQL을 연습합니다. 프론트엔드 개발을 위한 백엔드 환경을 쉽고 간단하게 만드는 방법을 소개합니다.

초급

REST API, GraphQL, React

Javascript ES6+ 제대로 알아보기 - 보너스

정재남

ES6+ 제대로 알아보기 강좌는 Javascirpt의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 알려드립니다.

초급

ES6, JavaScript

Javascript ES6+ 제대로 알아보기 - 중급

정재남

ES6+ 제대로 알아보기 강좌는 Javascript의 ES6 및 이후의 표준 ECMAScript 명세에 대하여 이론을 바탕으로 ES5와 달라진 점 및 개념과 동작 원리를 깊이 있게 살펴봅니다.

중급이상

JavaScript, ES6

Javascript ES6+ 제대로 알아보기 - 초급

정재남

초급

JavaScript, ES6

비슷한 강의

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

앵귤러 파이어베이스 완전정복 - PetStore 쇼핑몰 프로젝트

노마드크리에이터

앵귤러 Front-end와 파이어베이스 Back-end를 이용하여 다양한 분야에 바로 적용할 수 있는 Pet Store 쇼핑몰 Blueprint Application을 따라가면서 같이 만들어보는 실전 프로젝트 역량강화 과정입니다.

중급이상

Angular, PWA, Firebase

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

정재남

초급

REST API, GraphQL, React

리액트로 나만의 블로그 만들기(MERN Stack)

싸플

풀스택으로 나만의 블로그를 만들어 보아요~~!

중급이상

Node.js, React, Redux

React Router 완전 정복

이웅재

React 로 SPA를 만드는 모든 사람들에게 필수인 React Router를 함께 정복해보아요 💪

초급

react-router-dom, react-router, React

스프링 부트와 리액트로 구현하는 소셜 로그인

온코딩

스프링 부트와 리액트를 활용해 일반 로그인과 소셜 로그인을 통합 구현하는 방법을 배웁니다. MPA와 SPA 환경 모두에서 로그인 시스템을 구축하고, JWT와 OAuth2 인증을 실습합니다. 실무에 바로 적용 가능한 예제 프로젝트를 통해 전체 로그인 흐름을 이해하고 구현할 수 있습니다.

중급이상

Java, Spring Boot, JPA

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling

브라이트코딩

이 강의를 통해 파이어베이스로 DB의 관계를 구현하는 방법을 배우시게 됩니다. 빠르게 리액트 풀스택 개발자가 될 수 있습니다. 고용이 불안정한 지금 이 시대에는 새로운 기술을 배워 자신의 가치를 올려야 합니다. 그리고 무언가를 만들어야 합니다. 그 사이드 프로젝트와 아이디어를 구현 할 때 데이터의 "관계"를 구현할 수 있어야 합니다. 이 강의는 파이어베이스 "파이어스토어"로 "관계"를 구현할 수 있도록 도와 드립니다.

초급

Firebase, React, firestore

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

Indie Coder

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

초급

GraphQL, Svelte, MongoDB

Flutter로 메신저앱 만들기

DEV MOO

Flutter의 Riverpod 상태 관리와 Firebase를 활용해서 메신저 앱을 제작합니다.

초급

Flutter, Firebase, riverpod

생활코딩 - React

Egoing Lee

리액트의 컴포넌트를 만드는 법과 리액트와 불변의 관계를 알아봅니다.

초급

React

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

코배투

React로 광고 수익형 웹사이트를 만들어 봅니다. 광고를 최적화 하고 서버 비용을 줄이기 위한 방법과 규모에 따른 사이트 운영 Tip까지 배워봅니다.

초급

React, AWS, cloudflare

틴더 파이어베이스 클론 | 리액트 네이티브

The Coders Studios

최소한의 시간 내에 리액트 네이티브를 배울 수 있도록 해드리겠습니다. 필요 없는 부분은 넣지 않았습니다.

중급이상

React Native, Firebase

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

정현우

아이디어는 있는데 앱을 어떻게 개발해야할지 몰랐던 분들, 실전 프로젝트 4개를 만들어보면서 앱 개발을 마스터해봅시다!

입문

JavaScript, React, Node.js

14 days with Claude Code

지승현

출시되자마자 바로 시작해서 14일간 써본 결과 취준생도 현업자도 모두 바로 적용할수 있는 클로드 코드! 라고 모두에게 추천하는 이유를 바로 알려드립니다.

입문

Python, Java, React

GraphQL: REST API를 대체할 기술

Burger

GraphQL의 프론트엔드와 백엔드를 한번에 배울 수 있는 기회

초급

GraphQL, Spring Boot, Node.js

찍어먹는 Next.js 풀코스 (영어 음성 & 한글 자막)

ludgi

찍어먹는 Next.js 풀코스! GraphQL, Redis, RabbitMQ, Prisma, TailwindCSS, Docker Compose, Cypress, Prometheus, grafana 등 최신 기술로 실전 프로젝트를 완성하며, App Router와 Page Router까지 모두 경험합니다.

중급이상

Next.js, React, GraphQL

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript

David

2021년 새롭게 돌아온, "요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것 - JavaScript" 강의! 1인 창업을 꿈꾸는 초급 개발자를 위한 바이블이 되어드립니다.

초급

Firebase

[바이브코딩] 초간단 가족만의 단톡방 만들기 (Cursor + Firebase)

체험코딩

Cursor AI와 Firebase를 이용하여 가족만을 위한 프라이빗 메신저를 만들며, 코딩의 흐름을 자연스럽게 익혀보는 바이브코딩 입문 강의입니다. 개발자 계정이나 맥북 없이, 윈도우 환경만으로도 개발을 몰라도 누구나 쉽게 따라 할 수 있고, 직접 만든 웹사이트로 실제 사용도 해보세요.

입문

Firebase, Next.js, vercel

타입스크립트 코리아 : React with TypeScript 세미나

이웅재

타입스크립트와 리액트 관련 강좌입니다.

중급이상

React, TypeScript

연관 로드맵

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

셀프 완성! 집에서 끝내는 React 프론트엔드 개발자 부트캠프

인프런 프리즘

₩22,000

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

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

이런 걸 배울 수 있어요

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

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

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

Q&A 💬

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

이런 분들께 추천드려요!

안녕하세요 정재남입니다.

커리큘럼

수강평

정재남님의 다른 강의

비슷한 강의

연관 로드맵

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

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

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

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

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

이런 분들께
추천드려요!

안녕하세요
정재남입니다.