Nắm vững hoàn hảo HTTP - cốt lõi của phát triển web!
jeonghwan
Tìm hiểu kiến thức mạng web developer cần biết: HTTP cơ bản, yêu cầu dữ liệu, giao tiếp real-time, bảo mật, tối ưu hiệu suất.
초급
Ajax, https, cors
이미 만들어 놓은 개발 환경을 이해할 수 있어요. 처음부터 직접 개발 환경을 만들 수 있어요.

모듈시스템을 사용하고 개발 환경을 자동화하는 방법(Webpack)
최신 자바스크립트 문법을 사용하는 환경 만들기(Babel)
동료와 협업하는 개발 환경 만들기 (ESLint, Prettier)
웹팩, 바벨, 린트 같은 프론트엔드 기술을 이해하고 실무에 적용해 보세요!
만약 그 한 명이 팀을 떠난다면 어떻게 될까요? 어쩌면 여러분이 그 한 명이 되어야 할지도 모릅니다.
개발팀에 여러분 혼자라면 웹팩 구성하는 것은 피할 수 없고요.
개발 환경 구성만큼은 내 손으로 직접 다룰 줄 안다면 어떨까요?
최소한 다른 사람이 만들어 놓은 구성(이를테면 create-react-app이나 vue-cli로 만든 코드)을 읽고 이해할 수 있는 정도가 된다면 훨씬 자신감 있게 일할 수 있을 거에요.
웹팩을 비롯한 바벨, 린트, 프리티어 등 프론트엔드 개발 환경을 자동화하고 생성성을 높여 줄 수 있는 도구들을 익힐 수 있는 강의를 만들었습니다.
이것을 통해 더욱 생산성 있게 일할 수 있기를 기대합니다.
VSCode를 사용하지만 평소에 사용하는 에디터나 IDE가 있다면 그것을 사용하서도 괜찮습니다.
실습 진행을 위해 Git을 설치해 주세요. 깃 훅을 사용하는 수업도 있기 때문에 v2.3.0 버전 이상을 사용하시기 바랍니다.
Q. 이 강의를 시작하게 된 계기를 소개해주세요.
A. 프론트엔드 기술이 무척 빠르다고는 하지만 그래도 한번은 정리해 보고 싶었습니다. 웹팩부터 시작해서 일하면서 자주 사용하는 개발 도구 메뉴얼을 하나씩 읽어보면서 블로그에 정리했던 내용이 "프론트엔드 개발환경의 이해(총 5편)"이고요. 그런뒤 작년 2019년 T아카데미에서 이 주제로 세미나를 열었는데 의외로 저처럼 필요로 하시는 분들이 많더라구요. 반응이 괜찮아서 내용을 더 보강해서 인프런에 온라인 강의를 개설하였습니다.
Q. 이 강의만의 특별한 장점이 있을까요?
A. 개발환경이라는 주제가 실습하기 좀 어려울수도 있을것 같아요. 메뉴얼만 읽어보고 지나가기에는 잘 모르기 때문이죠. 그래서 각 이론 수업마다 조그만 실습을 준비했습니다(실습 저장소: lecture-frontend-dev-env).이전 강의 "실습 UI 개발로 배워보는 순수 javascript 와 VueJS 개발"에서 다룬 코드를 기반으로 여기에 개발환경을 구성하도록 단계별로 실습 과제를 준비했어요. 하나하나 풀어보다보면 어느새 개발 환경 구성하는것이 손에 익혀질수 있도록 말이죠.
Q. 이 강의를 통해 어떤 일을 할 수 있나요?
A. 현재 여러분이 개발하고 있는 프로젝트의 개발환경을 이해할 수 있을거에요. 필요하다면 커스터마이징해서 생산성을 높일 수도 있고요. 이제 막 프로젝트를 시작하는 단계인가요? 그럼 입맛에 맞게 직접 개발 환경을 꾸며볼 수도 있습니다.
학습 대상은
누구일까요?
미리 세팅된 환경에서만 개발해서 웹팩이나 바벨 설정은 도저히 모르겠어요
웹팩을 써 보긴 했는데 어떤 방식으로 동작하는 건지 알고 싶어요
일관적인 코딩 컨벤션을 유지하고 싶은데 팀으로 작업하다 보니 잘 안 돼요
선수 지식,
필요할까요?
기초적인 프론트엔드 개발 경험이 필요합니다. (자바스크립트, HTML, CSS)
전체
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
전체
212개
4.9
212개의 수강평
수강평 24
∙
평균 평점 5.0
5
Tôi nghĩ sẽ rất hữu ích nếu bạn xem bài giảng về webpack mã hóa hàng ngày như một hành động tốt. Về cơ bản, tôi nghĩ bài giảng sẽ diễn ra suôn sẻ nếu bạn biết JavaScript, npm và pack.json là gì. Ban đầu có thể không khó để làm theo nhưng nó có thể trở nên khó khăn hơn khi bạn tiến bộ. Có nhiều bài giảng đưa ra một số ví dụ về file cấu hình, bộ tải, plugin là gì, nhưng tôi không nghĩ có bài giảng nào đưa ra 1-10 về webpack như thế này. Ngày nay, người ta nói mô-đun-mô-đun, và đó là thời điểm tôi đã học được rất nhiều điều khi có thể hiểu chính xác khái niệm mô-đun là gì. Cảm ơn bạn vì bài giảng tuyệt vời.
수강평 8
∙
평균 평점 4.9
5
Tôi đang sử dụng webpack rất mơ hồ, nhưng nó thực sự giúp tôi hiểu về webpack. Tôi đang sử dụng webpack, nhưng tôi vẫn không thể hiểu chuyện gì đang xảy ra. Tôi thực sự muốn giới thiệu nó 100 lần cho những người như tôi. Tôi thấy nó thú vị đến mức tôi đã xem nó đến tận đêm khuya. Tôi đã xem gói web chuyên sâu trước tiên và chưa thấy Babel hay Lint, nhưng tôi sẽ mong chờ các bài giảng còn lại! Cảm ơn bạn rất nhiều vì đã tạo ra một khóa học tuyệt vời. :D Tôi tin tưởng và xem các bài giảng của Kim Jeong-hwan...
Trong khi làm việc, tôi sử dụng webpack từng chút một, nhưng tôi không thể hiểu rõ lắm. Khi tôi nhìn vào tài liệu và sắp xếp từng tài liệu một, tôi cảm thấy mình ngày càng tự tin hơn. Tôi rất tự hào vì đã giúp được bạn trong hoàn cảnh tương tự.
수강평 1
∙
평균 평점 5.0
5
Những điều tôi mơ hồ biết đang được sắp xếp từng bước một. Tôi hạnh phúc quá!
Cảm ơn bạn đã nói điều đó. Tôi hy vọng rằng bạn sẽ tiếp tục tự mình tìm ra những gì bạn cần.
수강평 6
∙
평균 평점 5.0
5
Tôi là một nhà phát triển front-end. Tôi chỉ tham gia lớp học vì tôi muốn biết bộ đóng gói và bộ chuyển mã hoạt động như thế nào. Tôi rất ấn tượng khi Babel giải thích về plugin... Trong khi đó, tôi chưa bao giờ xem xét các plugin và chỉ sử dụng các cài đặt trước mà không hề suy nghĩ về nó, vì vậy sau khi xem bài giảng, tôi nghĩ, tại sao bạn lại thêm từng cái một vào? Nhưng tôi chỉ ngạc nhiên... Để giải thích nguyên tắc hoạt động cài sẵn, bạn đã giải thích chi tiết trước, điều này rất hữu ích trong việc hiểu tại sao cần cài đặt trước và cách hoạt động của thanh tạ!! Với những bạn có ước mơ phát triển front-end thì khi vào công ty nào cũng có hướng dẫn và bộ sưu tập code thường xuyên sử dụng cho từng công ty nên thực tế thì hiếm khi phát triển khi mới bắt đầu... Vì vậy hãy nhớ nghe bài giảng nhé~!! Rất khuyến khích. Có quá nhiều gói như webpack, vite, gulp, v.v., nhưng tôi nghĩ bạn thực sự giải thích lý do tại sao việc đóng gói thực sự đáng sợ và việc thiết lập quá trình phát triển là khó khăn và đáng sợ nhất, vì vậy tôi chỉ muốn làm tính năng. phát triển, nhưng bây giờ tôi không còn sợ hãi nữa~!! Tôi sẽ đánh giá cao nếu bạn có thể giảng cho chúng tôi nhiều bài giảng khác và cho chúng tôi biết những điều rất hữu ích trong thực tế~!! Ồ, và thưa giáo viên, sẽ rất thú vị nếu bạn có thể thêm một bài giảng để thiết lập mọi thứ giống như phần mở đầu cơ bản.
Tôi rất vui vì bạn thấy lớp học này hữu ích trong việc tìm hiểu môi trường phát triển. Cảm ơn bạn đã phản hồi tốt.
월 ₩292,686
5개월 할부 시
₩69,300