도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

[React + GraphQL] Stack Stack 사이드 프로젝트를 통해 배운 것

회사의 신규 기능과 서비스 개편을 위해, 서버와 클라이언트를 GraphQL 기반으로 변경하고, 클라이언트 UI 기반을 머테리얼 디자인으로 변경하는 것이 큰 목표 였다. 큰 뼈대를 바꾸는 일이기 때문에 바로 서비스에 적용하는 것은 무리가 있을 수 있다고 생각했고, 같은 기술이라도 다양한 라이브러리가 존재하기 때문에 여러가지 테스트와 실험을 사이드 프로젝트로 한 후에 실제 서비스에 조금씩 적용 해나가는게 좋을 것이라고 생각 했다.

Stack Stack

그래서 시작한 사이드 프로젝트가 Stack Stack이다. 사실 이 사이트는 stackshare.io 라는 서비스에서 일부분을 클론 한 사이트이다. Stack Share는 테크 기업들의 스택을 올려놓는 곳인데, 글로벌한 기업부터 스타트업 까지 어떤 스택으로 서비스를 구성하고 있는지를 유저들과 공유 하는 곳이다. 어떤 회사에서 어떤 툴과 인프라를 통해 서비스를 구성하고 있는지 알 수 있어서, 종종 보면서 도움이 많이 됐다. 한국의 기업과 스타트업은 어떤 스택을 사용하고 있는지 궁금했는데, Stack Share에는 한국 기업은 찾기가 어려워서 한번 만들어 보면 좋을 것 같다고 생각 했다.

그런데 이미 로켓펀치에서 이미 거의 비슷하게 이런걸 하고 있다는 걸 다 만들고나서 알게 됐다... 그래도 조금은 다른 부분이 있으니까 위안을 삼자. 그리고 로켓펀치 덕분에 궁금한 서비스의 스택을 많이 볼 수 있어서 오히려 좋다고 할 수 있다. 또, 힘들게 자료 수집을 안해도(?) 되니 다행이라고 해야 할까..?

최종적으로 선택한 라이브러리는 GraphQL 클라이언트 라이브러리인 react-apollo, 머테리얼 디자인 스펙을 적용한 리액트 기반 라이브러리인 material-ui 1.0(material-ui의 경우 중간에 Material Components Web으로 변경되서 의미가 없어 졌지만, 굳이 바꾸지 않았다.)를 선택했다. 그래서 크게 신경쓰고 싶지 않은 부분은 포기하고, 원하는 것에 집중 하기로 했다.

결과적으로는 여러가지 validation과 에러 처리 등이 안되어 있고, 원하던 기능도 다들어간 상태는 아니지만, 오래 잡아두고 개발을 할 수 있는 상황이 아니기 때문에 먼저 올려놓기로 했다.

배운 것

react-apollo

처음 이 사이트를 만들 때, 리덕스를 react-apollo와 함께 썼는데, 중간에 리덕스를 걷어 냈다. 처음에는 react-apollo가 내부적으로 redux를 사용 하기 때문에 같이 사용하면 유용 할 것이라 생각 했다. 하지만, react-apollo를 사용 하게 되면 리덕스가 거의 필요한 상황이 없다. server에서 데이터 fetch, loading, error등을 react-apollo에서 다 핸들링 해주기 때문에 굳이 리덕스가 필요하지 않다. 리덕스를 사용한다면 ui 핸들링 할때나 사용 될 수 있는데, 이 사이트에서는 ui 핸들링 마져 할게 없기 때문에 리덕스를 제거 했다. 아래의 글에서도 react-apollo를 사용하면서 리덕스 코드를 많이 줄였다는데, 실제로 사용 해보니 충분히 이해가 되는 부분이다.


graph.cool

  • graph.cool에서 제공하는 유연한 스키마 디자인 덕분에 실제 GraphQL 서버를 구성 할 때 스키마 디자인 하는데 많은 참고가 되었다.
  • 스키마를 추가 하게되면 자동으로 생성되는 query, input type, filter, orderBy와 mutation이 있는데 유연한 api와 규칙적인 네이밍 컨벤션 덕분에 클라이언트에서 사용 할 때, 헷갈리지 않고 명확하게 사용 할 수 있었다. GraphQL 서버 디자인 할 때 많이 도움이 됐다.
  • Auth0서비스와 통합이 되어 있고, 예제 코드까지 제공 해서,  쉽게 인증을 붙일 수 있었다. 
  • 프로젝트를 클론 할 수 있는 기능이 있어서 dev 환경과 production 환경을 나눠서 작업 하는데 유용 했다.
  • 파일 서버 endpoint까지 제공해서 이미지 업로드 구현도 쉽게 했다.

Material UI 1.0-alpha

  • 아직 버전이 알파라서 api가 자주 바뀐다. (현재는 beta 버전이 나왔다)
  • 현재 회사 프로젝트에서는 material-ui 대신에 material-components-web(MDC)을 선택 했지만, MDC를 리액트로 변경하면서 material-ui의 컴포넌트 명과 구성을 많이 참고 할 수 있었다.
  • material-ui의 stable 버전은 0.1이기 때문에 새로 시작하는 프로젝트라면 0.1 버전을 사용할지 1.0 버전을 선택 할지 고려해야 한다. 이제 베타 버전이 나오고 있으니 왠만하면 1.0 버전을 사용 하는 것이 좋을 것 같다.

기타 유용하게 사용 한 도구와 서비스

Create React App - 기본적인 리액트 앱을 빌드 없이 구성해는 도구

Auth0 - 인증(소셜 로그인/회원가입/로그인) 서비스

Firebase - 다양한 기능이 있지만 Static 사이트 호스팅에 사용

Log Rocket - React, Vue, Angular, Redux 등 프론트엔드 프레임워크와 통합이 잘 되어 있는 로그 서비스

 

Color - primary, accent color를 여기서 선택 했다.

Webppalyzer -  Stack Share 사이트에서 스택을 추가 할 때, 처음에 url을 입력하면 사이트를 분석해서 사용하고 있는 툴을 리스팅 해주는데, 이와 비슷한 크롬 확장 프로그램이다.



Stack Stack 사이트 링크:


리뷰