꾸생의 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  

JS 모듈 번들러와 웹팩(Webpack)

요즘 회사에서는 Vue를 사용해 프로젝트를 진행하고 있습니다. 이번 1차 프로젝트가 곧 끝나가는데요. 2차도 마찬가지로 Vue를 사용해 개발한다고 합니다. 저는 리액트가 좋은데 말이죠? 아니면 최소한 IE를 배제하고 vue 3.0을 쓸 수 있도록 해주면 좋은데 말이죠 이 부분은 어쩔 수 없는 SI 프로젝트라 선택권이 없습니다. 그래도 모든 부분에서 득과 실이 있다고 생각하는데요. 취업하기 전 찍먹만 했던 뷰를 제 기술 스택으로 인정할 수 있게 됐습니다. 이 부분이 가장 큰 장점이라 열심히 해야겠습니다. 이제 기본을 단단히 하기 위해 다시 공부 기록용 포스팅을 이어나가도록 하겠습니다. 이전 트랜스파일러와 바벨에 대해서 포스팅했는데요. 오늘은 모듈 번들러인 웹팩에 대해 다시 공부해봤습니다. 모듈 번들러 리액..

2022.06.05