1. GET http://localhost:8080/js/data.js net::ERR_ABORTED 404 (Not Found) 뜻 : html에 연결된 data.js파일을 찾을 수 없음 상황 : html에 있던 script태그에서 에러가 남. 해결 : webpack은 파일을 읽어들이는 진입점이 js파일이기 때문에 html에서 script태그로 js파일을 연결할 필요가 없다. 따라서 html에 있던 script 태그 삭제하면 된다. 2. Uncaught ReferenceError: begin is not defined at HTMLButtonElement.onclick 뜻 : begin 함수를 HTMLButtonElement.onclick에서 사용불가 상황 : html에서 버튼 클릭 시 start.js..
💻 Babel 설치 1. 터미널에 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime 입력 2. 루트경로에 .babelrc.js 파일 생성 후 다음 코드 저장 module.exports = { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] }3. webpack.config.js module에 babel-loader 추가 { test: /\.js$/, use: [ 'babel-loader' ] }4. 터미널에 npm i -D babel-loader 입력
💻 Autoprefixer 설치 벤더 프리픽스를 자동으로 붙여주는 Autoprefixer를 설치해보자 1. 터미널에 npm i -D postcss autoprefixer postcss-loader 입력 2. webpack.config.js의 module 수정 module: { rules: [ { test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] } ] },use에 postcss-loader를 추가하고 순서에 주의하자. 3. package.js파일에 browserslist 추가 "browerslist": [ "> 1%", "last 2 ver..
1️⃣첫 번째 방법. static 안에 css 넣기 1. html 파일에 다음과 같은 link태그로 css를 연결 2. static 폴더에 css 폴더를 만들고 그 안에 style.css 파일 넣기 이렇게 하면 dist 파일에 css 폴더가 들어가게 된다. 3. 터미널에 npm run dev 입력 개발 서버가 열리고 내용을 확인하면 css가 잘 적용된 것을 확인할 수 있다. 2️⃣두 번째 방법. js 에서 css 가져오기 다시 루트 경로에 css 폴더를 꺼내놓자. 1. main.js에서 import로 css 가져오기 import '../css/style.css'webpack의 진입점을 js파일로 해놓았기 때문에 webpack은 main.js부터 읽어나가면 main.js에 연결된 css 파일..
🌓 Webpack의 장점과 단점 장점 : 매우 꼼꼼한 구성 옵션을 설정할 수 있으며 중/대형 사이즈의 규모있는 프로젝트에 적합하다. 단점 : 디테일한 옵션까지 제공하다보니 확인해야 할 요소가 많다. 🌕 Webpack으로 프로젝트 구성하기 1. 터미널에 npm init -y 입력 2. 터미널에 npm i -D webpack webpack-cli webpack-dev-server@next 입력 parcel은 cli가 자동화되어 있었지만 webpack은 그렇지 않기 때문에 webpack-cli를 설치해줘야 한다. 또한 개발 서버를 열고 수정사항이 바로바로 반영될 수 있게 하기 위해 webpack-dev-server를 설치한다. dev-server는 cli와 버전 일치를 위해 뒤에 @next까지 붙여준다. 3...
🎨 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이 적용되는 것이다. 주요 웹 브라우..