wei3on 님의 블로그

babelJavaScript 컴파일러최신 버전의 JavaScript 코드를 이전 버전의 JavaScript로 변환하는 도구 최신 JavaScript 문법을 사용하면서도 구형 브라우저나 환경에서 코드가 동작할 수 있게 함아직 제안 단계에 있는 JavaScript 기능을 현재 사용할 수 있게 해줌크로스 브라우저 호환성 보장최신 JavaScript 기능을 안전하게 사용 가능코드의 가독성과 유지보수성 향상 더보기npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime개발 의존성으로 패키지 설치  프로젝트 루트에 .babelrc.js 파일 생성바벨이 동작할 수 있는 내용 작성하기 webpack.config.js 파일 설정babel-loader ..

Autoprefixerprefixer(공급업체 접두사) 자동 설정 기능PostCSS의 플러그인 중 하나로, CSS를 파싱하고 벤더 프리픽스(vendor prefixes)를 자동으로 추가해주는 도구  1. 호환성 보장최신 css 속성이나 값을 사용해도, 최신 css 문법을 지원하지 않는 구형 브라우저에서도 동작할 수 있게 해줌하위 호환성에 대한 걱정 ⬇️2. 자동화된 프로세스수동으로 각 브라우저별 프리픽스를 추가할 필요가 없음  → 시간 절약, 인적 오류 가능성 낮음3. 유지보수 용이성브라우저 지원 정보가 업데이트 되면, Autoprefixer도 자동으로 조정됨4. 크로스 브라우징 대응다양한 브라우저 환경에서 일관된 사용자 경험 제공 더보기npm i -D postcss autoprefixer postcss..

페이지를 index.html로 확인하고 싶을때 개발 서버를 오픈하기 위해 설치하는 플러그인더보기npm i -D html-webpack-pluginplugin을 import와 같은 기능인 require로 불러와서번들링 후 결과물의 처리 방식 등 다양한 방식을 지정해주는 플러그인을 설정해줄 수 있는 plugins 옵션 추가devServer 옵션 - http://localhost:8080 더보기npm run dev  정적 파일을 연결하기 위해서 설치하는 플러그인더보기npm i -D copy webpack-plugincopy-webpack-plugin 패키지를 require해서 CopyPlugin 변수에 담은 후 plugins 옵션 내에생성자로 CopyPlugin 내용을 입력 from: 'static' (어디에..

Command Line Interface (CLI) : 터미널에서 입력하는 여러 명령어 더보기npm init -y🔻더보기npm i -D webpack webpack-cli webpack-dev-server@nextwebpack - 번들러가 동작하기 위한 핵심적인 패키지webpack-cli - 터미널에서 입력하는 모든 명령어 (CLI) webpack-dev-server -        dev 명령을 통해서 개발서버를 오픈할 때 조금 더 개발에 특화되어서         페이지를 바로바로 새로고침 해 줄 수 있게 하는 구조로 만들기 위한 패키지🔻package.json mode 라는 옵션을 추가해서 개발모드인지 제품모드인지 구별   ❗️ parcel bundler는 구성 옵션이 따로 필요없이 기본 적인 내용..

리액트 앱 설치npx create-react-app npx create-react-app ./        // 현재 디렉토리 지정   Webpack이란?웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리 장점여러 파일의 자바스크립트 코드를 압축하여 최적화 -> 로딩에 대한 네트워크 비용을 줄일 수 있음모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉬움 Babel이란?최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있게 변환시켜주는 라이브러리  npx create-react-app ./ 에서 npx란?npx는 노드 패키지 실행을 도와주는 도구create-rea..