Bite-sized Next.js(v15)
winterlood
The 3rd work in the One Bite series! The world's most kind and detailed Next.js (15+) course. We'll explore not only App Router but also Page Router through projects.
Basic
Next.js, React, TypeScript
From concepts to unique projects, master JavaScript and React all at once with this course. Short learning, long application - a 17-hour All-in-one course!
# Developing an Emotion Diary Project for Real Deployment
JavaScript, Node.js, and How the Web Works All-in-One
Clean React Code Writing and Performance Optimization Techniques
Click the image to navigate to the roadmap.
> Roadmap link: https://link.onebitefe.com/r/3wokpi
Series Course Links
> React in Bite-Sized Pieces:https://inf.run/v3XAj
> TypeScript in Bite-Sized Pieces: https://inf.run/FpLm4
> Next.js in Bite-Sized Pieces: https://inf.run/v3XAj
React, you can master it with just one course.
I'll help you break it down into bite-sized pieces. 🔥
Thanks to the love and support from many students, I was able to publish this course as a book with Insight Publishing.
Once again, I sincerely thank all the students and everyone who showed interest.
React.js is a JavaScript library that runs in a Node.js environment.
Therefore, React.js is ultimately just a tool that helps you utilize JavaScript more effectively.
Thus, if you don't properly understand JavaScript and Node.js, you won't be able to use React.js effectively.
This course covers JavaScript fundamentals, Node.js, and React.js.
But just learning would be boring, right! You'll learn React.js through a total of 3 projects.
Through this process, you'll become a frontend developer with solid fundamentals.
This course is not just about teaching you how to use React.js.
It also covers various CS knowledge surrounding React.js, and through three projects
—a counter app, a to-do list, and an emotion diary—you can develop your programming thinking skills as well.
Before learning React.js, we'll explore the fundamental and advanced concepts of JavaScript.
From basic concepts like data types and operators,
to advanced topics like array methods and asynchronous operations.
Even if you already know JavaScript, it's great to review these concepts again.
React.js is a technology that operates based on Node.js. Therefore, you cannot know React.js without knowing Node.js
In Section 3, we will explore what Node.js is, why it was created, and what features it has, along with hands-on practice.
We'll explore what React.js is and what differentiates it from other technologies, and examine in detail how it solved the limitations of existing technologies. Through this process, we will gain a deeper understanding of React.js.
Create a new React App and explore the basic features of React such as Components, State, and Props.
Practice using all the basic features hands-on and achieve a complete visual understanding with illustrated materials.
Create your first React project, a "Counter App."
It's a simple yet excellent project that gives you insight into React.js's operating principles and design philosophy.

Just as all humans are born and go through infancy, adolescence, adulthood, and old age before reaching their twilight years, all React components are born, change, and disappear. This life cycle of components is expressed as the lifecycle.
Once you understand and can control a component's lifecycle, you'll be able to perform desired actions at the exact timing you want.Therefore, in Section 7, we'll explore the lifecycle and learn how to control it through hands-on practice.
Build your second React project, a "To-Do List App," from scratch.
Through implementing this project, you'll explore various methods of handling array-type data in React,
including data CRUD operations (Create, Read, Update, Delete) and search functionality.

Separating code by role is always a virtue in software development.
Let's explore useReducer, which helps separate complex state management code,
and practice by directly applying it to a todo list project
If there are unnecessary operations in our project? We should boldly remove them!
We'll explore various optimization techniques for React Apps that eliminate wasted operations
and practice by directly applying them to a todo list project
We'll explore Context, which supplies data to various components more concisely and cleanly,
and practice by directly applying it to a todo list project
Let's put all the concepts we've learned so far to use and create the final project: an Emotion Diary.
Additionally, we'll use the browser's database and deploy the project so users can access it.
Demo link: https://emotion-diary.winterlood.com/

