리액트의 기본 개념을 모두 익혀도 실제 웹개발을 하기는 어렵습니다. 왜냐하면 웹개발을 하기 위해서 알아야 할 다른부분으 훨씬 더 많기 때문입니다. 컴포넌트 기반 SPA 웹사이트를 만들기 전에 먼저 고려해야 할 사항은 다음과 같습니다.
웹사이트를 만들기 위해서 제일 먼저 고려해야 할 사항은 CSS 프레임웍을 결정하는 것입니다. 가장 인기있는 CSS 프레임은 순서대로 다음과 같습니다.
- 1위: Material Design: https://material-ui.com/
- 2위: Ant Design: https://ant.design/
- Bootstrap: https://react-bootstrap.github.io/ or https://reactstrap.github.io/
이런 CSS 프레임웍이 공통적으로 지원해주는 역할은 다음과 같습니다.
- 브라우저 호환성 지원
- 다국어 사용 (i18n)
- 필수 UI 컴포넌트 – 모달창, Toast or Snackbar, Input Form, Form Validation
- 모바일 반응형 페이지 지원
- RTL (Right to Left)
여기서는 부트스트랩 프레임웍을 사용하겠습니다.
그 다음에 고려해야 할 사항은 라우팅입니다.
만일 사용자가 접속하는 프런트엔드 페이지라면 검색, SEO가 중요하므로 Next를 적용하는게 바람직하고 만일 회사 내부에서 사용하는 인트라넷이나 관리자 페이지라면 react-router-dom 을 사용하는게 바람직합니다.
- Next : SEO 지원, 쇼핑몰같은 프런트엔드 개발에 적합
- react-router-dom: 관리자사이트, 내부 인트라넷 개발에 적합
여기서는 reat-router-dom을 사용하겠습니다.
최종적으로 요약하자면 Bootstrap + react-router-dom 을 사용한 웹 페이지 개발입니다.
여기서는 heroes 라는 웹페이지를 만들며, 필요한 REST api는 백엔드에서 만들어져서 제공되고 있으며 아래에서 다운로드 받을수 있습니다.
+ Git: https://github.com/eastflag/react-hero
+ 데모 사이트 : https://scoreboard.eastflag.co.kr