react + react-router tutorial

기존에 사용하던 Angular 2 RC 버전을 버리고 react를 도입하기로 결심했다. (RC 버전ㅠㅠ..)

 

일단 create-react-app을 통해 손쉽게 세팅 후

router 기능을 추가하기 위해 검색해보니 차근차근 진행할 수 있도록 설명해둔 블로그가 있었다.

 

해당 블로그를 따라가며 `왜 나는 이렇게 안되지?` 했던, `왜 에러나지?`했던 일들을 기록 하기위해 글을 남긴다.

 

• SyntaxError: Support for the experimental syntax 'jsx' isn't currently enabled 에러

 Intellij 이용중인데 import 하기 위해 커맨드를 입력하니 from "react-router-dom/modules/BrowserRouter"가 입력되었고 그리고 SyntaxError가 발생했다 

 해당 에러를 검색해보니 babelrc를 넣어봐라 뭐해라 각종 해설들이 있었는데 {BrowserRouter} from "react-router-dom"으로 입력하니 에러가 발생하지 않았다. 블로그에 뻔히 적혀있었는데 ㅠㅠ..

{ BrowserRouter } 방식은 추가 하고 나니 목록에 노출되었다는..

./node_modules/react-router-dom/modules/BrowserRouter.js
SyntaxError: D:\work\spc_tmon_openmarket_renewal\om-app\node_modules\react-router-dom\modules\BrowserRouter.js: Support for the experimental syntax 'jsx' isn't currently enabled (14:12):

  12 |
  13 |   render() {
> 14 |     return <Router history={this.history} children={this.props.children} />;
     |            ^
  15 |   }
  16 | }
  17 |

 

• 절대경로 설정

블로그에 보면 절대경로를 script에 NODE_PATH=src를 통해 설정하고

그러면 import시에 src가 기준이 되고 디버깅도 성공하지만 intellij 내에서 노란줄이 가면서 상대경로를 안내한다

NODE_PATH 문제인지 알수가 없어서 jsconfig.json 도 추가해보았지만 아무래도 intellij 문제인 듯 싶어 따로 검색해보니 따로 설정하는 방법이 있었다.

1. right-click the directory ( for example src )
2. select "Mark Directory As" -> "Resource Root"

How do you specify NODE_PATH for local module autocompletion?

...이렇게 설정했더니 maven 빌드할 때 classpath 꼬여서 망해서 원복함