[T3 stack] 워밍 업 - 환경 세팅 - CRUD 예제 - 배포

5. 업데이트 진행 중

예제 외 기능 추가 진행 중 : note엔 있는데 topic엔 없었던 삭제 기능 추가... 하다가 다시 다른거 하는.. 중ㅜ

 

 

 

4. 한 줄 후기

매번 느끼지만 다들( 프레임워크) Spring-스러워지고 있는 느낌이다. 최근 Spring은 어떤지 모르겠지만 ;) 이젠 용어도 가물가물해져서,, 언젠가 그 쪽 동네도 한번 놀러가봐야하는데.. 

 

 

 

3. 배포 

https://notetaker-4mzz.vercel.app/

NoteTaker

https://github.com/normalstory/notetaker

GitHub - normalstory/notetaker: notetaker app( t3 stack)

 

 

 

2. 기록 : 환경 세팅 및 개발 

: Typescript, Next.js, postgresql, Superbase, TRPC, DaisyUI, Vercel

https://www.notion.so/thinknormal/f30e346e12ac446e91289d2023caadfd

환경 세팅, 실습 및 배포

 

 

 

 

1. 워밍업

오랫만에 리액트와 next.js를 하려고 들여다보니 바뀐게 너무 많다. 물론 더 좋게 바뀌었다. 소위 DX라 불리고 있는 이 바닥 신조어? 개발자 경험이 좋아지고 있다. (하긴 바닐라js와 css 또한 계속 업데이트 중이니..) 모든걸 다 백업하고 시작하려면 하세월 일테니 일단 가장 포괄적이고 대표적인 최근 예제를 따라하며 팔로우-업할 예정이다. 그전에 준비 운동으로 주요 포스팅을 일단 일독해본다.

About. Next.js

1) 가장 직관적으로 중요한, 우선 이해가 필요한 부분은 정보(화면)를 구성하고 출력하는 라우팅 및 렌더링 아키텍처  파트인 것 같다. 참고로 v13.4 부터는 APP Dir가 적용( PAGE Dir방식과도 병행가능)되었는데, 디렉토리 방식으로 구성된다. 또한 중첩 라우팅 설정도 가능하다.라고 여러 블로그에서 언급하고 있다. 개인적으로 가장 중요한 컨셉은 화면 구성이 페이지 단위가 아닌 컴포넌트(partial) 단위로 세분화하여 렌더링을 관리한다는 점이 아닐까 한다. 그 배경으로 이전 Page Dir 방식에 적용되었던 레이아웃 패턴이 다시 활용되어 앱 전체를 어떻게 효율적으로 랜더링할 것인가가 아닌 라우트별로 얼마나 유동적으로 선택하거나 해제할 수 있는가를 고민하는 관점으로 전략의 방향이 전환되게 되었다.(  “Next.js의 상태관리” 문서와 Next.js 공식 문서)

(번역) Next.js의 app 디렉터리 아키텍처 이해하기

*관련 공식 문서 : https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

Upgrading: App Router Migration | Next.js