My Stack Is Changing

이 비디오에서는 Drizzle ORM, Chad의 UI 패키지, React 서버 컴포넌트 등 풀 스택 개발에 대한 새로운 도구와 개선 사항, 미래의 T3 스택을 위해 서버 데이터와 클라이언트 작업 간의 간극을 줄이기 위한 데이터 업데이트 패턴 재구성의 필요성 등이 다루어집니다. - 🚀 T3 스택은 모듈러 접근법으로 풀 스택 개발을 혁신적으로 바꿨지만, 새로운 옵션이 이제는 사용 가능합니다. - T3 스택은 구축 방법을 분류하고 자바스크립트 세계의 미들웨어 스택(Mean Stack)과 같은 시대를 대표합니다. - 연사자는 혁신적인 기술과 트렌디한 스택 트렌드를 놓쳤지만 서버리스와 엣지 컴퓨팅을 채용하여 풀 스택 애플리케이션을 구축하는 데 성공했습니다. - T3 스택은 연사자의 오만함에서 시작되었으며 자신의 이니셜을 따서 명명되었으며, 피카츄 앱에 대한 동영상을 통해 널리 알려졌습니다. 이것은 제품을 위해 사람들의 둥글기에 대한 인식을 이해하는 데 도움이 되었습니다. - T3 스택은 더 모듈러화되고 일관성 있는 풀 스택 솔루션으로 전환되었으나 이제는 오래되어 더 좋은 옵션이 있습니다. - 비즈니스 목적으로 새로운 기술을 채용할 때 안전한 기술과 위험한 기술을 구별하는 것이 중요합니다. 필수 데이터베이스 저장소를 변경하는 위험을 감수하지 않고도 새로운 방식으로 클라이언트 측에서 데이터를 가져오고 렌더링하는 방법을 실험하는 것이 좋습니다. - T3 스택의 핵심 구성 요소는 TypeScript, trpc, Next.js이며, Prisma, Tailwind, Auth0는 일반적인 추가 요소이며, Redis 기반 캐싱과 크론 작업에 필수적인 Upstash입니다. - 💡 Trpc, TypeScript 및 Prisma는 인상적인 도구입니다. 하지만 성능 및 배포에 문제가 있으며, 잠재적인 개선 사항이 있습니다. - 연사는 자신이 인상 깊게 생각한 다섯 개의 회사와의 경험을 논하며, 텍스트 에디터에서 TypeScript 서버의 성능 문제를 언급합니다. - Trpc의 무거운 추론과 Zod의 결합은 문제를 일으킬 수 있지만, 새로운 모듈 업데이트로 개선될 것이며, 프로젝트 참조를 보다 쉽게 분할하기 위해 더 지능적인 자동 생성이 필요하다는 연사의 제안을 언급합니다. - 연사는 TypeScript 서버와 ESLint를 통한 충돌 및 느린 성능 문제를 논하며, TS reset의 도입으로 개선될 가능성을 표현합니다. - Trpc V10은 인상적이고 이식성이 있지만, React 서버 구성 요소 지원 코드베이스에서 trpc의 역할은 다릅니다. 이제는 next.js, bling, remix 및 solid start 등의 많은 옵션이 존재하며 React와 백엔드를 결합하는 방법을 고려해야 합니다. - Prisma는 타입 안전한 DB 관리를 위한 최고의 폴 스택 DX입니다. 그러나 대용량 바이너리 크기와 느린 콜드 스타트 시간으로 인해 배포가 어렵습니다. - 몇 가지 버그를 수정하기 위한 개선이 이루어졌습니다. 그러나 충분하지는 않으며, Json 기능 플래그는 데이터베이스.js 방법을 통해 어디서든 가져올 수 있도록 하며, HTTP 3 지원에 대한 업데이트로 쿼리 및 응답을 일괄 처리할 수 있게 됩니다. - 💻 Drizzle ORM은 SQL과 유사한 구문과 데이터베이스 관리를 위한 유망한 TypeScript 도구로, Prisma를 대체할 잠재력을 가지고 있습니다. - Kiesley는 데이터베이스를 쿼리하는 흥미로운 구문을 가진 타입 안전한 쿼리 빌더이지만, 데이터베이스의 유형을 알지 못하거나 스키마를 정의하고 데이터베이스를 업데이트할 수 있는 방법이 없습니다. - Drizzle ORM은 TypeScript를 사용하며 SQL과 유사한 구문을 사용하는 데이터베이스 관리에 유망한 도구입니다. - 특히 이름 바꾸기, 제거 및 이동을 포함하는 마이그레이션은 역호환성이 없으며 배포 타이밍과 환경 동기화에 대한 신중한 고려가 필요하므로 코드 베이스 내에서 변경 사항을 추가하거나 제거하는 것이 좋습니다. - Drizzle kit push는 이제 MySQL에서 사용할 수 있으며, Prisma를 대체할 수 있으며, Tailwind는 강력한 도구이며 Talent도 고려할 만합니다. - SQL 위에 좋은 개발자 경험이 중요하며, 세계의 나머지와 호환되지 않는 데이터 표준을 사용하는 것은 실용적이지 않습니다. - 👀 Chad의 UI 패키지는 tailwind와 Radix UI를 사용한 예제 컴포넌트를 제공하지만, JavaScript 부재와 불분명한 비즈니스 모델에 대한 우려가 존재합니다. - Chad의 UI 패키지는 패키지로 설치하는 것이 아니라 코드 베이스에 복사하여 붙여넣을 수 있는 tailwind와 Radix UI를 사용한 예제 컴포넌트를 제공합니다. - Radix UI는 Tailwind UI의 무료 대안이며, 커스터마이즈 가능한 컴포넌트의 소스 코드를 제공하여 headless UI보다 더 나은 옵션입니다. - 발언자는 이 도구가 HTML만 제공하고 JavaScript가 없어 우려하며, 비즈니스 모델이 불분명하여 Tailwind CSS를 선호합니다. - Tailwind는 좋은 위치에 있으며, JS를 끄는 것은 인증에 대한 최선의 옵션입니다. 그러나 더 많은 커스터마이징이 필요한 사람들에게는 적합하지 않을 수 있습니다. - Clerk는 테스트를 위한 사전 제공 업체 키를 갖추고 있으며, create T3 app과의 통합도 검토 중입니다. - Turbo 리포와 Turbo 팩은 개발자 경험과 확장성을 유지하기 위해 필수적이며, 캐싱의 정밀도와 변경된 파일만 다시 컴파일하여 업데이트가 더 빠르고 대규모 작업에서는 덜 작업해도 되도록 해줍니다. - 💻 React 서버 구성요소는 제약 없이 서버 사이드 렌더링을 할 수 있게 해주지만, 데이터베이스 연결과 렌더링에 있어 일부 데이터 검색 도구들이 유용하지 않을 수 있다는 점이 주의해야 한다. - Turbo는 추상화가 아니며, 시각적으로 복잡한 면이 있지만, 나중에는 모노레포 옵션이 제공될 수도 있고, Create T3 Turbo를 사용하면 모바일과 웹 앱을 공유하는 백엔드 코드를 별도로 만들 수 있다. - Turbo Clerk는 인증 시스템을 포함한 강력한 Create T3의 파생 버전으로, 모바일과 웹 앱을 동일한 백엔드로 쉽게 배포할 수 있다. - React 서버 구성요소는 어려운 문제이며, 기본값이 되기는 어렵다. - React 서버 구성요소는 서버에서만 작동하므로, 데이터베이스 연결에 대한 주의와 일부 데이터 검색 도구들이 유용하지 않을 수 있다는 점이 있다. - 서버 구성요소와 함께 trpc를 사용하고 라우터에 호출자를 만들어 trpc 함수를 호출할 수 있으며, 서버 간 추가 지연 시간 없이 호출할 수 있는 SSG 도우미 패턴도 있다. - 🚀 서버 구성 요소는 React 앱에서 데이터 가져오기와 업데이트를 간소화하지만 변형과 클라이언트 및 서버 캐시 간의 간격을 메우기 위해 새로운 패턴이 필요합니다. - dehydrated SSG 도우미로 미리 가져온 게시물은 쿼리 클라이언트 캐시에서 데이터를 업데이트할 수 있기 때문에 데이터 업데이트가 가능하지만, react server components 및 next.js 팀에서 변형 RFC가 아직 없어 검증과 스키마 정의에 관련된 잠재적인 문제가 있습니다. - 변형은 여전히 클라이언트 측 문제이며 react server component 패턴은 도움이 되지 않으므로 새로운 패턴을 개발해야 합니다. - 서버 구성 요소는 미래를 대비한 것으로 React 애플리케이션에서 데이터 가져오기와 업데이트를 간단하게 구현할 수 있으며, trpc 및 react query와 같은 도구가 업데이트 공간에서 도움이 됩니다. - 빠른 업데이트는 해결 방법을 재고해야 할 필요가 있으며 trpc를 사용하면 앱 라우터 라인이 다르게 정의되며 클라이언트와 서버 업데이트 간에 구분이 됩니다. - Next 13의 앱 라우터는 앱 디렉토리의 공식 용어이며 새로운 캐시 원시 타입을 이용해 클라이언트 측에서 세부적인 업데이트를 트리거하여 변경 사항을 쉽게 업데이트할 수 있습니다. - 접근성과 형식 안전성이 개선되었음에도 클라이언트와 서버 캐시 간의 간격은 넓어지고 있어 연결하는 것이 어려워지고 있습니다. - 🚀 발표자는 T3 스택의 미래를 위해 데이터 업데이트 패턴을 재구성하고 서버 데이터와 클라이언트 작업 간의 간극을 좁히는 필요성에 대해 논의합니다. - 발표자는 새로운 서버 구성 요소 패턴을 사용하여 트위터 클론 프로젝트를 다시 만들었으며, SWR을 사용하여 트윗 게시를 위한 클라이언트 함수를 작성해야 했습니다. - 발표자는 SWR 뮤테이션 및 React 18의 useTransition 훅을 사용하여 낙관적 업데이트 레이어를 구현하여 서버에서 데이터를 가져온 후 DOM을 업데이트했습니다. - 현재 데이터 업데이트 및 변이 패턴은 기존 데이터 개념이 없으며 유형 안전성이 부족하여 사용자 경험을 개선하기 위해 완전히 재구성해야 함을 발표자는 제안합니다. 반면 새로운 서버 구성 요소는 데이터 가져오기에 대한 훨씬 간단하고 우아한 솔루션을 제공합니다. - 클라이언트 업데이트와 서버 데이터 가져오기 사이의 간극이 큰 문제이며, 상호 작용 경계에 다리를 건설하는 것이 T3 스택의 미래를 위해 필수적입니다. - 발표자는 서버 데이터와 클라이언트 작업 간의 간극을 좁히는 DX를 개선하고, 복잡성과 도전에 대해 인식하면서도 낙관적 업데이트 패턴 및 세분화된 캐싱 및 유효성 검사의 잠재력에 자신 있습니다 - T3 스택의 미래는 개선된 성능을 위한 빠른 Prisma 대안, 개인 시리얼 탐색 및 create O3 앱 및 bling과 같은 대체 스택의 실험을 포함합니다. - 💻 Bling은 타입 안전성과 일관성을 갖춘 클라이언트 앱에서 서버 함수 작성을 간소화하여 전체 스택 JavaScript 프레임워크 개발에 강력한 구성 요소로 작용합니다. - Bling은 새로운 구문으로, 전체 Veet 생태계에서 일관된 개발자 경험과 타입 안전성을 보장하며 클라이언트 애플리케이션에서 서버 함수 작성을 쉽게합니다. - 서버 달러 기호 매크로는 백엔드 파일을 생성하는 간단한 구문을 제공하며 모든 애플리케이션에서 일관된 개발자 경험과 타입 안전성을 보장합니다. - Bling은 클라이언트 측 JavaScript 프레임워크에서 Veet이 수행한 작업과 유사한, 전체 스택 JavaScript 프레임워크 개발에 강력한 구성 요소입니다. - Bling은 보다 빠른 반복 및 혁신을 가능하게하는 소프트웨어 개발의 미래이며, 새로운 전체 스택 프레임워크의 생성으로 이어질 것입니다.