Javascript/FE 개발환경설정

[웹팩][바벨] 패키지 총 설치

번들링 : 모든 파일들을 하나하나의 모듈로 보고, 이 모듈들을 배포용으로 병합하고 포장하는 작업.(최적화도 해줌) 이러한 번들링 작업을 수행하는 툴을 번들러라고 한다. 현재 시점에서는 번들러 중에서 '웹팩'이 가장 인기가 많다. 처음 package.json 상태 { "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "cross-env NODE_ENV=production webpack --progress", "start": "webpack serve --progress" }, "keywords": [], "author": "", "license": "ISC" } webp..

[FE 번들러] parceljs

🚀 시작하기 (parceljs.org) 🚀 시작하기 ko.parceljs.org 🚀 시작하기 Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄수 있는 웹 애플리케이션 번들러 입니다. 멀티코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다. 먼저 npm 으로 Parcel 을 설치 npm: npm install -g parcel-bundler 그 다음, package.json 파일을 프로젝트 디렉토리에 만드세요. npm init -y Parcel 은 어떤 유형의 파일이라도 진입점으로 취할 수 있지만 HTML 이나 JavaScript 파일이 좋습니다. 만약 HTML 파일 내에 상대경로로 메인 JavaScript 파일을 연결 했다면, Parcel 은 이 또한 처리..

node.js 이용해서 프론트엔드 개발 프로젝트 생성하기

참고: [Node.js 코드랩] 1.오리엔테이션 | 김정환 블로그 (jeonghwan-kim.github.io) 프론트엔드 개발환경의 이해: NPM | 김정환 블로그 (jeonghwan-kim.github.io) 1. 개발을 진행할 적당한 빈폴더 하나 만들기 아래 순서대로 작성하기 npm init 프로젝트 생성 명령어로, 프로젝트의 메타 정보를 입력할 수 있는 화면이 제공된다. 아래와 같이 뜬다 npm init This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help init` for d..