당신은 놀라운 것을 만들고자 하는 큰 꿈을 가진 JavaScript 개발자입니다. 하지만 다음 놀라운 앱 아이디어를 시작하기도 전에 상용구 코드와 인프라를 설정하는 데 몇 시간을 소비해야 합니다. 구성할 개발 환경, 설정할 CI 파이프라인, 사용자 프로필 및 인증 흐름과 같은 다양한 일반 기능을 구축해야 합니다.
그것이 시간이나 재능을 가장 잘 활용하는 방법이 아니라고 생각하는 경우가 있습니다. 바로가기를 찾기 시작하는 때입니다. 앱의 일상적인 부분을 처리할 수 있는 도구 및 리소스를 제공하므로 구축하려는 특별한 기능에 집중할 수 있습니다.
이미 AI 코딩 도우미에 어느 정도 의존하고 계시겠지만, 프로젝트를 시작하기 위해 설계된 다른 개발 도구 및 리소스와 AI 코딩 도우미를 함께 사용하면 진정한 마법이 일어납니다.
AI는 많은 작업을 간소화할 수 있지만 검증된 도구와 리소스를 효과적으로 사용하는 방법을 이해하는 것이 중요합니다. 이를 통해 AI 어시스턴트가 더 깨끗하고, 더 잘 테스트되고, 더 효율적인 코드를 생성할 수 있습니다.
프로젝트 템플릿은 다양한 기술 스택에 대해 사전 구성된 설정을 제공합니다. 그들은 오랫동안 존재해 왔지만, 아마도 직관에 반할 수도 있지만 AI 코딩 도우미의 등장으로 더욱 중요해졌습니다.
예: Vercel.com 및 Remix.run의 시작 템플릿
템플릿은 AI 보조자에게 최상의 컨텍스트를 제공하여 세심한 프롬프트 엔지니어링에 드는 시간을 절약하고 AI 동료와의 긴 대화를 줄여줍니다. 템플릿이 자세히 설명되어 있습니다. 개발 환경, 사용할 종속성, 데이터 전송 방법, 프레임워크, 상태 관리, 스타일링 솔루션 등을 정의합니다.
템플릿에는 코딩 규칙과 개발 표준도 포함되어 있습니다. 견고하고 테스트를 거쳐 검증된 기반을 갖추고 있으므로 프롬프트별로 전체 내용을 연결하지 않아도 됩니다.
Cursor AI와 @Codebase 멘션을 사용하여 미리 만들어진 프로젝트(템플릿)를 사용자 정의
템플릿 자체 외에도 일부 AI 보조자(예: Cursor AI)는 AI가 제시하는 모든 제안을 안내하는 일반 지침 파일도 지원합니다. 예를 들어, .cursorrules 파일 내에서 사용하기 위해 수석 개발자가 작성한 Cusror AI 지침 모음을 참조하세요.
https://cursor.directory/
코딩은 단순히 프런트엔드나 백엔드 로직을 작성하는 것이 아니라 앱이 성공할 수 있도록 전체 생태계를 설정하는 것입니다. AWS CDK, Pulumi 또는 Terraform과 같은 도구를 사용하면 클라우드 인프라를 코드로 정의할 수 있습니다.
SST와 같은 최신 IoC 도구는 코드베이스의 기능적 측면을 매우 "인식"합니다. 이는 앱의 로직에 포함되어 더욱 간편하고 실패 방지적인 개발을 가능하게 합니다. Modren IoC 도구는 놀라울 정도로 추상적인 API를 제공하는 경우가 많아 귀하와 AI 동료가 더 쉽게 이해할 수 있습니다.
IoC를 사용하면 AI 코딩 도우미가 더 많은 도움을 줄 수 있습니다. 논리 및 UI와 마찬가지로 인프라를 조작하고 확장할 수 있습니다. 귀하의 코드베이스는 AI가 귀하에게 적절한 서비스를 제공하는 데 필요한 모든 것입니다. 앱을 강화하는 리소스를 포함하여 아무것도 숨겨져 있지 않습니다.
/**
* SST Example; the code for nextjs deployment
* along with the creation of an S3 bucket (acesible to it)
**/
const bucket = new sst.aws.Bucket("MyBucket", {
access: "public"
});
new sst.aws.Nextjs("MyWeb", {
link: [bucket]
});
UI 구성 요소를 (불변) npm 패키지로 설치하는 대신 프로젝트에 직접 포함시키는 쪽으로 눈에 띄는 변화가 있어 UI 구성 요소를 조정하고 확장할 수 있는 유연성이 향상되었습니다.
코드베이스의 일부로 UI 구성 요소의 자체 인스턴스를 갖는 주요 이점 중 하나는 AI 코딩 도우미가 사용자 정의된 구성 요소 컬렉션과 (잠재적으로) 수정된 구성 요소 컬렉션을 참조하면서 필요에 따라 새로운 UI를 더 쉽게 구성할 수 있다는 것입니다. 동작 및 API.
shadcn/ui와 같은 일부 구성 요소 컬렉션은 "복사-붙여넣기" 프로세스에 도움이 되는 CLI 도구를 제공합니다. Bit와 같은 다른 도구는 Bit 플랫폼에서 호스팅되는 모든 UI 라이브러리에서 동일한 작업을 수행하는 데 도움이 될 수 있습니다. 모든 구성요소를 프로젝트에 설치하거나 복사할 수 있습니다.
Bit Platform에서 호스팅되는 Radix 구성 요소의 맞춤형 컬렉션
Bit Platform의 경우 전용 AI 도우미가 즐겨찾는 구성 요소 라이브러리를 기반으로 공유 구성 요소의 맞춤 컬렉션을 생성할 수도 있습니다.
Bit Platform에서 사용자 정의 Material UI 구성 요소의 공유 컬렉션 생성
컴포저블 소프트웨어 또는 컴포저블 코드베이스는 한동안 소프트웨어 개발에서도 사용되어 왔던 밀접하게 관련된 두 가지 개념입니다.
기본적으로 구성 가능한 코드베이스는 재사용 가능하고 독립적으로 관리할 수 있는 모듈식 구성 요소 또는 모듈로 설계되었습니다. 이러한 모듈은 다양한 방식으로 조립되어 새로운 시스템을 생성하거나 기존 시스템을 수정할 수 있습니다. 시스템은 빌드 타임, 런타임 또는 하이브리드 중에 구성되어 프런트엔드, 백엔드 및 인프라까지 구성할 수 있습니다.
예: 재사용 가능한 구성 요소로 구성된 구성 가능한 React Apollo 서버 애플리케이션
'구성 가능' 접근 방식은 표준화되고 유지 관리가 가능하며 적응성이 뛰어난 코드로 인해 많은 사람들에게 사랑을 받고 채택되었습니다.
'표준화' 왜냐하면 동일한 구성 요소가 시스템 전체에서 재사용되기 때문입니다. '유지관리 가능' 왜냐하면 시스템의 구성 요소가 서로 어떻게 연관되어 있는지 설명하는 명확한 종속성 그래프를 형성할 뿐만 아니라 전체 코드 줄(LOC)이 대폭 줄어들기 때문입니다. 마지막으로, 구성 요소가 새로운 요구 사항에 맞춰 다양한 방식으로 사용될 수 있기 때문에 '적응 가능'입니다.
AI 코딩 도우미가 결합성에 완전히 새로운 변화를 가져왔습니다.
Bit와 같은 플랫폼은 이러한 접근 방식을 채택하여 AI 기반 코딩 도우미와 함께 독립 구성 요소를 위한 홈을 제공했습니다. 이 도우미는 단순한 코드 생성 이상의 기능을 제공합니다. 시스템의 종속성 그래프를 이해하고 새 코드를 처음부터 만드는 것보다 기존 구성 요소를 재사용하는 것을 우선시합니다.
이러한 전략적 재사용을 통해 코드베이스가 효율적이고 유지 관리 가능하게 유지되어 불필요한 팽창을 방지할 수 있습니다. 또한 재사용된 구성 요소는 이미 테스트 및 검증을 거쳤으므로 더 나은 숙면을 보장받을 수 있습니다.
예를 들어 Bit의 AI 보조자에게 제공되는 다음 프롬프트를 참조하세요.
Bit의 AI 코딩 도우미를 활용한 새로운 기능 생성
생성된 구성 요소는 코드베이스의 기존 독립 구성 요소로 구성됩니다.
AI 생성 구성 요소인 'contact-us-form'은 코드베이스의 기존 구성 요소로 구성됩니다
그런 다음 구성 요소는 재사용 가능한 구성 요소의 엄선된 컬렉션인 코드 베이스에 합류하기 전에 구축 및 테스트됩니다.
AI 생성 구성 요소는 Bit Platform의 코드베이스에 합류하기 전에 구축 및 테스트됩니다
보일러플레이트를 설정하거나 파이프라인을 다루는 데 열중하여 코딩을 시작한 사람은 아무도 없습니다. 실제로 중요한 창의적이고 판도를 바꾸는 일에 집중할 때 진정한 마법이 일어납니다. AI 코딩 도우미가 도움을 드리고 있지만, 계획이나 방법론을 염두에 두지 않고 이를 사용하면 AI 파트너와 길고 지루한 대화를 나누게 되는 경우가 많습니다.
위 내용은 AI 코딩 도우미, 시작 템플릿 등: 덜 일하기 위한 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
