Node.js React 입문하면서 도움된 정보들

Spring Jsp Javascript Jquery Extjs Angularjs 각종 RDBMS, Google datastore

뭐 대충 이런 것들을 써본 평범한 구시대 웹개발자 입장에서 Node.js React를 접하면서 도움 된 정보들입니다.

개인 프로젝트의 리뉴얼을 구상중인데 검색엔진을 위한 서버사이드 렌더링이 절실했고 운영비 절감을 위해 SPA도 포기할 수 없는 상황(isomorphic)이라 Angular Universal과 React 중에 고민하다가 한글레퍼런스가 Node.js React 쪽이 그나마 풍성?(하...) 했기에 React를 선택하였습니다. 이런 맥락으로 Spring+Nashorn은 엄두도 못냈네요.

게다가 기존 Spring+@ 환경에서 웹팩은 불친절한 에드온같은 느낌(순대에 순대만?)이었는데 Node.js React는 기본내장형 느낌(순대 내장포함...) 모든 스타터킷에 웹팩설정은 함께달려있더라구요.

State 와 Props

- Angularjs Expressions 를 다뤄봐서 그런지 크게 어색하진 않았네요. Velopert 님 강의가 초보자인 저에게 크게 도움이 됬습니다.

Router

- 라우터도 Angularjs 때 써봤죠.

dependencies? devDependencies?

- 규정정도로 인식이 되는데(바꾸면 난리나나?) 아에 뭔지 모르던 상황은 타개했네요.

React with Bootstrap

- 디자인에 당장에 시간을 쏟기가 뭐해서... (색상이라던지 이런거 선택장애가...)

코드 스플리팅

서버 사이드 렌더링(SSR)

- 가장 필요했던 정보!

중간에 Route 기반이라고 하셨는데 만들다보니 뭔 말인지 알겠더라구요.

(어리석은 자는 경험에서 배운다고...)

React-loadable (Github)

- 중간에 Route-based splitting vs. Component-based splitting 두 방식에 대해 그림묘사가 있는데, 두 그림에 횡으로 선을 그으면 Route-based 방식에서 당장 제가 지금 겪고 있는 문제입니다.

Google App Engine with Node.js

- 구글앱엔진 공식 레퍼런스만 보다보면 울화통 터지는데(그놈의 영어가...) 너무감사한 자료죠.

React-vritualized (Github) 데모페이지

- 리엑트 그리드가 몇 가지가 있는데 그 중에서 가장 레퍼런스가 많고 커스터마이징이 자유로운 오픈소스입니다. 시간이 날 때 자세하게 사용법을 다뤄보면 좋을 것 같네요.

Koa SSLify (Github)

- https only를 위한 오픈소스 패키지인데요. 자바 서블릿에서는 web.xml에 설정만 해줬으면 되었는데

node에서는 어플리케이션 단에서 코드를 짜야하네요. 더 좋은 방법이 있는지는 모르겠습니다.

local 테스트 시에는 webpack dev server와 호환문제가 있어서 배포시에만 적용되도록 해서 사용중입니다.

이것도 flexible한 설정이 있는지는 모르겠습니다.

React-tooltip (Github) 데모페이지

- 사용법도 간편하고 깔끔하고 강력한 오픈소스 리액트 툴팁입니다.

너무 좋은 오픈소스들이 많은데 제가 줄 수 있는건 ★STAR 밖에 없군요ㅠㅠ

Google analytics api with Node.js (영어)

- 노드에서 구글애널리틱스 API를 호출하는 방법입니다.

React-ga (Github)

- 리액트 사이트에 쉽게 구글애널리틱스를 설정할 수 있는 오픈소스 컴포넌트입니다.

와~ 없는게 없어.

React-adsense (Github)

- 리액트 사이트에 쉽게 구글에드센스를 설정할 수 있는 오픈소스 컴포넌트입니다.

와~ 없는게 없어2.