한 입 크기로 잘라먹는 타입스크립트(TypeScript)
이정환 Winterlood
문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷갈리는 타입스크립트 이제 제대로 배워보세요! 여러분을 타입스크립트 마법사🧙🏻♀️로 만들어드립니다.
초급
TypeScript
Let's tackle JavaScript and React all at once with this course, covering everything from concepts to unique projects. Learn briefly, apply extensively! A 17-hour All-in-one course!
Deployable Emotion Diary Project Development
JavaScript, Node.js, How the Web Works All-in-One
React Clean Code Writing, Performance Optimization Techniques
Click on the image to go to the roadmap.
> Roadmap Link: https://link.onebitefe.com/r/3wokpi
Series Lecture Links
> React in bite-sized pieces: https://inf.run/v3XAj
> TypeScript in bite-sized chunks: https://inf.run/FpLm4
> Next cut into bite sizes: https://inf.run/v3XAj
React, you can finish it in one lecture.
I'll help you cut it into bite-sized pieces. 🔥
Thanks to the love and support of many students, I was able to publish the lectures as a book with Insight Publishing.
Once again, I would like to express my sincere gratitude to all students and everyone who showed interest.
React.js is a JavaScript library that runs on Node.js.
So, in the end, React.js is just a tool to help you get better use out of JavaScript.
Therefore, if you do not have a good understanding of JavaScript and Node.js, you cannot utilize React.js properly.
This course will teach you JavaScript basics, Node.js, and React.js.
But it’s not fun if you just learn it! You will learn React.js through a total of 3 projects .
Through this process, you will develop into a front-end developer with solid fundamentals.
This course is not just about teaching you how to use React.js.
We also cover various CS knowledge surrounding React.js, and a total of 3 projects.
You can develop your programming thinking skills while creating a counter app, to-do list, and emotion diary.
Before learning React.js, let's look at the basic and advanced concepts of JavaScript.
From basic concepts such as data types and operators,
We will also look at more advanced topics such as array methods and asynchronous tasks.
Even if you already know JavaScript, it's a good idea to look through it again for a refresher.
React.js is a technology that operates on top of Node.js. Therefore, you cannot know React.js without knowing Node.js.
In Section 3, we will look at what Node.js is, why it was created, and what features it has, with hands-on experience.
Let's find out what React.js is, how it differs from other technologies, and take a closer look at how it solved the limitations of existing technologies. In the 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.
You will learn all the basic functions with hands-on exercises and fully understand them visually with illustrated materials.
Let's create our first React project, "Counter App".
It's a simple project, but it's a good way to get a glimpse into how React.js works and its design philosophy.
Just as all humans are born and go through infancy, adolescence, youth, old age, and reach twilight, all React components are born, change, and disappear. This life cycle of a component is called a life cycle.
Understanding and controlling the lifecycle of a component will allow you to perform the actions you want at the time you want. So in Section 7, we will look at the lifecycle and how to control it with practice.
Let's create our second React project, "Todo List App".
While implementing this project, we implemented data CRUD (add, lookup, modify, delete) and search functions.
We'll look at several ways to handle array-like data in React.
Separation of code by role is always a virtue in software development.
Let's take a look at useReducer, which helps separate complex state management code.
Practice by applying it directly to a to-do list project.
If there are any unnecessary operations in our project, we should remove them boldly!
Let's take a look at several optimization techniques for React Apps that eliminate wasteful computation.
Practice by applying it directly to a to-do list project.
Let's take a look at Context, which provides data to various components in a more concise and clean way.
Practice by applying it directly to a to-do list project.
Let's create our own final project emotional diary using all the concepts we've learned so far.
Additionally, we use the browser's database and deploy the project to make it accessible to users.
Demo link: https://emotion-diary.winterlood.com/
The lecture ends, but our learning does not.
Let's talk about what direction we should take going forward.
No matter how complex and difficult the content is!
We have worked hard to make it easy to understand and friendly with visual aids.
These are all images I created myself, so you can capture them and use them in your learning blog posts. 😃
If you're listening again to review, or if you're in a hurry, listen at high speed!
We took special care to ensure that your pronunciation is audible up to 2x speed 😎
(Take a listen to the video below, played at 1.5x speed!)
Wouldn't it be a shame to just keep the practice codes you worked so hard to write?
I took care to organize the code into sections so that I could always go back and look at it again.
Code repository link: https://github.com/winterlood/onebite-react-v2
Gather in a student-only community to share knowledge and news with one another and grow.
Join our Discord channel: https://discord.gg/YDqhkH8XkNQ. Who is eligible to take this course?
This lecture is optimized for those who have an understanding of HTML and CSS.
However, since there are explanations throughout the lecture, you don't have to memorize the content thoroughly!
Q. I'm just getting started. I don't know much about JavaScript or Node.js. Is it okay for me to join?
Yes, welcome! 🙋♂️
This course will teach you the JavaScript and Node.js knowledge essential to learning React.
Therefore, with this one lecture, you can first learn the basic knowledge required for React and then learn React itself.
Q. To what extent is this covered in class?
We cover everything from why React was born, to basic usage, and performance optimization techniques for actual production development.
Also, we actually deploy it using Vercel and finish it with Open Graph settings.
It contains all the knowledge you need to develop a web project from start to finish.
Who is this course right for?
First-time React learner
Someone who doesn't know JavaScript and Node.js well, but wants to learn React.js!
Person wanting to learn with many students through full-course challenges, etc.
A person who wants to create a result to be proud of upon completing the course.
Someone with any experience writing HTML & CSS (no need to be an expert!)
Need to know before starting?
👋 Very basic knowledge about HTML, CSS
31,596
Learners
1,861
Reviews
1,367
Answers
4.9
Rating
5
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
995 reviews
4.9
995 reviews
Reviews 27
∙
Average Rating 4.7
Reviews 2
∙
Average Rating 5.0
Reviews 5
∙
Average Rating 5.0
5
아직 다보지는 않았습니다만, 여러개의 리액트 강의를 구입해서 본 입장으로 이 강의가 원탑입니다. 다른 강의들도 숙련된 자바스크립트 개발자 분들이 만드셨겠죠. 하지만 문제가 있습니다. 숙련된 분들은 자기의 머릿속에 이미 코드가 어떻게 작동하는지에 대한 이미지가 다 머리에 있는 상황에서 강의를 합니다. 그러니 밥아저씨처럼 말하면서 코드를 작성하면서 강의를 합니다. 하지만 초심자의 입장에서는 도대체 무슨 일이 일어나는지 머릿속에서 전혀 그려지지 않는 상태에서 코드만 따라치니 답답한 마음은 물론이고 개념 조차 잘잡히지 않는데요. 이 강의의 경우 코드 이전에 어떤 기능을 쓰면 어떤 일이 일어나는지에 대해 이미지로 먼저 풀어서 개념을 설명해주고 그 다음에 코드를 보여주니, 저 역시도 코드를 보면서 머릿속에서 코드가 작동되는 이미지가 같이 그려집니다. 대부분의 강사님들이 개발자이지. 교육자/교육전공자는 아니기 때문에 이러한 효과적인 교육 방식에 대한 스탠다드 없이 너무 많은 강의들이 양산되고 있다고 느끼는데 이 강의는 정말 최고네요. 강의 다 보지도 않았는데 이미 타입스크립트도 구매했습니다. 퀄리티가 이정돈데 강의값은 또 너무 혜자에요. 커피라도 한 잔 더 하시라고 책도 샀습니다. 제 돈 주고 사는 강의에 '감사하다' 라는 표현이 이상해서 자주 사용하지는 않는데요. 그럼에도 이 강의는 ' 매우 감사합니다 '. 가능하면 Express.js, Next.Js 강의, 그리고 TDD 에 대한 강의도 내주시면 좋을 것 같아요!
Reviews 8
∙
Average Rating 4.9
5
타사이트에서 영어로 먼저 리액트를 수강했습니다. 영어를 100% 이해하지 못한 상태에서 수강하다보니 개념을 잘못 이해하거나 설명을 했는데 이해하지 못하는 문제가 있었습니다. 그래서 인프런에서 리액트 강의를 찾아보다가 좋아보여서 듣게되었습니다. 강의는 자바스크립트부터 다시 알려주셔서 자바스크립트까지 공부하게 되어 좋았습니다. 리액트에 대해서도 개념을 잘 알려주셔서 공부가 많이 되었습니다. 한가지 아쉬운 것은 A->C를 설명하실 때 중간에 A->B->C 이렇게 B까지 설명해주신다면 이해하기 훨씬 좋았을 것 같은 부분도 몇군데 있었습니다. 그런 것들은 강의 질문답변란에서 다른 분들도 질문을 많이 남겨주셨더라구요. 이런 부분만 보완이 된다면 정말 100점 강의일 것 같습니다.
Reviews 2
∙
Average Rating 5.0
$37.40
Check out other courses by the instructor!
Explore other courses in the same field!