[T3 stack] 프롤로그

최근 T3 stack이라는 키워드를 알게 되었다.
요약하면 front-end와 back-end를 구분하지 않고 처음부터 full-stack으로 설계할 수 있도록 하는 프로젝트이다. 아직 초기모델이라 당장 실무 도입은 아직 ?이지만, 개념과 방향에 공감되는 부분이 많아서 미리미리 경험해 두고자 틈틈이 실습을 쌓아본다.

 

 

 

 

배경의 배경

시작은 TODO-LIST를 크롬 익스텐션으로 만들어서 개인적으로도 쓰고 팀원들과 가벼운 일정을 공유(먼데이닷컴, 카카오웍스 등등) 하기 위함이었다. 

크롬익스텐션을 만드는 방법은 유튜브를 검색해보니 다양한 방법들이 많았다. 유튜브로 다른 개발자들이 하는 거 눈으로 익혔다. 대부분 다 공개하지 않고 공개하기도 애매하고 게다가 대부분 미완에서 그치는 경우가 많다. 역시 아무 생각 없이 따라 하기 쉬운 건 역시 구글 공식 예제이다. 

https://developer.chrome.com/docs/extensions/mv3/getstarted/

Chrome Extensions getting started guides - Chrome Developers

 

그리고 이제 TODO-LIST를 만들어야 하는데 괜찮은 레퍼런스?를 찾기 시작했다. 커스텀이라고하기에도 뭣하게 Ctrl C, V이지만 나름 조건이 까다롭다. React, Next.js, DB를 기본적으로 세팅하고 겸사겸사 최근 유행? 하는 Tailwand CSS도 적용하면서 경험할 수는 예제를 찾았다.

그 과정에서 Redux와 유사한 역할(상태관리) MobX를 알게 되었고

https://ko.mobx.js.org/README.html

MobX에 대하여 · MobX

그 과정에서 ToDoMVC 라는 키워드를 알게 되었다

https://todomvc.com/

TodoMVC

오! 이걸 왜 이제 알았지? 이런 들이 있었구나?! 하는 생각이 절로 났다. 완전 신세계였다! 

동일한 GUI를 다양한 언어로 구현할 수 있는 예제들을 서로 공유하면서 장단점을 파악할 수 있도록 하는 오픈소스 운동? 활동들이었다. 다만 아쉬운 점은 각 예제들이 상당히 오래된 코드와 예제였다. 일부 코드는 더 이상 지원하지 않는 내용도 있었다. 게다가 Next.js와 파이어베이스(DB 및 인증)와 관련된 코드는 적었다. 그리고 상대적으로 리액트보다 앵귤러가 많아서 학습이 아닌 실제 빌드에 있어서의 유용함은 다소 낮은 편이었다. 

그 과정에서 알게된 또 다른 오픈소스 프로젝트, "리얼월드. 하우" 

https://www.realworld.how/docs/intro

Introduction | RealWorld

TODO-LIST 예제는 새로운 언어를 배울때, 기본적인 CRUD 및 상태관리 방식을 학습하는데 좋은 예제이지만, 실무에서 실제 서비스를 만들 때 필요로 하는 기본적인 기능(가입, 탈퇴, 계정권한, 신고, 인증 등)에 대한 경험은 할 수가 없다. 그래서 만들어진 예제가 바로 "리얼월드. 하우"인 것이다. 그런데 이건 원래 취지와 방향이 다르기 때문에 일단 북마크. 

 

 

그렇게 조금더 조금 더찾다가 알게된 키워드가 바로 T3라는 키워드이다. 

보통은 개발을 할 때 front-end와 back-end를 구분해서 담당하고 개발하는데 이를 한 번에(소위 full-stack) 설계한 프로젝트이다. Next.js, TypeScript, Tailwind CSS가 기본 구성이고 백엔드와 같은 작업의 경우 tRPC, Prisma 및 NextAuth.js를 이용할 수 있도록 기본적인 구성들로 구성되어 있다. 

 

 

 

 

시작은 역시 매우 쉽다.

마치 React에서 CRA하듯, T3에서는 `npm create t3-app@latest`와 같은 형태로 프로젝트를 실행하게 된다. 

T3 stack start - http://localhost:3000

자, 이제 시작!

 

 

 

 

 

 

 

---

T3 가 갑상선 검사가 아닌 개발 Stack임에 확신을 준 레퍼런스 : 스타트업 컨설턴트 json님의 블로그
: https://json.media/blog/why_i_recommend_t3_stack( 참고로 이 글 외에도 귀한 내용들이 많이 담겨있다..)

스타트업에 T3 Stack 을 추천한 이유

 

공식 레퍼런스 : https://create.t3.gg/

Create T3 App