Inflearn English brand logo
Inflearn English brand logo
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.

(4.9) 207 reviews

2,981 students

Node.js
Webpack
Babel
ESLint
Thumbnail

This course is prepared for Intermediate 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
Learn pure javascript and VueJS development through hands-on UI 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
Learning through Trello development
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)

Hello
This is jeonghwan

13,508

Students

837

Reviews

583

Answers

4.8

Rating

9

Courses

👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.

수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.

Curriculum

All

39 lectures ∙ (5hr 2min)

Published: 
Last updated: 

Reviews

All

207 reviews

4.9

207 reviews

  • uphoon님의 프로필 이미지
    uphoon

    Reviews 6

    Average Rating 5.0

    5

    31% enrolled

    프론트엔드 개발자입니다. 그냥 번들러나 트랜스파일러 어떻게 돌아가는지 제대로 알고싶어 수강했는데 바벨에서 플러그인 설명하실때 감탄했습니다... 그동안 플러그인한번도 안보고 프리셋 사용만 그냥 생각없이 했어서 강의보다가 어 왜 저렇게 일일이 다 추가 하시지 뭐지? 했는데 그저 감탄... 프리셋 동작원리를 설명하시려고 그전에 일일이 그렇게 말씀해주시니 프리셋이 왜 필요한지 어떻게 바벨이 돌아가는지 이해하는데 아주 도움이 됬습니다~!! 프론트엔드 개발 꿈꾸시는분들 막상 회사 가시면 각자의 회사의 가이드나 자주사용하는 코드모음 같은것들이 있어서 사실상 스타터로 개발하는경우 거의 없습니다... 그러니 강의 꼭 들어보세요~!! 강추입니다. webpack, vite, gulp 등등 번들링도 너무많은데 그냥 그런것들이 왜 필요한지 정말 잘 알려주시는것 같아요 ㅠㅠ 번들링, 진짜 무서웠고 개발 셋팅하는게 제일 힘들고 무서워서 그냥 기능개발만 하고싶었는데 이제 별로 두렵지 않습니다~!! 다른강의도 많이 많이 내주시고 실무에서 많이 도움되는것들 알려주시면 감사하겠습니다~!! 아 그리고 선생님 혹시 기본 스타터 처럼 셋팅하는 그런것도 강의 추가해주시면 정말 재밌을거 같습니다~!!

    • 김정환
      Instructor

      이 수업을 개발 환경을 이해하시는데 도움이 되셨다니 다행입니다. 좋은 피드백 고맙습니다.

  • Jminn님의 프로필 이미지
    Jminn

    Reviews 24

    Average Rating 5.0

    5

    100% enrolled

    선행으로 생활코딩 webpack 강의를 듣고 오시면 많은 도움이 될거 같습니다. 기본적으로 JavaScript, npm, package.json이 뭔지 알아야 강의 진행이 원활할거 같습니다. 처음엔 그저 따라해도 무리는 없겠지만 뒤로 갈수록 어려워질수 있습니다. 보통 설정파일, 로더, 플러그인이 뭔지 예시 몇개 보여주는 강의는 많았는데 이렇게 웹팩에 대해 1-10까지 보여주는 강의는 없었던거 같습니다. 요즘 모듈모듈 이러는데 정확히 모듈의 개념이 뭔지 알수 있어 많은걸 얻었던 시간이었습니다. 좋은 강의 감사드립니다.

    • 이언상님의 프로필 이미지
      이언상

      Reviews 2

      Average Rating 5.0

      5

      100% enrolled

      수강평 먼저 보시는 분들, 어서 구매하세요.

      • 김정환
        Instructor

        수강해 주셔서 고맙습니다.

    • Youme Choi님의 프로필 이미지
      Youme Choi

      Reviews 8

      Average Rating 4.9

      5

      100% enrolled

      웹팩을 참 막연하게 사용하고 있었는데 웹팩을 이해하는데 정말 큰 도움이 되었습니다. 웹팩을 쓰고는 있지만 뭐가 어떻게 돌아가는 건지 아직도 감이 안온다.. 하시는 저 같은 분들에게 정말 100번 추천하고 싶습니다. 보다가 재밌어서 새벽 늦게까지 볼 정도로 흥미롭게 봤습니다. 웹팩 심화까지 먼저 보고 아직 바벨, 린트는 못 봤는데 나머지 강의도 잘 보겠습니다! 좋은 강의 만들어 주셔서 정말 감사합니다. :D 김정환님 강의는 믿고 봅니다...

      • 김정환
        Instructor

        일하다보면 웹팩 조금씩 건들면서 사용하는데 이게 잘 감이 안오더라구요. 문서 보면서 하나씩 짚어가면서 정리하니깐 이제 좀 자신감이 생기는 것 같습니다. 비슷한 상황으로 도움이 되셔서 무척 뿌듯합니다.

    • 차태현님의 프로필 이미지
      차태현

      Reviews 1

      Average Rating 5.0

      5

      18% enrolled

      어렴풋이 알고 있던 것을이 차근차근 정리되고 있어요 ㅠㅠ 넘 행복합니다!

      • 김정환
        Instructor

        그렇게 말씀해 주셔서 고맙습니다. 이후로도 스스로 필요한 부분을 알아 가셨으면 좋겠습니다.

    jeonghwan's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!

    $53.90