![[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)강의 썸네일](https://cdn.inflearn.com/public/courses/326905/cover/739f7b4b-1a9f-478f-a6a8-1a13bf58cae3/326905-eng.png?w=420)
[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
김정환
리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.
초급
React, MVC
BEST
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.
중급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
이런 걸 배울 수 있어요
모듈시스템을 사용하고 개발 환경을 자동화하는 방법(Webpack)
최신 자바스크립트 문법을 사용하는 환경 만들기(Babel)
동료와 협업하는 개발 환경 만들기 (ESLint, Prettier)
웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요!
“웹팩은 팀에서 한 명만 다룰 줄 알면 돼!?”
만약 그 한 명이 팀을 떠난다면 어떻게 될까요? 어쩌면 여러분이 그 한 명이 되어야 할지도 모릅니다.
개발팀에 여러분 혼자라면 웹팩 구성하는 것은 피할 수 없고요.
개발 환경 구성만큼은 내 손으로 직접 다룰 줄 안다면 어떨까요?
최소한 다른 사람이 만들어 놓은 구성(이를테면 create-react-app이나 vue-cli로 만든 코드)을 읽고 이해할 수 있는 정도가 된다면 훨씬 자신감 있게 일할 수 있을 거에요.
웹팩을 비롯한 바벨, 린트, 프리티어 등 프론트엔드 개발 환경을 자동화하고 생성성을 높여 줄 수 있는 도구들을 익힐 수 있는 강의를 만들었습니다.
이것을 통해 더욱 생산성 있게 일할 수 있기를 기대합니다.
📝 어떤 걸 배우게 되나요?
# Node.js
Node.js는 프론트엔드 개발환경을 구성하는데 기본 바탕이 되는 기술입니다. 대부분의 도구가 Node.js 기반으로 동작하기 때문이죠. 뿐만 아니라 일련의 개발 프로세스를 자동화하는데도 큰 역할을 담당하고 있습니다. 프론트엔드 개발 과정에서 Node.js의 역할을 이해할 수 있습니다.
# Webpack
모듈 기반의 개발을 가능하게 해주는 것이 바로 웹팩입니다. 같은 역할을 하는 대체제들이 나왔지만 여전히 가장 많이 사용하는 것은 웹팩입니다. 웹팩의 동작 원리를 들여다보고 이해한 뒤 직접 개발 환경을 구성해보고 로더를 직접 구현도 해보는 실습을 통해 사용법을 손에 익힐수 있습니다.
# Babel + SASS
ECMAScirpt+, Typescript 같은 고수준 프로그래밍 언어나, React.js, Vue.js 같은 프레임웍을 사용해서 개발할 때 반드시 필요한 것이 바벨입니다. 물론 바벨 없이도 개발할 수 있지만, 누가 그렇게 개발하나요? 개발 생산성을 위해서는 반드시 바벨의 도움을 받아야 합니다. 바벨의 원리를 이해하고 직접 사용해 보면서 어떻게 프로젝트에 최적화된 환경을 만들 수 있는지 알아보세요.
# Prettier + ESLint
코딩 컨벤션으로 인한 논쟁은 무척 피곤한 일이죠? 도구의 도움을 받는다면 좀 더 수월하게 코딩 스타일을 맞출 수 있을 거에요. 게다가 자동화 도구를 개발 절차에 추가해 놓으면 일관적인 코드를 지속적으로 유지할 수 있습니다.
🧰 미리 설치해 주세요
VSCode를 사용하지만 평소에 사용하는 에디터나 IDE가 있다면 그것을 사용하서도 괜찮습니다.
실습 진행을 위해 Git을 설치해 주세요. 깃 훅을 사용하는 수업도 있기 때문에 v2.3.0 버전 이상을 사용하시기 바랍니다.
🙋🏻♂️ 강의 관련 예상 질문
Q. 이 강의를 시작하게 된 계기를 소개해주세요.
A. 프론트엔드 기술이 무척 빠르다고는 하지만 그래도 한번은 정리해 보고 싶었습니다. 웹팩부터 시작해서 일하면서 자주 사용하는 개발 도구 메뉴얼을 하나씩 읽어보면서 블로그에 정리했던 내용이 "프론트엔드 개발환경의 이해(총 5편)"이고요. 그런뒤 작년 2019년 T아카데미에서 이 주제로 세미나를 열었는데 의외로 저처럼 필요로 하시는 분들이 많더라구요. 반응이 괜찮아서 내용을 더 보강해서 인프런에 온라인 강의를 개설하였습니다.
Q. 이 강의만의 특별한 장점이 있을까요?
A. 개발환경이라는 주제가 실습하기 좀 어려울수도 있을것 같아요. 메뉴얼만 읽어보고 지나가기에는 잘 모르기 때문이죠. 그래서 각 이론 수업마다 조그만 실습을 준비했습니다(실습 저장소: lecture-frontend-dev-env).이전 강의 "실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발"에서 다룬 코드를 기반으로 여기에 개발환경을 구성하도록 단계별로 실습 과제를 준비했어요. 하나하나 풀어보다보면 어느새 개발 환경 구성하는것이 손에 익혀질수 있도록 말이죠.
Q. 이 강의를 통해 어떤 일을 할 수 있나요?
A. 현재 여러분이 개발하고 있는 프로젝트의 개발환경을 이해할 수 있을거에요. 필요하다면 커스터마이징해서 생산성을 높일 수도 있고요. 이제 막 프로젝트를 시작하는 단계인가요? 그럼 입맛에 맞게 직접 개발 환경을 꾸며볼 수도 있습니다.
다른 강의 보기
견고한 JS 소프트웨어 만들기
테스트 주도 개발, 자바스크립트 디자인 패턴 배우기
테스트 주도 개발, 자바스크립트 디자인 패턴 배우기
실습 UI 개발로 배워보는 순수 javascript와 VueJS 개발
Vue.JS 기초, MVC/MVVM 아키텍처, 컴포넌트 개발
Vue.JS 기초, MVC/MVVM 아키텍처, 컴포넌트 개발
이런 분들께
추천드려요!
학습 대상은
누구일까요?
미리 세팅된 환경에서만 개발해서 웹팩이나 바벨 설정은 도저히 모르겠어요
웹팩을 써 보긴 했는데 어떤 방식으로 동작하는 건지 알고 싶어요
일관적인 코딩 컨벤션을 유지하고 싶은데 팀으로 작업하다 보니 잘 안 돼요
선수 지식,
필요할까요?
기초적인 프론트엔드 개발 경험이 필요합니다. (자바스크립트, HTML, CSS)
안녕하세요
김정환입니다.
13,532
명
수강생
838
개
수강평
583
개
답변
4.8
점
강의 평점
9
개
강의
👋🏼 안녕하세요 인프런에서 강의하는 김정환입니다.
수업 중 궁금한 사항은 질문 사항에 올려주세요.
매일 한 번씩 확인하고 답변 드리겠습니다.
커리큘럼
전체
39개 ∙ (5시간 2분)
1. 강의 소개
04:41
2. 프로젝트 생성
10:05
3. 외부 패키지를 관리하는 방법
10:13
4. 웹팩이 필요한 이유와 기본 동작
10:01
5. 엔트리/아웃풋 실습
09:44
6. 엔트리와 아웃풋(실습)
03:53
7. 엔트리와 아웃풋(풀이)
05:28
8. 로더
05:55
10. 로더(실습)
03:03
11. 로더(풀이)
06:13
12. 플러그인
08:34
강의 게시일:
마지막 업데이트일:
수강평
전체
207개
4.9
207개의 수강평
uphoon수강평 6
∙
평균 평점 5.0
5
31% 수강 후 작성프론트엔드 개발자입니다. 그냥 번들러나 트랜스파일러 어떻게 돌아가는지 제대로 알고싶어 수강했는데 바벨에서 플러그인 설명하실때 감탄했습니다... 그동안 플러그인한번도 안보고 프리셋 사용만 그냥 생각없이 했어서 강의보다가 어 왜 저렇게 일일이 다 추가 하시지 뭐지? 했는데 그저 감탄... 프리셋 동작원리를 설명하시려고 그전에 일일이 그렇게 말씀해주시니 프리셋이 왜 필요한지 어떻게 바벨이 돌아가는지 이해하는데 아주 도움이 됬습니다~!! 프론트엔드 개발 꿈꾸시는분들 막상 회사 가시면 각자의 회사의 가이드나 자주사용하는 코드모음 같은것들이 있어서 사실상 스타터로 개발하는경우 거의 없습니다... 그러니 강의 꼭 들어보세요~!! 강추입니다. webpack, vite, gulp 등등 번들링도 너무많은데 그냥 그런것들이 왜 필요한지 정말 잘 알려주시는것 같아요 ㅠㅠ 번들링, 진짜 무서웠고 개발 셋팅하는게 제일 힘들고 무서워서 그냥 기능개발만 하고싶었는데 이제 별로 두렵지 않습니다~!! 다른강의도 많이 많이 내주시고 실무에서 많이 도움되는것들 알려주시면 감사하겠습니다~!! 아 그리고 선생님 혹시 기본 스타터 처럼 셋팅하는 그런것도 강의 추가해주시면 정말 재밌을거 같습니다~!!
- 김정환지식공유자
이 수업을 개발 환경을 이해하시는데 도움이 되셨다니 다행입니다. 좋은 피드백 고맙습니다.
- Youme Choi
수강평 8
∙
평균 평점 4.9
5
100% 수강 후 작성웹팩을 참 막연하게 사용하고 있었는데 웹팩을 이해하는데 정말 큰 도움이 되었습니다. 웹팩을 쓰고는 있지만 뭐가 어떻게 돌아가는 건지 아직도 감이 안온다.. 하시는 저 같은 분들에게 정말 100번 추천하고 싶습니다. 보다가 재밌어서 새벽 늦게까지 볼 정도로 흥미롭게 봤습니다. 웹팩 심화까지 먼저 보고 아직 바벨, 린트는 못 봤는데 나머지 강의도 잘 보겠습니다! 좋은 강의 만들어 주셔서 정말 감사합니다. :D 김정환님 강의는 믿고 봅니다...
- 김정환지식공유자
일하다보면 웹팩 조금씩 건들면서 사용하는데 이게 잘 감이 안오더라구요. 문서 보면서 하나씩 짚어가면서 정리하니깐 이제 좀 자신감이 생기는 것 같습니다. 비슷한 상황으로 도움이 되셔서 무척 뿌듯합니다.
- Jminn
수강평 24
∙
평균 평점 5.0
5
100% 수강 후 작성선행으로 생활코딩 webpack 강의를 듣고 오시면 많은 도움이 될거 같습니다. 기본적으로 JavaScript, npm, package.json이 뭔지 알아야 강의 진행이 원활할거 같습니다. 처음엔 그저 따라해도 무리는 없겠지만 뒤로 갈수록 어려워질수 있습니다. 보통 설정파일, 로더, 플러그인이 뭔지 예시 몇개 보여주는 강의는 많았는데 이렇게 웹팩에 대해 1-10까지 보여주는 강의는 없었던거 같습니다. 요즘 모듈모듈 이러는데 정확히 모듈의 개념이 뭔지 알수 있어 많은걸 얻었던 시간이었습니다. 좋은 강의 감사드립니다.
![[리액트 2부] 고급 주제와 훅강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?w=420)
![[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의 썸네일](https://cdn.inflearn.com/public/courses/329963/cover/26550c58-624a-41c8-86dc-fea75b6c3b22/thumbnail-frontnew.png?w=420)
![제대로 배우는 Express.js: Part1 기초부터 심화까지 [기초편]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336833/cover/01jre8d93dtfptrdx7kjrt7rh0?w=420)
![[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?w=420)
