react.js 에서 Jquery 사용 하는 방법(unused import $ from jquery )

nodejs사용 babel, webpack 사용하는 사람들에게 적용 가능 한 방법입니다.

다른건 모르겠네요 어차피 여긴 야매 가이드니까 신경 ㄴㄴ

이제 튜토리얼 하고 있는데 세상에 바닐라JS는 나에겐 너무 높은 벽이었고

3년전 처음 배울때나 바닐라 JS 사용했지 실무투입하고 난 이후부턴

제이쿼리만 주구장창 썻는데 getelementById 라니 이건 나에게 너무나 가혹한것 같아

제이쿼리를 어떻게 쓸수 있을까 하고 또 구글링을 시작 했습니다.

역시 인터넷엔 없는게 없었고

이렇게 js에 추가해 주면 사용 할수 있다고 스택오버플로우 형들이 알려주길래

그대로 적용 시켰더니

왜 죽은 동태눈알 색깔을 하고 있는걸까..

unused import $ from jquery 라는 메세지와

메세지창을 확장시키면

checks that javascript or typescript import binding ... 어쩌구 저쩌구

라고 나오면 실행되지 않는다.

아!

npm에서 제이쿼리를 다운받지 않아서 그런건가? 

그렇지 제이쿼리가 없으면 못쓰는거겟지 라는 생각으로

npm install jquery --save

명령어를 입력후 제이쿼리를 설치 했으나

역시 죽은동태눈깔은 돌아오지 않았다.

조금더 구글링을 해보니

이렇게 하면 된다고 한다

오오 신기하다 된다된다

이제 리액트에서 제이쿼리를 사용할수 있겟구나 하고

테스트해보니 

제이쿼리 정상작동 하는 것을 확인 할 수 있었다.

module not found error cannot resolve 'babel' in 에러와 the node api for babel has been moved to babel-core  해결 방법

드디어 리액트에 입문!

아직 뭐가 뭔지도 잘 모르고

바벨이라는 녀석이 ES6문법으로 바꿔주고 웹팩이라는 녀석이 번들js로 

관리해준다는 대략적인 정보만 알고 난 상태에서

https://velopert.com/814

이분의 강좌를 보면서 공부를 하기로 시작 했는데 시작과 동시에 에러가 날 반겨준다.

1. the node api for babel has been moved to babel-core  해결 방법

<으아악 불길한 붉은 텍스트라니>

the node api for babel has been moved to babel-core

이 에러는 뭐 대충 설치 할때 경로 문제나 디펜던시 설정 문제 인듯 하다

pakage.json 파일의 디펜던시를 아래와 같이 바꿔주면 해결이 된다.

아마 위의 에러가 나는 것은 딘펜던시와 덴펜던시스 둘다 바벨이 들어가 있는 경우이며

글로벌로 babel과 webpack를 설치 한 후

또 종속성으로 --save 명령어로 설치하는 경우에 나타나는 에러 인듯 하다.

디펜던시 목록을 위와같이 수정해주면 사라지며

그래도 계속 나타날 경우엔 어차피 튜토리얼 단계니까 

폴더 지우고 다시 순서대로 받아주면 해결 된다.

2.module not found error cannot resolve 'babel' in 에러 해결 방법

이 에러는 webpack.config.js 파일을 수정해 주어야 한다.

이 파일은 webpack의 설정파일인데

ECMAScript6를 컴파일 해주고 개발서버를 열어주는 webpack의 설정 파일인데

모듈 로더 부분이

이런식으로 loader:'babel'

로 되어있는 경우 발생한다

바벨을 참조하지 못해서 생기는 오류인듯 한데

loader:'babel' -> loader:'babel-loader' 이렇게 바꿔주면 간단히 해결이 된다.

이제 npm start 명령어를 실행하면 complied successfully 라는 반가운 문구를 볼 수가 있게 된다.