Facts
프로젝트
css
- 마이페이지 유저 헤더 장식
- 링크 수정중
Feelings
- 예전에도 느끼긴 했지만 프로젝트가 점점 꼬인다는 느낌이 든다.
Findings
서버에 요청 안 한다고 전제하에 기본적으로 링크를 클릭할 때, 일부 자바스크립트는 페이지 새로 고침을 일으키지 않고 주소 표시줄의 URL을 조작하는 실행으로, 리액트 라우터가 클라이언트 측에서 페이지 전환을 수행하게 된다. 그러나 주소 표시줄에 URL을 복사하여 칠때 웹사이트를 아직 로드하지 않았다고 생각해야 한다. 첫 페이지라고 생각하자. 리액트 라우터가 실행되고 있지 않고 있다. 그래서 브라우저는 http://local8080.com/about에 서버 요청을 할 것이다. 그리고 여기서부터 문제가 생긴다. 지금까지는 서버의 웹루트에 정적 HTML을 배치하는 것만으로 해결할 수 있었지만 서버에 요청했을 때 다른 모든 URL에 대해 404개의 오류를 발생시킬 것이다. 리액트 라우터가 라우팅을 해주기 때문에 동일한 URL은 클라이언트 측에서 잘 작동하지만, 서버가 이를 이해시키지 않는 한 서버 측에서 실패한다. 고로 실행시키려면 서버랑 클라이언트에서 라우트를 설정을 해줘야 한다.
이것을 해결해주는 방법은 3가지가 있다.
- Hash History
hash history를 쓰면 url 들이 # 가 들어간 http://local8080.com/#/about 등이 된다. 서버로 # 이후의 값들이 안 보내지고 그전인 http://local8080.com/ 만 보내지고 그다음 about은 react router이 나머지 조작을 한다. - Catch-all
/* 값들을 서버가 다 잡아서 index.html에 보낸다. 그 외에는 위와 같은 기능을 한다. - Hybrid
Catch-all를 쓰지만 특정 경로에 대한 특정 스크립트 추가를 하는 것이다. 간단한 PHP 스크립트를 만들어 콘텐츠가 포함된 사이트의 가장 중요한 페이지를 반환할 수 있으므로 Googlebot은 최소한 페이지의 내용을 볼 수 있다. - Isomorphic
양쪽 끝에서 동일한 JS 코드를 실행할 수 있도록 Node JS를 서버로 사용하면 모든 경로를 하나의 react-router 구성으로 정의하고 있으며, rendering 코드를 복제할 필요가 없다. 서버는 클라이언트가 페이지 전환할 때와 동일한 마크업을 보낸다
그 서버는 만약 페이지 전환이 클라이언트에서 일어났다면 우리가 끝냈을 때와 똑같은 마크를 보낸다. 이 해결책은 SEO의 면에서는 최적이다.
Future Action
- 중간중간 검사 맡는 것도 괜찮을 것 같다.