꾸생의 DevLog

React 18 웹팩&바벨 수동 설정하기

이번 포스팅에서는 리액트 18 버전을 기준으로 웹팩 설정을 수동으로 진행해 보겠습니다. 리액트가 18 버전으로 나온지 조금 지났는데, 저는 회사에서 Vue를 계속 쓰다 보니 리액트를 공부할 시간이 없었습니다. 먼저 간략하게 CRA(create-react-app) 폴더 구조와 비슷하게 구성해보고 수동으로 웹팩설정과 가장 유용한 기능 중 하나인 HMR(Hot Module Replacement)도 설정해보겠습니다. 마지막으로 이미지 파일을 Webp 확장자로 변환해주는 웹팩 플러그인이 있더라구요. 이 것도 적용하려고 했으나.. 다음 포스팅으로 양보하겠습니다 :) 1. 폴더 구조 //React18 ├─ dist ├─ package-lock.json ├─ package.json ├─ public │ └─ index..

2022.06.08  

트랜스파일러(Transpiler)와 바벨(Babel)

자바스크립트를 공부하다 보면 쉽게 들을 수 있는 폴리필과 바벨에 대해서 다시 공부해보며 기록해봅니다. 자바스크립트는 현재까지 계속 업데이트되고 있고 인기있는 언어인데요. 그리고 브라우저마다 자바스크립트를 실행하는 엔진이 다르기 때문에 하나의 코드가 서로 다른 브라우저에서 작동이 안 될 수 있습니다. 간단하게 브라우저별 JS 엔진 종류 눈에 익히고 넘어가봅니다. Chrome : V8 Safari : JavaScriptCore Firefox : 스파이더 몽키(Spidermonkey) Edge : 차크라(Chakra) 이제 트랜스파일러와 바벨, 폴리필이 무엇인지 알아보자 트랜스파일러(Transpiler) 컴파일러는 들어봤어도 트랜스파일러를 잘 모르는 사람이 많은데요. 컴파일러는 사람이 이해할 수 있는 고수준 ..

2022.05.29