신입이 알아야하는 프론트엔드 개발 환경 지식 이해하기

신입이 알아야하는 프론트엔드 개발 환경 지식 이해하기

7,900원

10

신입이 알아야하는 프론트엔드 개발 환경 지식 이해하기

면접에서도 자주 나오는 Webpack, Vite, Babel 등 빌드 도구와 개발 환경 설정을 학습합니다.

heart icon

찜하기

share icon

공유하기

🚀 강의 목적과 학습 목표

이 강의는 프론트엔드 개발 환경을 체계적으로 이해하고 설정할 수 있도록 돕습니다.
Webpack, Vite, Babel 등 최신 빌드 도구를 활용하여 효율적인 개발 환경을 구축하는 방법을 배웁니다.
실제 개발에서 자주 사용되는 도구들을 통해 면접에서 자주 묻는 환경 설정 질문을 대비할 수 있습니다.

👩🏻‍💻 이런 분을 위해 만들었어요

📍 학원에서 빌드 도구나 개발 환경 설정에 대해 배우지 않으신 분들.
📍 면접 준비를 하면서 Webpack, Vite, Babel 등의 도구에 대한 이해를 높이고 싶은 분들.
📍 현업에서 적용되는 개발 환경 설정에 대해 배우고 싶으신 분들.

🎁 강의는 이렇게 구성돼요

빌드 도구와 개발 환경의 핵심 개념을 단계적으로 다룹니다.
각 도구의 설치와 설정 방법, 실제 프로젝트에 적용할 수 있는 예제를 실습합니다.
면접에서 자주 나오는 주제들을 실전처럼 연습할 수 있습니다.

챕터 구성

  1. 개발 환경 설정의 중요성 – 왜 개발 환경을 이해해야 할까?
  2. 빌드 도구의 개념 – Webpack, Vite, Babel의 차이점
  3. Webpack 입문 – 기본 설정과 핵심 개념
  4. Vite – 빠르고 효율적인 빌드 도구
  5. Babel – 최신 JavaScript 코드의 호환성 보장하기
  6. NPM과 Yarn – 패키지 매니저의 역할과 사용법
  7. Webpack과 Babel 연동하기 – 트랜스파일링과 번들링
  8. Vite와 Webpack 비교 – 어느 상황에서 어떤 도구를 선택할까?
  9. 코드 최적화와 번들 크기 줄이기
  10. 실전 프로젝트 – 개발 환경 설정과 빌드 도구 사용해보기

💻 쉽게 이해되는 3분할 화면

위코드는 여러분이 최대한 쉽게 이해할 수 있도록 모든것을 준비했습니다. 강의 영상의 핵심 내용을 실시간으로 정리해 드리고, 직접 수정하고 실행해볼 수 있는 코드까지 실시간으로 제공하는 위코드만의 코딩 강의 플랫폼에서 재밌고 쉽게 학습하세요!


📍 모바일에서도 쉽게 볼 수 있는 세로 비율의 강의 영상
📍 강의 내용을 이해하기 쉽도록 실시간 핵심 내용 정리
📍 강의 내용 흐름에 맞추어 실시간 업데이트 되는 코드 에디터
📍 직접 수정해보고 실행도 할 수 있는 코드

커리큘럼

미리보기를 통해 콘텐츠를 확인해보세요.

  • Play IconWebpack 입문 – 기본 설정과 핵심 개념
  • Play IconVite – 빠르고 효율적인 빌드 도구
  • Play IconBabel – 최신 JavaScript 코드의 호환성 보장하기
  • Play IconNPM과 Yarn – 패키지 매니저의 역할과 사용법
  • Play IconWebpack과 Babel 연동하기 – 트랜스파일링과 번들링
  • Play IconVite와 Webpack 비교 – 어느 상황에서 어떤 도구를 선택할까?
  • Play Icon코드 최적화와 번들 크기 줄이기
  • Play Icon실전 프로젝트 – 개발 환경 설정과 빌드 도구 사용해보기