[React.js] React refresh (hot loader) 설치(맥os 사용자 주목)

코드를 고치고 실행할때마다 명령어를 사용하는건 참 귀찮은 일이다.

그래서 리액트에선 하나의 플러그인을 설치할 수 있는데, 바로 react-refresh 이다. 

이 플러그인은 코드를 고치고 새로고침이나 새로 빌드를 해주지 않더라도 변경된 사항이 자동으로 수정되는 아주 놀라운 기능을 가지고 있다. (이래서 리액트 리액트 하는구만...)

 

깨알 tips 👀👀

기존엔 react-hot-loader 라고 불리고 설치법도 달랐지만, webpack-cli가 4.xx 로 올라가면서 hot loader 대신 refresh를 사용하게 되었다.

 

이 편리한 플러그인을 깔아보자!

(webpack의 설정은 [21.04.12]에 작성한 티스토리 글을 기준으로 한다)

 

1. react-refresh, react-refresh-webpack-plugin 설치

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

우선 `react-refresh`와 `react-refresh-webpack-plugin` 두가지를 개발모드로 설치해준다.

 

2. dev-server 설치

npm i -D webpack-dev-server

server도 필요하기때문에 dev-server도 설치해준다.

 

++ 여기서 맥os를 쓰시는 분들  No Xcode or CLT version detected 에러가 뜨신분들 주목! 

(더보기를 눌러주세요)

 

 

 

난 개인 공부를 할땐 맥북을 사용한다. 그런데 이번에 dev-server를 설치하면서 한가지 에러를 직면했는데 바로 이것이다. 

webpack-dev-server를 설치하다 생긴 에러

사실 여기서 에러난줄 모르고 계속 refresh 설치를 진행하다가 자꾸만 'ERR_INVALID_ARG_TYPE' 에러가 뜨길래

다시 처음부터 작업하다가 이곳에서 최초 에러가 발생한걸 발견했다. ;;

 

이 에러가 왜 생겼는지는 모르겠지만 맥os에 있는 Xcode 에러인 모양이다.

해결 방법은 Xcode를 삭제하고 재설치해주어야한다.

 

1. Xcode-select 경로 찾기

xcode-select --print-path

기본설정이 /Library/Developer/CommandLineTools 라 대부분 그러하겠지만 확인을 해주자.

 

2. Xcode-select 제거

sudo rm -r -f /Library/Developer/CommandLineTools

만약 경로가 기본설정으로된 경로가 아니라면 자신의 맥북이 Xcode를 가지고 있는 경로를 입력하면 된다.

 

3. Xcode-select 재설치

xcode-select --install

자, 이제 삭제후 재설치가 끝이 났다.

설치를 할때 시간이 2시간,1시간으로 뜬다고 당황금지! 금방 몇분대로 떨어진다.

 

이렇게 Xcode 제거 및 재설치가 완료되고 다시 dev-server를 설치해주면

성공적인 설치!

아까처럼 에러가 뜨지 않고 잘 설치가된다 👏👏👏👏

휴~~~ 이제 다음 단계로 넘어가보자!!!

 

에러해결 출처 : velog.io/@miiunii/No-Xcode-or-CLT-version-detected-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95

 

3. package.json 수정

이제 모든걸 설치해주었으니 package.json을 수정해주자

 

 

위처럼 scripts를 수정해준다.

webpack-cli 3.x버전에선 webpack-dev-server --hot 이었다. 

 

4. webpack.config.js 수정

4-1 )이제 앞서 설치한 refresh 플러그인을 불러와주자

변수명은 뭘로해도 상관은 없다. 플러그인을 불러왔다면 plugins:[] 에 입력해주자.

plugins: [
	RefreshWebpackPlugin(),
],

위와 같이 plugins에 플러그인을 불러올때 썼던 변수를 입력해 불러와준다. 이제 reload 될때마다 해당 플러그인을 불러올거다.

 

4-2) 그리고 module 안 rules의 plugin에도 추가해줄게 있다. 

babel-loader option의 plugin에 추가해주면, babel-loader가 react-refresh에도 최신문법을 옛날 문법으로 변경해주는 작업을 해준다.

 

4-3) 아까 설치한 devServer도 설정해주어야 한다. 

일단 output과 같은 publicPath를 입력해주고 `hot: true` 옵션을 넣어준다. 

devserver의 역할은 webpack.config.js에 적어준대로 빌드 결과물을 돌리고 publicPath에서 설정해준 경로로 결과물을 저장한다.

그리고 변경점이 생기면 저장했던 결과물을 수정해주는 역할을 한다!

 

자 이제 모든 설정과 설치과정이 끝이 났다.

이제 `npm run dev` 를 입력하면 로컬호스트 주소가 뜨면서 빌드가 성공할 것이다. :)

그리고 내용을 변경하면 자동으로 변경이되는 신기한 현상을 볼 수 있다!

 

 

---

refresh 설치 및 빌드 후기...
webpack 이라는 큰 산을 넘었기에 껌이라고 생각하고 제로초님 강의를 들으며 설치를 해보았다...
그런데 생각지도 못한 xcode 오류탓에 땀이 뻘뻘흘렀다.... 개발자는 영어를 잘해야한다는 말이 뼈져리게 느껴졌다...;ㅁ;