영어 | 中文
AI-ASISTED 웹 개발 프로젝트에 오신 것을 환영합니다! 최소한의 프론트 엔드 지식 (약간의 HTML 및 CSS)에도 불구하고 클로드 3.5와 GPT-4의 도움으로 흥미로운 구성 요소를 만들었습니다. 이 구성 요소를이 쇼케이스 사이트에 통합했습니다. 자유롭게 탐색하고 직접 경험하십시오!
AI는 코드를 작성하는 방식을 진정으로 변형 시켰습니다.
이 프로젝트는 정적 사이트 생성 (SSG) 용 React 및 NextJS를 사용하여 구축되었으며 NetLify에 배치됩니다. 자동 사이트 맵 생성, Google 웹 로그 분석 통합 및 I18N 국제화 지원이 특징입니다. 현재 갤러리에는 몇 가지 흥미로운 구성 요소가 포함되어 있으며 AI 지원으로 계속 더 추가 할 계획입니다.
알고리즘 : BFS Pathfinding, A* 검색, Dijkstra 알고리즘 및 힙 작업과 같은 클래식 알고리즘의 대화식 시각화를 탐색합니다.
게임 : 고모쿠 (5 번 연속), 중국 체스, 테트리스 및 2048과 같은 클래식 게임 구현.
기타 구성 요소 : 데이터 시각화를위한 동적 차트를 포함한 다양한 흥미로운 위젯.
모든 사람들은 이러한 구성 요소를 개선하는 데 기여할 수 있습니다. 프론트 엔드 기술 배경이 부족하더라도 걱정하지 마십시오. AI를 활용하여 아이디어를 활용할 수 있습니다! 이 프로젝트를 현지에서 실행하는 간단한 단계는 다음과 같습니다.
git clone [email protected]:selfboot/ai_gallery.git
cd ai_gallery
pnpm install
pnpm dev
http://localhost:3000 방문하여 프로젝트를보십시오.그 과정에서 문제가 발생하면 AI를 사용하여 해결하십시오!
웹 개발 경험이없는 초보자로서, 나는이 프로젝트의 AI 지원 개발을 통해 많은 실용적인 프론트 엔드 지식을 배웠습니다. 마침내 내가 항상 만들고 싶었던 시각화를 마침내 만드는 것은 엄청나게 만족 스러웠습니다.
GPT-4와 Claude 3.5는 완전히 유능한 가상 멘토이며 프로그래밍 파트너로 입증되었습니다. 사전 반응 개발 경험이 없어도 반응 개념을 신속하게 파악하고 복잡한 논리를 구현하며 매력적인 UI를 만들고 기본 원리를 이해하는 데 도움이되었습니다. 그들은 훌륭한 프로그래밍 어시스턴트이며 모범 사례, 설계 패턴 및 최적화 기술을 빠르게 도입합니다. 그들은 다양한 도전적인 문제를 해결하여 최고의 멘토의 타이틀을 얻는 데 도움이됩니다.
AI는 여전히 추론 능력에 약간의 환각과 한계가 있습니다. 때때로 AI 생성 코드에는 버그가 포함되어 있거나 프로젝트 요구 사항을 완전히 충족하지 않으며 때로는 제공된 설명이 충분히 명확하지 않습니다. 이러한 상황에서는 스스로 문제를 디버깅하고 해결해야합니다.
가장 효과적인 접근법은 AI를 공동 작업 도구로 사용하여 광범위한 지식을 개인적인 창의성과 프로젝트 별 이해와 결합하여 흥미로운 작업을 더 빠르고 더 나은 작업을 완료하는 것입니다.
이것들은 개인적인 의견이며 참조 만 있습니다. 두 AI 모델은이 프로젝트에서 각각 고유 한 강점을 가진 중요한 역할을 수행했습니다. 나는 일반적으로 Claude 3.5를 빠른 프로토 타이핑에 사용하고 자세한 문제를 해결하려면 GPT-4를 사용합니다.