AI와 더 빨리 일할 수 있는 실용적인 가이드 당신이 지금 소프트웨어를 구축하는 경우에, 당신은 고통을 알고있다 : 같은 보일러 플레이트를 쓰고, API를 설정하고, 스타일링 구성 요소를 작성하고, 테스트를 작성하는 시간을 보낸다.당신은 작업을 완료하고, 열두 개의 작은 세부 사항은 여전히 당신의 작업 흐름을 괴롭히고있다. AI는 은총 총알이 아니지만 올바른 방법으로 사용하면 실제로 소음을 추가하는 대신에 당신을 가속화 할 수있는 전체 스택 팀 동료 일 수 있습니다. 트릭은 단순히 "코드를 작성하도록 요청하는 것이 아닙니다."그것은 구조, 맥락 및 시퀀스를 제공하여 무엇을 구축해야하는지, 어떻게 테스트해야하는지, 그리고 시스템에 맞는 곳을 알고 있습니다. 이 가이드에서는 이번 주에 10 시간 이상을 절약 할 수있는 7 가지 콘크리트 AI 기술을 보여 드리겠습니다. 참고 : 시간 절약은 전형적인 프로젝트에 따라 추정됩니다. 기술 #1: Component Prompt Formula 시간 절약: 45 ~ 60 분 각 구성 요소 UI 구성 요소를 모든 세부 사항을 추측하지 않고 완료하는 방법으로 이것을 생각해보십시오.AI를 손으로 잡는 대신, 구조화 된 "리셉트"를 제공하십시오. How it works: 혀를 써서 써서 써서 써서 써서 써서 써서 써서 써서 써서 써서 기능성 : 
 
 
 
 [일반적인 팁 1] [중고의 내용 2] [사용자 상호작용] UI 요구 사항 : 
 
 
 
 [Design Framework] 스타일링 반응성 행동 정부 관리 기술적 : 
 
 
 
 종류 보안 요구 사항 성능 요구 테스트 접근법 [특별한 요구 사항]에 따라 생산 준비하십시오. 예를 들어 : TypeScript를 사용하여 React에서 TaskList 구성 요소 만들기 기능성 : 
 
 
 
 
 제목, 설명 및 만료일이 있는 작업 목록을 표시합니다.Displays a list of tasks with title, description, and due date. Checkbox to mark task as complete with strike-through styling (스트라이크 스튜닝으로 완료된 작업) 확인 프롬프트를 사용하여 작업을 삭제하는 버튼(Delete a task with confirmation prompt) 작업 제목 및 설명에 대한 인라인 편집 UI 요구 사항 : 
 
 
 
 
 Tailwind CSS with Clean Card 레이아웃 작업을 추가 / 제거 할 때 부드러운 애니메이션 완전히 응답: 모바일에서 단일 열로 붕괴 Skeleton Loader를 보여주고 작업을 수행하는 동안 기술적 : 
 
 
 
 
 Task Objects 용 강력한 TypeScript 유형 큰 목록을 위한 React.memo로 최적화 액세스: 키보드 네비게이션, 체크박스/버튼을 위한 ARIA 역할 실패한 업데이트에 대한 오류 경계 최적의 업데이트와 실패한 API 호출 로그를 통해 생산 준비를하십시오. : Pro Tips 
 
 
 
 
 항상 정의 Task type/interface up front 데스크톱 및 모바일 UI 상태를 모두 요청 AI가 try/catch 블록을 포함하도록 "with error handling"를 추가합니다. 적절한 null 검사 및 검증을 위해 "production-ready"를 사용하십시오. 기술 #2: Instant API 패턴 시간 절약: API 당 3~6시간 모든 엔드포인트, auth 및 검증을 수동으로 케이블링하지 않고 전체 REST API를 스핀하고 싶습니까?이 패턴은 귀하의 단계입니다.이 아이디어는 간단합니다 : AI에 명확한 구조를 제공하고 즉시 실행하고 조정할 수있는 작동하는 API 스케줄을 생성하십시오. How it works: 그리하여 창조주(創造主)가 그분을 섬기게 하옵소서. 최종 포인트 : 
 
 
 
 
 
 GET /[resource] — 필터링/파이너링을 선택한 목록 항목 GET /[resource]/{id} — 단일 항목을 가져오기 POST /[resource] — create a new item with validation PUT /[resource]/{id} — update an item DELETE /[resource]/{id} — 소프트 또는 하드 삭제 특징 : 
 
 
 
 
 인증 (JWT, OAuth 또는 당신의 스택이 사용하는 무엇이든) 데이터베이스 + ORM (PostgreSQL + SQLAlchemy, 예를 들어) Input 및 Output Validation 글로벌 오류 처리 기술적 : 
 
 
 
 당신의 프레임워크가 그것을 지원하는 경우 async를 사용하십시오. Include some basic tests (unit or integration) 자동 생성 문서 (OpenAPI 또는 Swagger) Example 예를 들면 FastAPI를 사용하여 비용 추적기 API를 구축하고 있다고 가정 해 봅시다. 최종 포인트 : 
 
 
 
 
 
 GET /expenses - 목록 비용, 페이지화 및 날짜 / 카테고리 필터 GET /expenses/{id} - 소유권 확인을 통해 단일 비용을 가져옵니다. POST /비용 - 새 비용 만들기, 금액 확인, 범주, 설명 PUT /expenses/{id} - 기존 비용을 업데이트 DELETE /expenses/{id} - 소프트 삭제하여 데이터가 손실되지 않도록 특징 : 
 
 
 
 
 JWT 신선한 토큰을 사용하여 인증 데이터베이스를 위한 PostgreSQL + SQLAlchemy Pydantic schemas for request and response validation 올바른 상태 코드로 글로벌 오류 처리 기술적 : 
 
 
 
 
 Async/Wait Whole 속도 Pytest Fixtures and Tests 포함 OpenAPI docs 자동 생성 Docker-compose setup ready for local developer에 대한 리뷰 보기 왜 작동하는지: AI에이 인스턴트를 제공하고 즉시 부츠를 얻을 수 있습니다.당신은 그것을 실행하고, 그것을 포크하고, 반복 할 수 있습니다.코일러 플레이트 와이어링이 필요하지 않습니다. 테스트와 마이그레이션이 포함되어 있습니다. 기술 #3: 데뷔 탐정 시간 절약: 버그 당 1-3 시간 디버깅은 AI가 올바른 맥락을 제공하면 실제로 빛나는 곳입니다.그것에 오류를 던지지 마십시오; 설정과 이미 시도한 것을 설명하십시오. : How it works 당신은 상황과 함께 정확한 오류 메시지를 제공합니다 : 
 
 
 
 
 환경 (dev/prod, OS, 프레임 워크 버전) 당신이 하려고 했던 일은 실패하는 코드 당신이 이미 시도한 것 그리하여 그들에게 물어보라. 
 
 
 
 
 The root cause explanation A quick temporary fix 적절한 장기적인 해결책 미래에 그것을 방지하기위한 팁 예를 들면 이 오류를 디버그 : TypeError: Unable to read property 'map' of undefined 컨텍스트 : 
 
 
 
 
 React 18 with TypeScript, Next.js 13에 대한 리뷰 보기 API에서 지출 목록을 만드는 시도 실패 코드:{expenses.map(expense => <ExpenseCard key={expense.id} {...expense} />)} 기록을 시도했으며 발견된 비용은 첫 번째 렌더링에서 정의되지 않습니다.Tried logging, and found expenses is undefined on the first render AI에게 제공하도록 요청하십시오 : 
 
 
 
 
 왜 이런 일이 일어나는지 충돌을 막기 위한 빠른 해결책 일관된 데이터 처리를 위한 적절한 솔루션 미래의 구성 요소에서 그것을 방지하는 방법 : The AI acts like a detective, helping you understand the problem instead of just handing you a fix. You learn why it happened and how to avoid it next time. Why it works : Pro tips 
 
 
 
 
 항상 정확한 오류 메시지를 포함 컨텍스트에 대한 주변 코드 공유 당신이 이미 시도한 것을 언급하십시오 같은 버그가 다시 나타나지 않도록 예방 전략을 요청하십시오. Technique #4: The Refactor Request 시간 절약: 2 ~ 4 시간의 수동 재배치 때때로 코드가 작동하지만 혼란스럽고 읽기 어렵거나 느리게 작동합니다.시간을 보내는 대신 AI가 명확한 목표와 제약을 갖고 재구성하도록 요청할 수 있습니다.이 방법으로, 당신은 더 깨끗하고 빠르고 유지할 수있는 코드를 얻고 길을 따라 변화에서 배울 수 있습니다. : How it works Provide the code you want refactored and explain: 
 
 
 귀하의 목표 (성능, 읽기, 기술적 부채 감소, 구현 패턴) Constraints (what must stay the same, compatibility requirements, performance targets) AI에게 그가 만든 모든 중요한 변화를 설명하도록 요청하십시오. 예를 들면 Refactor this messy React component (~300 라인) 목표 : 
 
 
 
 
 Extract reusable hooks Render Performance를 개선하기 Add proper error boundaries TypeScript 형식 포함 Constraints: 
 
 
 
 동일한 API/props를 유지 모든 기존 기능을 유지 React 16+와 호환 Ask the AI to: 
 
 
 Refactor the code according to the goals Explain each major change so you understand it : You get cleaner, more maintainable code without spending hours doing it manually, and you learn patterns and best practices while reviewing the AI’s changes. Why it works : Pro tips 
 
 
 
 
 당신의 재구성 목표에 대해 명확히하십시오. 중요한 기능이 깨지지 않도록 제한을 설정합니다.Set constraints so critical functionality is not broken 배울 수 있도록 설명을 요청하십시오 개선 사항을 확인하기 위해 이전과 이후의 성능 비교 Technique #5: The UI/UX Accelerator 시간 절약 : 2 ~ 3 시간의 UI 작업 몇 시간 동안 CSS, 프레임 워크 및 구성 요소 라이브러리와 싸우는 대신 AI가 무거운 리프팅을 처리하도록하십시오. : UI 요소, 모양과 느낌, 상호 작용 및 모든 액세스 가능성 요구 사항을 설명합니다. 사용 중인 프레임 워크 또는 라이브러리를 언급하고 어두운 모드 또는 모바일 우선 지원을 원하는지 참고하십시오. How it works Example I needed a side bar navigation for a dashboard. I asked the AI for 
 
 
 
 
 Modern minimalist style with glass-like panels 기본 색상 #3B82F6 중립 회색 Smooth slide/fade transitions 모바일에서 붕괴 가능, 데스크톱에서 확장 For functionality, I wanted: 
 
 
 
 
 활발한 경로 강조 Nested menus with accordion support Icons with Tooltips 근처 오락거리 키보드 항해 기술적인 세부사항 : 
 
 
 
 
 타일윈드 CSS React + TypeScript 사용하기 모든 현대 브라우저와 호환 어두운 모드 지원 AI는 반응하고 접근 가능한 완전히 작동하는 사이드바를 제공했으며, 작은 세부 사항을 신속하게 조정할 수있었습니다. : Pro Tips 
 
 
 
 특정 디자인 트렌드를 참조하여 AI가 비전과 일치합니다.Reference specific design trends so the AI matches your vision. 항상 접근성 요구 사항을 포함 사전에 애니메이션과 반응성 행동을 지정 기술 #6 : 테스트 생성기 시간 절약: 2 ~ 4 시간의 수동 테스트 : AI는 테스트 할 코드와 원하는 범위와 함께 제공하면 테스트를 빠르게 생성 할 수 있습니다. "테스트"를 요청하지 마십시오 - 세부 사항을 제공하십시오. How it works AI를 제공하십시오 : 
 
 
 
 
 테스트할 코드 또는 모듈 어떤 부품을 테스트하고 싶습니까 (기능, 엔드포인트, Edge 케이스) The type of tests (unit, integration, performance) 사용 중인 프레임 워크 또는 패턴 Then ask it to give: 
 
 
 
 
 
 모든 기능에 대한 단위 테스트 API 호출 또는 데이터베이스 상호 작용에 대한 통합 테스트 Edge 케이스 및 오류 시나리오 성능 벤치마크 Mock Data 및 Fixtures Example Create comprehensive tests for an ExpenseService backend class: 
 
 
 
 
 
 Unit tests for all CRUD methods Integration tests with the database Edge cases like negative amounts or missing fields Bulk Operations를 위한 성능 테스트 비용을 발생시키기 위한 Mock Data Factory Use Jest with mock patterns for external dependencies. 왜 작동하는지 : AI는 빠르게 당신이 놓칠 수있는 가장자리 케이스를 다루는 완전하고 구조화 된 테스트를 생성 할 수 있습니다.It saves time and ensures consistent, reliable coverage across your project. : Pro Tips 
 
 
 
 
 호환 코드를 얻기 위해 테스트 프레임워크를 지정합니다.Specify your testing framework to get compatible code 튼튼함을 위한 edge case cover 적절한 경우 성능 테스트를 요청하십시오 테스트 설치를 단순화하기 위해 모크 데이터 생성기를 요청 Technique #7: The Deploy Script 시간 절약: 배포 설정에 따라 2-4 시간 : AI can help you generate full deployment configurations quickly. Provide details about your app, tech stack, and hosting requirements, and it will output a ready-to-use deployment plan. How it works AI를 제공하십시오 : 
 
 
 
 
 
 
 Frontend Framework 및 Build Setup 당신의 백엔드 언어 / 프레임워크 데이터베이스 유형 및 호스팅 모든 환경 변수 또는 빌드 최적화 CI/CD 파이프라인 선호도 모니터링 또는 로깅 요구 사항 Then ask it to include: 
 
 
 
 Hosting platforms and configurations CDN setup and domain handling 롤백 전략 및 건강 검사 예를 들어 : Vercel/Render에 React + FastAPI 앱을 배포하십시오: 
 
 
 
 
 
 
 
 
 
 
 Frontend : TypeScript, Vite build를 사용하여 반응 Backend: FastAPI with PostgreSQL Database: Supabase hosted API 키를 위한 환경 변수 Build optimization with code splitting GitHub 액션 CI/CD Sentry error monitoring Frontend on Vercel, Backend on Render에 대한 리뷰 보기 SSL 사용자 지정 도메인 롤백 전략 및 건강 검사 포함 : AI saves hours by creating a structured, repeatable deployment setup that covers hosting, CI/CD, and monitoring, reducing errors and setup time. Why it works : Pro Tips 
 
 
 
 
 Specify exact hosting platforms for accurate configs 시작부터 모니터링 및 오류 추적을 포함 완전한 CI/CD 설정 요청 항상 실패를 우아하게 처리하기 위해 롤백 절차를 요청하십시오. 상품명 : The Combination Technique 시간 절약: 1 ~ 2 일 각 기능 : 이 기술은 시작에서 끝까지 완전한 기능을 구축하기 위해 여러 AI 접근 방식을 함께 체인합니다.Backend, frontend, 테스트 및 배포를 별도로 다루는 대신 AI에 단일 구조화 된 프롬프트를 제공하고 모든 것을 올바른 순서로 생성합니다. How it works AI를 제공하십시오 : 
 
 
 
 
 
 기능 설명 및 요구 사항 백엔드 API 세부 정보 (endpoints, database, auth, validation) Frontend 구성 요소 요구 (UI, 상태 관리, 응답성) 테스트 요구 사항 (unit, integration, edge cases) 배포 선호 (플랫폼, CI/CD, 모니터링) 예를 들면 사용자 인증 시스템을 원하는 경우: 
 
 
 
 
 Technique #2를 사용하여 전체 auth API를 생성합니다. 기술 #1을 사용하여 login/register UI 구성 요소를 만듭니다. 기술 #6을 사용하여 포괄적 인 테스트를 생성하십시오. 기술 #7을 사용하여 전체 시스템을 배포하십시오. The Chain Prompt: 완전한 성능을 갖추고 있으며, 
 
 
 
 
 API 를 사용하여 [필요 사항] Frontend 구성 요소 for [use cases] Critical Paths를 다루는 테스트 Configuration 설치 이 순서로 모든 것을 제공하십시오 : 모델, API, frontend, 테스트, 배포. : 체인 기술을 통해 AI를 전체 팀 동료처럼 취급합니다.이 기술은 반복적이고 구조화 된 작업을 처리하여 디자인, 건축 및 창조적 인 결정에 집중할 수 있습니다. Why it works : Pro Tips 
 
 
 
 
 불완전한 출력을 피하기 위해 작업 흐름의 각 부분을 명확하게 정의합니다.Clearly define each part of the workflow to avoid incomplete outputs Ask for code in the sequence you plan to implement 단계 간의 작은 수동 검사와 결합하여 실수를 일찍 잡을 수 있습니다. Use this approach to prototype features or even full MVPs rapidly 일단 작업 흐름을 내리고 체크를 수행하면 더 큰 그림을 보게됩니다 : 진정한 승리는 더 빠른 코드가 아니라 실제로 중요한 개발 부분에 집중하도록 자유롭게합니다. The real win isn’t just finishing tasks faster, it’s reclaiming your time and mental energy. Your Next Steps: 오늘은 하나의 기능에서 Component Prompt Formula을 시도하십시오; 이번 주에는 AI를 사용하여 적어도 하나의 백엔드 API, UI 구성 요소 및 테스트 스위트를 구축하십시오; 이번 달에는 전체 작업 측 프로젝트를 시작하기 위해 여러 AI 기술을 체인하십시오.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

👉 Join The Tech Audience Accelerator 👈

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

이번 주에 10 시간 이상을 절약 할 수있는 7 가지 AI 코딩 기술

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

독특한 생태계를 강화하는 비트코인 UTXO 모델

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

HackerNoon 글쓰기 대회에서 우승하고 싶으신가요? #crypto-api 대회 우승자들이 추천하는 내용은 다음과 같습니다.

Claude Sonnet 3.5 시스템 프롬프트 유출: 법의학적 분석

독특한 생태계를 강화하는 비트코인 UTXO 모델

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps