Gcjjyy.com 커뮤니티 사이트

개발 프레임웍은 Next.js 를 사용했다. Next.js는 Vercel(구 now) 사에서 개발한.. React Framework을 통해서 SSR(Server-Side Rendering)을 할 수 있게 해주는 프레임웍이다. React + SSR = Next.js 이고, 만약 프론트엔드 프레임웍을 Vue.js를 쓰고싶다면.. Vue.js + SSR = Nuxt.js 이다.

Nuxt.js는 Next.js의 Vue 버전이라고 생각하면 쉬운데, 아무래도 오리지날이 Next.js이다보니 Next.js가 좀 더 끌리긴 한다. 물론 Nuxt.js도 훌륭한 SSR 프레임웍이다. 나는 Nuxt.js와 Next.js를 둘 다 써봤는데, 개인적으로 프론트엔드 개발이 Vue.js 보다는 React가 취향에 맞다 보니 최종적으로는 Next.js를 사용하고 있다.

Database는 GCP의 Firebase를 사용하였다. Firebase를 쓰면 굳이 Database를 위해 서버를 따로 돌릴 필요가 없다. 특히 Vercel의 경우에도 SSR만 해주는거지 Active하게 항상 Running하는 Server가 아니다. Firebase의 Database는 Realtime Database와 Firestore가 있는데, 내가 쓰는 양은 둘 다 무료라서 Firestore를 그냥 썼다.

만약 Enterprise급으로 사이트를 구축하고 싶다면 비용계산을 해서 Realtime Database와 Firestore 중에 고민해야 할 것이다.

UI는 Chakra UI를 써서 css를 거의 직접 다 개발하다 싶이 하였다. Chakra UI를 쓴 이유는 Next.js에서 Light / Dark Theme 기능이 SSR상에서도 제대로 동작하게끔 지원을 해주기 때문이다. SSR은 최초의 페이지를 서버에서 렌더링해서 보내주기 때문에 클라이언트의 OS 테마에 맞게 색을 조절해서 보내주려면 몇 가지 방법을 사용해야 하는데, Charka UI는 그것을 UI Framework 자체에서 지원해준다.

거기에 글 작성시 파일추가와 파일 정렬 모듈을 만드는데 신경을 좀 썼고.. 댓글/대댓글 기능과 카테고리 기능, Google Account 로그인 등등 기본적인 커뮤니티의 기능을 구현하였다.

바로가기: https://gcjjyy.com/