The course may end, but our learning never stops.
Let's discuss what direction we should take moving forward.
No matter how complex and difficult the content may be!
I have continuously strived to explain it kindly and easily with visual materials.
All images are created by me, so feel free to capture and use them for your learning blog posts. 😃
If you're listening again for review or if you're busy, try listening at a faster speed!
I took special care to ensure the pronunciation is clear even at up to 2x speed 😎
(Try listening to the video below playing at 1.5x speed!)
It would be a shame to store the practice code you worked hard on carelessly, right?
I've taken care to ensure you can organize and store your code by sections so you can revisit it anytime.
Code repository link: https://github.com/winterlood/onebite-react-v2
Students gather in the exclusive community to share knowledge and news while growing together.
Join Discord Channel: https://discord.gg/YDqhkH8XkNQ. Who is this course for?
This course is optimized for those who have an understanding of HTML and CSS.
However, explanations are provided throughout the course, so you don't need to have a thorough grasp of the content!
Q. I'm just about to start. I don't know much about JavaScript or Node.js - is it okay to take this course?
Yes, welcome! 🙋♂️
This course teaches you the essential JavaScript knowledge and Node.js knowledge needed to learn React.
Therefore, with this one course, you can first learn the foundational knowledge required for React, and then learn React itself.
Q. What level of content is covered in the class?
This course covers everything from the origins of React to basic usage and performance optimization techniques for actual production development.
Additionally, it includes deployment using Vercel and finishes with Open Graph configuration,
providing all the knowledge needed to develop a web project from start to finish.
Who is this course right for?
Beginners who are new to React
Someone who doesn't know JavaScript and Node.js well, but wants to learn React.js!
People who want to learn together with many other students through completion challenges and similar activities
People who want to create impressive results upon completing the course
Anyone who has written HTML & CSS at least once (You don't need to be good at it!)
Need to know before starting?
👋 Very Basic Knowledge of HTML and CSS
35,903
Learners
2,397
Reviews
1,540
Answers
4.9
Rating
13
Courses
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
All
98 lectures ∙ (18hr 33min)
Course Materials:
8. 1.5) Data Types
11:46
10. 1.7) Operator 1
13:37
11. 1.8) Operator 2
08:48
13. 1.10) Loops
08:01
14. 1.11) Function
11:33
17. 1.14) Scope
06:41
18. Object 1
13:09
19. 1.16) Object 2
04:20
20. 1.17) Array
04:12
All
1,185 reviews
4.9
1,185 reviews
Reviews 27
∙
Average Rating 4.7
5
I actually bought the lecture for a thousand won on April Fool's Day... just in case, like the lottery... But it really feels like I won the lottery. I feel bad that I'm able to listen to and study such a good lecture at almost no cost... The lecture is so kind, and the examples are explained so clearly that I really love it. Thank you so much, and I love you... 😭😭
Reviews 3
∙
Average Rating 5.0
Reviews 8
∙
Average Rating 4.9
5
I took React in English on a third-party site first. Since I was taking the course without a 100% understanding of English, I misunderstood the concepts or had problems with the explanations. So I looked for a React course on Inflearn and it looked good, so I took it. The course started from JavaScript again, so I was able to study JavaScript as well, which was great. I also learned a lot about React because it explained the concepts well. One thing that was disappointing was that when explaining A->C, there were a few parts where it would have been much easier to understand if the course had explained B in the middle, like A->B->C. Many other people also left questions about these in the Q&A section of the lecture. If only these parts could be improved, I think this would have been a perfect course.
Reviews 5
∙
Average Rating 5.0
5
I haven't watched them all yet, but from my perspective of having purchased several React lectures, this lecture is the best. Other lectures must have been created by experienced JavaScript developers. However, there is a problem. Experienced people give lectures while already having an image of how the code works in their heads. So, they give lectures while writing code like Uncle Bob. However, for beginners, it is frustrating to just follow the code without being able to visualize what is happening at all, and it is difficult to even grasp the concepts. In this lecture, before the code, the concept is explained by first visualizing what happens when a certain function is used, and then the code is shown, so I also get an image of the code working in my head while looking at the code. Most instructors are developers, not educators/education majors, so I feel that there are too many lectures being mass-produced without a standard for this effective teaching method, but this lecture is really the best. I have already purchased TypeScript before I have even watched the entire lecture. The quality is good, but the lecture fee is too much. I even bought the book so that I could have another cup of coffee. I don't often use the expression 'thank you' for lectures that I pay for with my own money, because it feels strange. Nevertheless, this lecture is 'very grateful'. If possible, I think it would be good if you also give lectures on Express.js, Next.js, and TDD!
Reviews 2
∙
Average Rating 5.0
5
This price is ridiculous for such an explanatory power and content. I think I could have paid double, but it's really a lecture like "The boss is crazy".. It's hard to say that I've digested it all yet, but I'll try to master it through repeated study. Thank you for making such a great lecture :) !!
Limited time deal
$4,290.00
29%
$37.40
Check out other courses by the instructor!
Explore other courses in the same field!