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

[React] 리액트 webpack & babel 설정하기

React - webpack & babel 기존 CRA(Create-React-App) 프로젝트 생성 방식이 아닌, 수동으로 리액트 환경을 설정하는 방법으로 웹팩과 바벨 설정 방법을 알아보자. 1. 프로젝트 설정 및 리액트 설치 init-y npm i react react-dom - 웹팩(Webpack) 웹 어플리케이션의 규모가 커지면서 프로젝트마다 엄청난 자원의 파일들이 하나로 모여 구성된다. 이때, 파일들의 관계는 복잡하고 무겁기 때문에 브라우저가 이해하고 로드하는데 시간이 소요된다. 이 문제를 해결하기 위해 웹팩(Webpack)이라는 모듈 번들러를 사용해 파일들의 의존성 관계를 정리 및 최적화, jsx파일을 합쳐 하나의 자바스크립트 파일로 만들어준다. 번들러 : 여러 개의 파일을 모듈화 해서 하나의..

2021.06.15