코어 자바스크립트
정재남
ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.
초급
JavaScript
BEST
Full Stack React Live Coding - Creating a Simple Shopping Mall
From development to distribution! We will show you the arduous journey to complete a single service without filtering. You will be able to overcome the difficulties and difficulties by introducing a lot of new technologies!
Reviews from Early Learners
What you will learn!
React web service development
GraphQL
React-Query
Firebase
Listen to a lecture that feels vivid and real
Start coding and build an online shopping mall service! 🩳
One service
The journey to completion 🚢
This course is conducted live with students, so you can quickly find and apply only the content you need right away.
We will show you the process of considering and solving various problems that arise during the development process without filtering them.
Through this lecture, I want to show you that you can somehow complete something even if you just start coding without any preparation.
With this, I hope to give courage to job seekers or juniors who are having difficulty creating something.
The full code is available on GitHub , so please refer to it!
"I learned React, but I feel lost when I try to work on a project on my own.
I'm also curious about how other people are studying development."
-Front-end job seeker-
"I have absolutely no knowledge of the backend side, so I feel lost just thinking about development.
I feel limited in the progress of the project ."
-Junior Front-end Developer-
"When I get stuck while coding, I don't know what to do and I'm at a loss.
Additionally, I would like to practice GraphQL and BFF . "
-Front-end developer-
In live coding
Learn one thing every day 🎥
Day 1
- Client environment settings (vite), router processing
- Create a product list and detail page
- React Query Cache Policy
- Written by GNB
Day 2
- Introducing Mock Service Worker
- Creating a mock API for the product list and shopping cart
- Create a shopping cart page
Day 3
- Applying the shopping cart API
- invalidateQueries vs. optimistic updates
- Implementing the Delete Cart and Select Function
Day 4
- Shopping cart status management (recoil)
- Payment page
Day 5
- Introducing a monorepo (yarn workspace)
- Server environment settings
- Schema and resolver definitions
Day 6
- Create json DB
- Reflect server changes to clients
Day 7
- Infinite Scroll - Server Task
- useInfiniteQuery
- intersectionObserver
Day 8
- Writing an Admin API
- Admin page - implementing functions for adding, editing, and deleting lists and products
Day 9
- Firebase application
Day 10
- Finalize and deploy Firebase
🔔 Create a shopping mall service through coding that you learn through hands-on experience for 10 days.
After listening to all the lectures
A look at the students 😎
You will gain enough knowledge to carry out projects on your own.
You will gain the strength to solve various problems that arise during the project process.
I will generously share with you the various know-how I have gained from 9 years of practical experience .
Whenever I start a project without thinking and run into a problem,
We'll show you how to find a solution using a combination of search, debugging, and guesswork.
Q&A 💬
Q. I'm curious about the level at which I can take the course.
This course doesn't cover basic React or TypeScript, so you'll need some prior knowledge to successfully complete it. However, other knowledge isn't required; simply listening, thinking, and following along will allow you to acquire the material naturally.
Q. Is theory included in the lecture content?
This video includes information necessary for project progress, as well as real-time answers to questions from participating members during filming. Please note that there is no detailed theoretical explanation beyond this.
Q. Is this lecture content suitable for a portfolio?
Because I've focused solely on development and minimal styling, this course alone won't be enough to create a portfolio-quality piece. However, I believe you'll gain sufficient know-how to tackle new projects.
Q. Is there a special practice environment that I need to prepare for?
While the course focused on MacOS, it also provided some guidance on how to address issues that arise in Windows environments. While Visual Studio Code (VSCode) was used as the IDE, you are perfectly welcome to use any other development tool.
Knowledge sharer
Curious about other lectures? 💁♂️
Recommended for
these people
Who is this course right for?
I am a front-end job seeker who has learned React but is at a loss when it comes to actually working on a project on my own.
A junior front-end developer who feels limited in project progress due to lack of back-end knowledge
Front-end developers and job seekers who want to practice GraphQL/BFF
Need to know before starting?
ReactJS
Typescript
32,416
Learners
672
Reviews
393
Answers
4.8
Rating
11
Courses
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: 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
Curriculum
All
48 lectures ∙ (8hr 1min)
Published:
Last updated:
Reviews
All
15 reviews
4.8
15 reviews
LynReviews 8
∙
Average Rating 4.8
- Yoon Geon-ung
Reviews 12
∙
Average Rating 5.0
- 0S
Reviews 5
∙
Average Rating 5.0
- Ucopy Theme
Reviews 5
∙
Average Rating 5.0
- ak
Reviews 9
∙
Average Rating 5.0
$17.60
jaenam's other courses
Check out other courses by the instructor!
![[React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?f=avif&w=420)
![[React / VanillaJS] UI 요소 직접 만들기 Part 1강의 썸네일](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/course-326181-cover/d012cab3-58e1-45cd-899e-03f86c7b1df1?f=avif&w=420)
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript강의 썸네일](https://cdn.inflearn.com/public/courses/326587/cover/693e60ce-0430-43df-a2fa-035eb4f8ab88?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
