본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다
패스트캠퍼스 환급챌린지란?
(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스
초간단 미션! 하루 20분 공부하고 수강료 전액 환급에 AI 스킬 장착까지!
fastcampus.co.kr
https://fastcampus.info/4n8ztzq
3일차 공부 시작!
오늘의 강의 주제는 '강의 구조와 학습 환경'이다.
(오늘도 마찬가지로 모자이크 처리..)
오늘의 학습 내용
* 프론트엔드 개발 환경과 Parcel 번들러
오늘은 앞으로 진행할 프론트엔드 개발 환경을 어떻게 구성하는지, 그리고 번들러인 Parcel에 대해 배웠다.
본격적으로 개발에 앞서 전체적인 환경 세팅을 하는 것인데 기본적으로 세팅되어 있기 때문에 강의 내용 중 나오는 parcel에 대해서만 찾아보고 설치를 했다.
- 개발 환경과 실습 준비
JavaScript나 TypeScript로 작성된 앱을 실행하는 것은 어렵지 않지만, 사용자마다 개발 환경이 조금씩 달라질 수 있다.
대부분의 예제는 크롬 브라우저에서 실행될 수 있도록 되어 있다.
코드 에디터는 여러 가지가 있지만, 강의에서는 마이크로소프트에서 만든 vscode를 사용했다.
에디터에서 중요한 요소는 바로 익스텐션(확장 프로그램)이다.
익스텐션은 VSCode의 기본 기능을 확장해주며, 각 사용자가 자신의 필요에 따라 원하는 기능만 선택적으로 설치해 사용할 수 있다.
오늘 소개된 주요 익스텐션은 Debugger for Chrome이었다.
이 확장 프로그램을 통해 크롬 브라우저에서 자바스크립트 코드를 디버깅할 수 있다.
- Node.js와 번들러
프론트엔드 개발에서는 Node.js 환경이 필수적이라서 설치해준다.
그리고 오늘의 핵심 주제 중 하나는 바로 번들러(Bundler)였다.
현대적인 웹앱을 개발할 때는 여러 개의 JS, TS, CSS, 이미지 파일 등을 하나 또는 여러 개의 번들로 묶어주는 번들러가 반드시 필요하다.
대표적인 번들러로는 Webpack, Parcel, Rollup 등이 있다.
이 중에서 Parcel은 가장 쉬운 번들러라고 한다.
- Parcel이란?
Parcel은 별도의 설정 파일 없이 바로 사용할 수 있는 Zero Configuration 번들러다
설치만 하면 복잡한 설정 없이 HTML, JS, TS, CSS 등 다양한 파일을 자동으로 감지해 번들링해준다.
* Parcel의 주요 특징
- 제로 설정(Zero Configuration)
- 빠른 빌드와 캐싱
- 핫 리로딩(Hot Reloading)
-> 코드가 변경되면 브라우저를 새로고침하지 않아도 변경 사항이 즉시 반영
- 자동 최적화 등
* Parcel과 유명한 Webpack의 차이
- Webpack은 세밀한 설정과 커스터마이징이 가능하지만, 설정 파일이 복잡하고 러닝커브가 있다
- Parcel은 설정이 거의 필요 없고 빠르고 쉽게 사용할 수 있다는 점이 가장 큰 장점
마치며
오늘 강의를 통해 개발 환경을 구성하는 방법과 Parcel 번들러에 대해서 알게 되었다.
Parcel 외에는 기본적으로 세팅이 되어 있기 때문에 큰 어려움이 없었고 이번 강의를 통해 parcel에 대해 조금 알 수 있게 되었다.
매일 1클립씩만 듣고 기록하는줄 알았는데 1클립 이상 강의를 들어도 되는 것 같다.
그리고 다음 강의부터는 JS와 TS에 대한 내용이 나오기도 해서 빨리빨리 진도를 나가려고 한다.