리액트 개발환경 구축하기

해당 카테고리는 단순히 글쓴이가 공부 후 정리해놓기 위한 목적으로 글쓴이가 추후 이해하기 쉽게 자기 멋대로 정리한 글입니다 :)

 

참고1 : sujinlee.me/webpack-react-tutorial/

참고2 : 3트째 참고한 블로그

 

저번에 혼자 맨땅에 헤딩으로 리액트를 하면서 DB붙이고 하려니

구조를 어떻게 해야하는지 혼동이 오면서 접었었는데...

해당 참고글을 보고 2트해본다!

1트는 버전 문제 때문에 잘 안됐는데 오늘은 다시 해결해보는걸로 😥

 

준비사항에 있는 node와 yarn을 설치해주고

React Route는 또 몰라서 공부해왔다...

살펴보고 역시 이렇게 있었어 라고 생각이 들었다.

나 역시도 이 친구를 모를때 다른 주소에 따라 다른 뷰를 보여주고싶은데

어떻게 하는지 몰라서 조건문으로 1번을 눌렀을땐 1번 컴포넌트를 보여주는 식으로 

코드를 해놨었는데! 내가 몰랐을뿐 모두 준비되어있구나... :_)

 

참고글을 보면서 쭉쭉 따라하다보면 1장에서 바로 막힌다^^

node 서버를 실행시키면 webpack 모듈끼리 호환이 안되는지 오류가 난다...

package.json의 script start옵션을 바꿔주면 되긴하는데

초보인 내가 맨땅에 헤딩으로 하기엔 힘들어서 다시 처음부터

 

---

 

다시 yarn int으로 패키지를 만들어주고 babel을 설치 해주었다.

babel은 참고 참고 블로그에서도 설명 되어 있듯이 개발할때만 사용하기 때문에 -D옵션을 주고 설치했다 :)

yarn init -y

yarn add @babel/core @babel/preset-env @babel/preset-react -D

그리고 나선 babel의 설정파일 .babelrc에 plugin들의 모임! presets을 설정해주었다.

보통 이에 대한 설명이 없었는데 이곳에서 알아봤다.

@babel/preset-env

@babel/preset-react

 

참고1도 그렇고 참고2도 그렇고 서버 실행시 자꾸 웹팩에서 오류가 나던데...😥

package.json에 script부분을 webpack공식 문서에 나와있는걸로 수정해주니 실행 되었다..

뭔차이냐구... 그냥 명령어만 달라진거냐구....

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "watch": "webpack --watch",
  "start": "webpack serve --open",
  "build": "webpack"
},

드디어 번들[해쉬]로 된것을 볼 수 있다요!

현재 바벨, 웹팩을 이용해서 리액트 연동해놨구 

내일은 db붙여볼 예정이다 :)