RealWorld React SPA 개발

RealWorld Example Applications

RealWorld 란?

RealWorld는 React, Angular, Node, Django  등으로 개발되는 풀스택 블로그 데모 프로젝트입니다. 유행이 빠르게 바뀌는 최신 기술들을 도입해서 빠르게 마스터하기 위한 연습용 앱인데요. Counter나 Todo App과 다르게 적당한 규모와 복잡도를 갖추고 있어서 현실적인 개발에 가까운 프로젝트라 할 수 있습니다. 

프론트엔드는 React, Angular, Vue등의 구현 예제가 인기이며, GraphQL를 이용한 예제도 있습니다. 백엔드는 Node/Express, Laravel, Django 등이 인기입니다. 전세계 사람들이 최신 기술들로 계속 참여하고 있습니다. 따라서 최신 기술을 도입하고자 할 때 이리저리 실험해보는 가장 빠른 연습앱이 될 것 입니다.

RealWorld 소개 바로가기


React SPA 개발

저는 원래 Vue.js에 관심이 많았지만 이런저런 이유로 React에 투자하고 있는데요. 이번에 RealWorld RESTful API 를 이용해서 진행한 React SPA 제작 토이 프로젝트를 한 달간 틈틈이 진행하여 마무리 했습니다. 

완성된 사이트는 https://dohoons.github.io/world 으로 확인할 수 있습니다.

완성된 사이트 모습
반응형 디자인

RealWorld는 API를 전세계 사람들이 사용하고 있기 때문에 같은 DB로 여러개의 사이트를 만드는 셈입니다. API를 이용해서 회원기능, 포스트 작성, 프로필페이지, 팔로우, 좋아요, 태그 등의 기능을 만들었습니다. 이것은 실제 이용자가 있는 활발한 사이트를 직접 만드는 것이라 더 재미가 있습니다.

기본적으로 React와 Redux(+redux-thunk) 를 사용하였고, 불변성은 immer를 도입해서 간결하게 처리했습니다. 디자인은 모바일에서도 볼수 있게 반응형으로 작업되었습니다. SCSS로 기본요소 스타일을 잡았고, 컴포넌트와 페이지 스타일은 styled components로 작업했습니다. 별도의 UI 프레임워크 없이 CSS 코드로 직접 디자인했는데 PALX의 색상 팔레트와 Font Awesome의 아이콘이 시간을 줄이고 디자인 일관성을 높이는데 많은 도움이 되었습니다. 그 외에 코드스플리팅, 로딩플레이스홀더, 다국어(i18next) 등의 기술도 적용되었습니다.

이렇게 작업된 사이트를 Github Pages에 호스팅하는데 경로 문제로 초기에 애를 먹었습니다. 저장소 이름이 world 인데 라우터는 루트를 기준으로 하기 때문에 basename을 설정하는 등의 처리를 했습니다. 그리고 Pages는 새로고침 했을 때의 서버측에서 라우터 처리를 할 수 없는 문제가 있습니다. 이는 빌드할 때 index.html를 404.html로 카피해서 배포하는 편법으로 해결했습니다.

완성된 사이트 https://dohoons.github.io/world 에서 직접 로그인해서 글을 등록할 수 있습니다. 그런데 저의 사이트가 아니라 불특정 다수가 읽을 수 있는 RealWorld DB이고 회원탈퇴 기능이 없는 점은 참고해주세요.. 저의 프로필 페이지는 https://dohoons.github.io/world/@dohoons 입니다!