🎨 CLI (Commend Line Interface) CLI는 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식으로 문자열 명령을 입력하는 것을 말한다. 다음 링크에 들어가 Parcel의 CLI를 구체적으로 확인할 수 있으며 그 중 중요한 몇 가지에 대해 알아보자 https://ko.parceljs.org/cli.html Serve 개발용 서버를 시작하는 명령어로 앱이 수정되면 자동으로 다시 빌드하고, 빠른 개발을 위해 빠른 모듈 교체를 지원한다. parcel index.htmlBuild 제품화할 때 사용하는 명령어로, assets을 한 번 빌드한다. 이 과정에서 코드 최소화(미니파이케이션)가 활성화되고 환경변수가 NODE_ENV=production 로 설정된다. parcel build index.h..
🔨 Babel Babel 공식 홈페이지 (https://babeljs.io/)를 열면 Babel is a JavaScript compiler를 볼 수 있다. 즉, Babel은 자바스크립트 컴파일러로, 최신 자바스크립트 문법(ES6, ES7, ES8)으로 작성한 코드를 구형 브라우저에서도 작동할 수 있는 ES5버전으로 변환하는 도구이다. 💻 Babel 설치 1. 터미널에 npm i -D @babel/core @babel/preset-env 입력 2. 루트경로에 .babelrc.js 파일 생성 후 다음 코드 저장 module.exports = { presets: ['@babel/preset-env'] } 이렇게 완료되면 모든 자바스크립트는 바벨을 통해 es5문법으로 변경되어 동작하게 된다. 3. packag..
🌈 벤더 프리픽스(Vendor Prefix) 웹 개발자 도구에서 어떤 태그의 styles에 display: webkit-box 또는 display: ms-flexbox등이 있는 것을 볼 수 있다. 이는 벤더 프리픽스(vendor prefix)라고 부른다. 벤더 프리픽스란, 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등의 웹 브라우저 공급자가 새로운 기능을 제공할 때 이전 버전의 웹 브라우저에 이를 알리기 위해 사용하는 접두사(prefix) 이다. CSS 권고안에 포함 안된 기능이나 CSS 권고안에는 포함되어 있지만 완벽하게 제정된 상태가 아닌 기능을 사용할 때 벤더 프리픽스를 사용하는 것이다. 만약 표준 기술이 동작할 수 없다면 해당 접두사가 붙어 있는 style이 적용되는 것이다. 주요 웹 브라우..
🌓 Parcel의 장점과 단점 장점 : 구성이 없는 단순한 자동 번들링으로 특별한 세팅값이나 구성 옵션을 추가하지 않아도 된다. 단점 : 꼼꼼한 구성이 불가하다보니 프로젝트의 규모가 소/중형 크기에 적합하다. 🌕 Parcel로 프로젝트 구성하기 open in live server가 아닌 parcel로 개발 서버를 열어보자. parcel 설치는 터미널에서 npm install parcel-bundler -D 를 입력하면된다. 1. 프로젝트 폴더 vscode에서 열기 2. 터미널에 npm init -y 입력 3. 터미널에 npm i -D parcel-bundler 입력 4. 생성된 package.json파일에서 scripts 부분에 다음 부분 추가 "dev": "parcel index.html", "buil..