· Gin 을 사용하면서 손쉽게 config 변경도 가능하고 CRA 를 사용할 수 있는 boilerplate가 어디 없나? 그래서 만들어봤습니다.
TL;DR
- gin + react boilerplate 이며 parkgang/react-with-gin-boilerplate 에서 살펴보실 수 있습니다.
- prod 환경도 json 가져와서 사용하는데 이는 보안에 위험할 수 있으니 기호에 맞게 수정해서 사용해주세요.
예를 들어 환경변수로 바꾸기
왜 만든건가요?
그동안 golang으로 그렇다 할만한 제품이 없어서 개인 프로젝트로 제품을 하나 제작해보려고 했습니다.
여러 golang의 웹 프레임워크 중 이전부터 많이 찾아보기도 헀고 지켜보고 있던 gin 으로 정하고 개발을 하려고 딱 준비를 했더니 신기한 점을 발견할 수 있었습니다.
뭐 라이브러리나 프레임워크가 얼마나 제공해주느냐에 따라 다르겠지만 기본적으로 개발 환경에 맞는 config 값을 주입받을 수 있는 기능과 같이 기본적인 기능이 gin 에 있을 줄 알았지만 없었습니다.
물론 gin 자체가 마이크로 웹 프레임워크 이므로 웹 프레임워크게 딱 필요한 기능있는 것이 맞습니다.
하지만 결국에 제품 개발을 하면서 환경분리 라던지~ 문서화 도구라던지~ 웹 프레임워크에 점점 살이 붙어져 나갈 텐데 이걸 일일이 프로젝트 마다 셋팅하는 것은 비효율적이라고 생각했습니다.
더구나 필자는 최근에 Server Side는 ASP.NET Core Client Side는 CRA 을 주로 개발해 왔었고 이외도 Server Side는 express.js, nest.js Client Side는 next.js 으로도 간단하게나 개발 경험이 있었는데 ASP.NET Core 같은 것만을 봐도 없는 기능이 무엇인 가 싶을정도로 많은 것을 지원합니다.
특히
config부분을 기본적으로 제공하는 기능이 마음에 들었습니다.
너무 익숙함에 속아서 그런지
gin에 살짝 당황했었던... 🥲
그래서 이참에 높은 이해도를 가지고 프로젝트를 시작하고 싶어 gin 에다가 cra 환경의 react를 사용하는 boilerplate를 만들기로 결심했고 미숙하지만 만들어진 결과물을 공유하려고 합니다.
어떤 것을 중점으로 만들 것인가?
당연히 기본은 gin server에서 react app 개발이 잘 이뤄지는 것이지만 그래도 저는 프로젝트 스트럭처에 관심많고 명확하고 깔끔 하이어라키를 디자인하고 싶어서 당연한 기본적인 목표 이외 아래의 목표를 추가로 설정하였습니다.
엄격한 타입 정의
ts의 유틸리티 타입을 적극 사용해서 우아한 타입을 선언
모호한 문법말고 명확하고 일관성 있게
특히 js/ts에서 이런 고민이 많이 발생하는데 예를 들어 어떤 경우에 익명함수를 사용할지 화살표 함수를 사용할 지, 모듈에서 default 으로 export 되는 친구는 변수명 바로 옆에 export default 으로 선언해줄지 해당 파일의 가장 마지막 줄에 선언할 지, 컴포넌트마다 디렉터리를 만들어서 index.ts 으로 export 해주는 전략을 사용할지 등 꽤나 고민되는 요소가 많이 있습니다.
필자는 이런 부분의 규칙을 만드는 것에 매우 관심이 많음으로 이 부분을 감안하여 일관성있는 boilerplate를 만들고 싶었습니다.
Server Side API 문서화 및 Http Status Code 명확하게 디자인
요청 성공하면 대충 200 으로 response 하는 것이 아닌 각각의 요청 처리에 맞는 Http Status Code 적절히 사용하고 싶었습니다.
recoil, react-query를 이용하여 react 명확하게 상태관리하기
recoil 과 react-query 모두 아주 대중적으로 사용되는 라이브러리 아닙니다.
물론
redux,context api친구와 비교한다면 이며 기준은 상대적입니다.
필자는 해당 라이브러리를 너무 좋아한다 그래서 이번 boilerplate에 예제 코드를 넣어서 혹시라도 다른 분들께 insight를 전달할 수 있지 아늘까라는 기대로 넣으려고 했습니다.
예외처리
제품 레벨으로써는 너무나도 당연한 것이지만 boilerplate으로 써 앱이 돌아갈 수 있는 환경까지 이면 되는데 여기에 예외처리까지 잘된 코드를 넣고 싶었습니다.
문서화는 덤 ✌️
Microsoft Teams UI Component
react에 많은 component framework가 있지만 그 중에서도 아주 외소한 @fluentui/react-northstar 를 사용해서 Teams 룩앤필이 된 예제코드를 넣고 싶었습니다.
직장내에서 매신저 앱으로 slack 혹은 teams 혹은 회사마다 다른 사내매신저를 사용하실 텐데 teams를 사용하시는 곳이라면 해당 boilerplate를 보고 오 teams app이다 라는 반가움을 전달하고 싶었습니다.
디버깅 환경
프로젝트는 쉽게 실행되어 디버깅에 불편함이 없어야 개발하면서 계속 즐거움이 유지된다고 생각합니다. 이를 꼭 만족시키기 위해 좋은 디버깅 설정 rnd 했습니다.
제작 완료 회고 및 마무리
이렇게 위와 같은 목표로 boilerplate가 완성되었습니다.
parkgang/react-with-gin-boilerplate 에서 만나보실 수 있으며 기존 예제 코드가 마음에 안드는 경우
예를 들어 mysql을 사용하지 않는 다거나 그냥 바닐라 cra을 원하는 경우
기호에 맞게 수정해서 사용하시면 됩니다.
이외 개발하면서 생각보다 많은 지식을 필요로 하는 부분은 SPA 이였습니다. 번들링된 정적파일 서빙 부터 CSR Router까지 Front End의 기본을 잘 이해하고 접근해야하는 부분이였는데 상당히 재미있었습니다.
끝으로 부족한 실력으로 boilerplate를 만들어 보았는데 사용하시는 분이 계실지 모르겠네요. 혹시라도 사용하시게 된다면 티를 내주시면 감사하겠습니다! 그러면 많은 동기부여가 될꺼 같아요! 읽어주셔서 감사합니다.