리액트로 만든 반응형 웹사이트

개요

• 이름: 62che-index-react
• 기간: 2018
• 기술: React, Font Awesome, Google Font, styled-components, react-window-size, react-component-queries

홈페이지의 모습. 가로폭이 좁아지면 모바일 레이아웃으로 실시간으로 바뀐다.

총평

리액트를 실습해볼 겸, 기존 jQuery-Mobile 기반의 모바일 홈페이지만 제공하던 웹사이트를 개편해보기로 했다.

jQuery 시절과 다르게, 컴포넌트 기반이어서 관심의 분리(Separate of Concern)가 가능해서 개발이 매우 수월했다. 특히 팀 단위로 작업할 때 더욱 진가를 발휘할 것으로 생각되었다.

가이드대로 화면 컴포넌트 구조를 잡으며 정보 전달 관계를 표현해봤다. 컴포넌트 깊이가 그리 깊지 않으나 화살표(정보 전달)가 생각보다 많았다. 아마 조금 더 구조가 커졌다면 Redux 도입이 필요했을 것이다.

현 사이트와 유사한 구조와 기능이다.

실시간으로 너비를 체크해서 960px 이하이면 모바일 레이아웃으로 변하도록 구현해보았다. 그래서 react-window-size, react-component-queries 같은 라이브러리를 사용하게 되었다.

테마나 채팅 기능은 완성하지 못했다.

HOC(Higher Order Component)도 경험해 볼 수 있었고, 매우 유익한 실습이 되었다. 그러나 스샷에서 보듯이 색깔이나 테마등을 유려하게 꾸미는 것은 매우 큰 창작의 고통이 되었다. Bootstrap (opens new window) 같은 UI 프레임워크를 쓰지 않았기 때문이다.

그런데 생각해보니 React 기반에 UI 테마를 설정하고 반응형 웹사이트 기능까지 구현하면 바로 GatsbyJS (opens new window) 같은 SSG(Static Site Generator)가 되는 것이다.

처음엔 SSG가 무엇인지 개념만 알고 있었는데 이번 기회로 SSG에 관심이 생겼고, 결국 본 사이트는 GatsbyJS가 아닌 Vue 기반의 VuePress로 사이트를 이전하게 되었다. Vue를 배워보고 싶었기 때문이다.

결국 개인 프로젝트를 통해 React, Vue, Angular 최신 웹프론트 3대장을 모두 경험해볼 수 있었다.