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