![[React Part 2] Advanced Topics and Hooks강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
[React Part 2] Advanced Topics and Hooks
jeonghwan
Now React truly starts to 'make sense'. Advanced concepts and Hooks, learn easily and accurately.
중급이상
React Context, react-hooks, React
BEST
Understanding and Practice of Frontend Development Environment (webpack, babel, eslint..)
I can understand pre-existing development environments. I can create a development environment from scratch.
Reviews from Early Learners
What you will learn!
How to Use Module Systems and Automate Development Environments (Webpack)
Creating an Environment Using the Latest JavaScript Syntax (Babel)
Creating a collaborative development environment with colleagues (ESLint, Prettier)
Understand and apply front-end technologies such as Webpack, Babel, and Lint to your practice!
“Only one person in the team needs to know how to use Webpack!?”
What if that one person leaves the team? Maybe you should be that one.
If you are the only one on the development team, configuring webpack is unavoidable.
What if I could handle the setup of my development environment with my own hands?
If you can at least read and understand the code that other people have created (such as code created with create-react-app or vue-cli), you will be much more confident in your work.
We've created a course that teaches you how to automate and improve productivity of your front-end development environment, including Babel, Lint, and Prettier, as well as Webpack.
I hope this will help you work more productively.
📝 What will I learn?
# Node.js
Node.js is the basic technology that forms the basis for configuring the front-end development environment. This is because most tools operate based on Node.js. In addition, it plays a major role in automating a series of development processes. You can understand the role of Node.js in the front-end development process.
# Webpack
Webpack is what enables module-based development. Although alternatives that perform the same role have emerged, Webpack is still the most widely used. After looking into and understanding the operating principles of Webpack, you can learn how to use it by setting up your own development environment and implementing your own loader .
# Babel + SASS
Babel is a must-have when developing with high-level programming languages such as ECMAScirpt+, Typescript, or frameworks such as React.js and Vue.js. Of course, you can develop without Babel, but who would do that? For development productivity, you absolutely need the help of Babel. Understand the principles of Babel and use it yourself to find out how to create an environment optimized for your project.
# Prettier + ESLint
Arguments over coding conventions are a tiring thing. With the help of tools, you can more easily match your coding style. In addition, adding automation tools to your development process can help you maintain consistent code.
🧰 Please install in advance
I use VSCode , but you can use your favorite editor or IDE instead.
Please install Git for the practical training. Some classes use Git hooks, so please use version v2.3.0 or higher.
🙋🏻♂️ Expected questions related to the lecture
Q. Please tell us what prompted you to start this course.
A. Front-end technology is said to be very fast, but I still wanted to organize it once. Starting with Webpack, I read the manuals of frequently used development tools one by one and organized them on my blog, which is "Understanding the Front-end Development Environment (Total 5 Parts)" . Then, I held a seminar on this topic at T Academy last year in 2019, and surprisingly, there were many people who needed it like me. Since the response was good, I supplemented the content and opened an online course on Inflearn.
Q. Are there any special advantages to this course?
A. I think the topic of development environment might be a bit difficult to practice. It's because you won't know much about it if you just read the manual. So I've prepared a small practice for each theory class ( Practice repository: lecture-frontend-dev-env ). Based on the code covered in the previous lecture , " Learn Pure JavaScript and VueJS Development through Practical UI Development, " I've prepared step-by-step practice assignments to set up the development environment. As you solve them one by one, you'll get used to setting up the development environment before you know it.
Q. What can I do with this course?
A. You will be able to understand the development environment of the project you are currently developing. If necessary, you can customize it to increase productivity. Are you just starting a project? Then you can customize the development environment to your liking.
View other lectures
Building robust JS software
Test Driven Development, Learn JavaScript Design Patterns
Test Driven Development, Learn JavaScript Design Patterns
Learn pure javascript and VueJS development through hands-on UI development
Vue.JS Basics, MVC/MVVM Architecture, Component Development
Vue.JS Basics, MVC/MVVM Architecture, Component Development
NodeJS API Server Built with Test-Driven Development (TDD)
NodeJS Basics, ExpressJS Basics, Rest API Server Development
NodeJS Basics, ExpressJS Basics, Rest API Server Development
Learning through Trello development
Vuejs, Vuex, Vue-Router Frontend Practical Technology
Created following Trello
Learn practical skills of Vue.js, Vuex, and Vue-Router
Vuejs, Vuex, Vue-Router Frontend Practical Technology
Created following Trello
Learn practical skills of Vue.js, Vuex, and Vue-Router
Recommended for
these people
Who is this course right for?
I've only ever developed in pre-configured environments, so I have no idea how to set up Webpack or Babel.
I've used Webpack before, but I want to know how it works.
I want to maintain consistent coding conventions, but it's not working out well because we're working as a team.
Need to know before starting?
Basic front-end development experience is required. (Javascript, HTML, CSS)
13,747
Learners
855
Reviews
585
Answers
4.8
Rating
9
Courses
👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.
수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.
Curriculum
All
39 lectures ∙ (5hr 2min)
Published:
Last updated:
Reviews
All
208 reviews
4.9
208 reviews
- gbobey
Reviews 24
∙
Average Rating 5.0
5
100% enrolledIf you take the Life Coding webpack lecture as a prerequisite, it will be very helpful. Basically, if you know what JavaScript, npm, and package.json are, you will be able to proceed smoothly in the lecture. It will not be difficult to just follow along at first, but it may get more difficult as you go on. There were many lectures that showed a few examples of what configuration files, loaders, and plugins are, but I don't think there was a lecture that showed webpack from 1 to 10 like this. These days, they say module modules, but it was a time when I learned a lot because I was able to understand the exact concept of a module. Thank you for the great lecture.
youmeeeee1159Reviews 8
∙
Average Rating 4.9
5
100% enrolledI was using webpack vaguely, but this was a huge help in understanding webpack. I'm using webpack, but I still don't know what's going on... I really want to recommend this 100 times to people like me who say that. It was so interesting that I stayed up late at night watching it. I watched the advanced webpack first, and I haven't seen Babel or Lint yet, but I'll watch the rest of the lectures! Thank you so much for making such a great lecture. :D I trust and watch Kim Jeong-hwan's lectures...
- jeonghwanInstructor
As I work, I use webpack little by little, but I don't really get the feel for it. I'm organizing it by going through the documentation one by one, and I think I'm starting to feel more confident now. I'm so glad that it was helpful to someone in a similar situation.
- chataehyeon3874
Reviews 1
∙
Average Rating 5.0
5
18% enrolledThings I vaguely knew are being organized little by little ㅠㅠ I'm so happy!
- jeonghwanInstructor
Thank you for telling me so. I hope you will continue to figure out what you need to do on your own.
- gidgns19951552
Reviews 6
∙
Average Rating 5.0
5
31% enrolledI am a front-end developer. I just wanted to learn how bundlers and transpilers work, so I took the course. I was amazed when Babel explained the plugins... I had never looked at plugins before and just used presets without thinking, so I was watching the lecture and thought, "Why do you add everything like that?" But I was just amazed... Before explaining how presets work, you explained them one by one, so it was really helpful for me to understand why presets are needed and how Babel works~!! Those who dream of developing front-ends actually go to work, and since each company has its own guides or frequently used code collections, there are almost no cases of developing as a starter... So please definitely take the lecture~!! I highly recommend it. There are so many bundling tools like webpack, vite, gulp, etc., but I think you explain very well why those things are needed. ㅠㅠ Bundling was really scary, and setting up development was the hardest and scary, so I just wanted to do functional development, but now I'm not so scared~!! Please give us many other lectures and let us know things that will be helpful in our work. Thank you~!! Oh, and if you could add a lecture on setting things up like a basic starter, it would be really fun~!!
- jeonghwanInstructor
I'm glad you found this lesson helpful in understanding the development environment. Thanks for the great feedback.
$53.90
jeonghwan's other courses
Check out other courses by the instructor!
![[React Part 1] Learning React by Building and Comparing강의 썸네일](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336833/cover/01jre8d93dtfptrdx7kjrt7rh0?f=avif&w=420)
![[2025] React Native App Development Masterclass for Non-majors강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
