Tips Tricks for AI Coder
1.0.0
비 코더가 AI 도구를 효과적으로 사용하여 웹 사이트, 앱 및 기타 프로젝트를 개발할 수 있도록 설계된 포괄적 인 리소스 인 AI 코더 초보자를위한 팁 및 트릭 에 오신 것을 환영합니다. 이 안내서는 실제 경험과 Absolute 초보자를위한 실용적인 조언을 기반으로합니다.
이 가이드는 또한 AI의 힘을 활용하는 것을 배우는 초보자 개발자로서 나의 여정에 대한 증거 역할을합니다. 모든 장은 AI 중심 개발의 세계를 탐색하면서 배운 교훈에서 영감을 얻었습니다. 저의 목표는 이러한 통찰력을 귀하와 공유하여 일반적인 함정을 피하고 이러한 도구의 잠재력을 극대화 할 수있는 것입니다.
제가 조기에 배운 가장 큰 교훈 중 하나를 여러분과 공유하겠습니다. 여기는 다음과 같습니다. AI에게 요구하는 일을 표현하는 방법은 모든 것입니다. 화려한 것을 얻는 것과 쓸모없는 것을 얻는 것의 차이는 종종 당신이 그것을 요구하는 방식에 달려 있습니다. 간단하게 들리지만이 팁만으로도 많은 좌절감을 줄 수 있습니다.
따라서 AI와 대화하는 방식으로 AI와 대화하는 방식으로 AI "Coder Assistant"에게 도움을 요청하는 방법에 대해 이야기 해 봅시다. AI와 대화하는 방식이 모든 차이를 만듭니다.
거래는 다음과 같습니다. AI 도구는 똑똑하지만 독자가 아닙니다. 그들은 방향을 따르는 것에 대해 훌륭하지만 명확하고 구체적으로 방향이 필요합니다. 모호하거나 추측 할 공간을 떠나면 상황이 옆으로 빨리 갈 수 있습니다.
이런 식으로 생각하십시오 : 당신이 당신에게 집을 짓기 위해 계약자를 고용하고 있다고 상상해보십시오. 당신이“나에게 좋은 것을 만들어라”고 말하면, 당신이 정말로 원했던 것이 수영장이있는 3 베드룸 목장이었을 때 트리 하우스로 끝날 수 있습니다. 그러나 당신이 그들에게 청사진을 건네고“정확한 특징 으로이 정확한 집을 원한다”고 말하면 그들은 정확히 무엇을 해야하는지 알게 될 것입니다.
AI는 같은 방식으로 작동합니다. 지침이 구체적이면 출력이 더 좋습니다. “이 코드 수정”이라고 말하는 대신,“사용자가 클릭 할 때 제출 버튼의 문제를 해결하지 못한다”고 시도하십시오. "내 앱을 예쁘게 만들기"대신 "매끄럽고 전문적인 글꼴과 고품질 아이콘으로 앱의 UI를 현대화하십시오"라고 말합니다. 차이를 보시겠습니까? AI는 이제 당신이 원하는 것을 정확히 알고 있으며 따라야 할 명확한 길을 가지고 있습니다.
내가 배운 한 가지 트릭은 올바른 작업 별 문구로 시작하는 것입니다. AI를 올바른 모드로 가져 오는 비밀 소스로 생각하십시오. 다음은 다른 상황에 사용할 수있는 문구의 예입니다. 원하는만큼 복사, 조정 및 사용하십시오.
무언가가 깨질 때 :
이것은 AI가 특정 문제를 수정하는 데 집중하도록 지시합니다. 전체 코드를 다시 만들려고하는 대신 그 문제를 해결하기 위해 집이 있습니다.
Pro Tip : 특정 코드 라인과 같이 파산 한 물건을 알고 있다면 해당 세부 사항을 포함하십시오. 그리고 당신이 확실하지 않다면? 걱정할 필요가 없습니다. 문제의 증상을 가능한 한 명확하게 설명하는 데 집중하십시오.
새로운 기능을 추가 할 때 :
이 문구는 AI가 두 가지 중요한 것들을 알려주기 때문에 금으로 무게의 가치가 있습니다. (1) 추가하고자하는 것과 (2) 만지지 말라고합니다. 나를 믿으십시오, 당신은 AI가 당신의 반짝이는 새로운 기능을 추가하는 동안 실수로 무언가를 깨는 것을 원하지 않습니다. 그렇기 때문에 "다른 기능을 제거하지 않고"부분이 매우 중요합니다. 다른 모든 것을 그대로 유지합니다.
브라우저 오류를 수정 해야하는 경우 :
좋아, 이것은 가장 초보자 친화적 인 프로 팁일지도 모른다. 웹 앱을 구축하고 상황이 작동하지 않는 경우 브라우저 콘솔은 이미 범죄 현장을 알아 낸 형사와 같습니다. 이를 찾으려면 웹 페이지를 마우스 오른쪽 버튼으로 클릭하고 "검사"를 클릭하고 "콘솔"탭으로 이동하십시오. 오류 메시지가 표시됩니다. 즉, 그 복사하여 AI 도구에 붙여 넣습니다.
왜 이것이 그렇게 잘 작동합니까? 이러한 오류 메시지에는 종종 AI가 무엇이 잘못되었는지 알아내는 데 필요한 정확한 정보가 포함되어 있기 때문입니다. 앱을 수정하기위한 로드맵을 제공하는 것과 같습니다. 진지하게,이 트릭은 생명의 은인입니다.
앱의 모습을 향상시키고 싶을 때 :
진짜하자 - 디자인은 주관적입니다. 한 사람에게 멋지게 보이는 것은 다른 사람의 차 한잔이 아닐 수도 있습니다. 그렇기 때문에 AI를 "현대", "전문가"및 "고품질"과 같은 단어로 안내하는 것이 특히 중요합니다. 이러한 종류의 형용사는 AI가 원하는 전반적인 분위기를 이해하는 데 도움이됩니다.
전문가 팁 : 모양을 좋아하는 특정 앱이나 웹 사이트가 있다면 언급하십시오! 예를 들어 : "이것을 Spotify의 디자인처럼 보이게 만드십시오." AI는 그 스타일을 모방하고 프로젝트에 적용하려고합니다.
기능을 제거 할 때 :
실수로 중요한 것을 꺼내고 싶지 않기 때문에 기능을 제거하는 것은 까다로울 수 있습니다. 이 문구를 사용하면 AI는 기능을 깨끗하게 제거하지만 다른 모든 것을 정확하게 작동시켜야합니다.
실수로 무언가를 삭제할 때 :
AI에 어떤 파일을 잃어버린 파일을 알리고 컨텍스트를 제공하는 것이 중요합니다 (예 :“이 파일은 내 홈페이지의 모든 스타일을 처리했습니다”). AI는 파일을 완벽하게 복원하지 못할 수도 있지만 종종 물건을 다시 추적하기에 충분히 제공합니다.
이 장에서 빼앗는 것이 있다면, 이것을 말하십시오. 특이성은 모든 것입니다. 프롬프트에 대한 세부 사항과 명확성이 높을수록 AI가 더 잘 수행 할 수 있습니다. 내가 배운 내용은 다음과 같습니다.
이 과정은 처음에는 어리석은 느낌이 들지만, 약속할수록 연습을할수록 더 잘 얻을 수 있습니다.
AI와 협력하여 앱과 웹 사이트를 구축하는 것이 항상 원활한 항해는 아닙니다. 당신이 롤중인 것처럼 느껴지는 순간이있을 것입니다. AI 명확한 지침을 제공했거나 생각했지만 요청을 다시 제출했지만 프로젝트가 진행되지 않습니다.
이 장은 좌절하는 상황을 해결하고 자신을 막는 것에 관한 것입니다.
때때로, ai는 그냥… 그 자체를 잊어 버립니다. 자신이 반복적으로 명령을 반복하고 아무것도 변하지 않는다면 문제는 지시에 포함되지 않을 수 있습니다. 채팅 기록 일 수 있습니다.
AI 언어 모델은 현재 대화에서 이전 지침과 응답을 추적하여 작동합니다. 시간이 지남에 따라이 역사는 상충되는 맥락과 어울릴 수 있습니다. 예를 들어:
수정 사항 : AI와 새로운 대화를 시작하십시오.
Fresh를 시작하면 문제가 해결되지 않으면 문제가 코드 자체에있을 가능성이 있습니다. 모순되는 코드는 두 코드가 앱에 반대 일을하도록 지시 할 때 발생합니다. 이것은 종종 다음과 같은 경우에 발생할 수 있습니다.
예를 들어:
수정 사항 : AI에게 모순을 식별하고 해결하도록 요청하십시오. AI 어시스턴트의 채팅 기능을 사용하면 “내 코드를 검토하고 서로 모순 될 수있는 부품을 식별하십시오.” 와 같은 프롬프트를 제공 할 수 있습니다. 그런 다음 관련 섹션을 채팅에 붙여 넣습니다.
또 다른 수정 사항 : 수동으로 디버그. AI가 문제를 포착하지 않으면 (또는 더 많은 컨트롤을 원한다면) 한 번에 하나씩 앱의 조각을 테스트하십시오. 코드의 일부를 비활성화하거나 댓글을 달고 해당 섹션이 실행되지 않을 때 앱이 어떻게 작동하는지 확인하십시오. 이 프로세스는 충돌을 일으키는 특정 선을 찾는 데 도움이 될 수 있습니다.
게임 체인저는 다음과 같습니다. AI는 항상 귀하를 위해 코드를 작성할 필요는 없습니다. 또한 신뢰할 수있는 디버깅 파트너로 사용하여 질문에 답변하고 실제로 프로젝트를 변경하지 않고 문제를 안내 할 수 있습니다. 이 접근법은 더 많은 통제력을 제공하고 모든 것이 어떻게 연결되어 있는지 더 잘 이해할 수 있도록 도와줍니다.
예를 들어, 당신은 다음을 물을 수 있습니다.
이 앞뒤로는 AI에 통제를 넘겨주는 것이 아닙니다. 코딩 코치로 사용하는 것입니다. AI를 작업 집행자가 아닌 교사로 취급하면 더 빠르고 더 나은 문제를 해결하는 데 도움이되는 통찰력을 잠금 해제 할 수 있습니다.
하나의 AI 모델이 귀하에게 답변을 제공하지 않으면 작업을 수행 할 수 있습니다. 다른 모델은 다른 강점을 가지고 있습니다.
다음은 다음과 같은 방법입니다.
하나의 도구로 독점적으로 작업하더라도 다른 도구로 전환하면 귀중한 새로운 관점 (및 솔루션)을 제공 할 수 있습니다.
Changelogs는 생명의 사람입니다. 그들은 당신을 허락합니다 :
많은 도구와 IDE를 사용하면 ChangeLogs 또는 버전 기록을 활성화 할 수 있습니다. 그렇지 않은 경우 버전 컨트롤에 GIT를 사용하여 동일한 효과를 얻을 수 있습니다.
때때로, 문제는 당신이나 AI가 아닙니다. 그것은 당신이 선택한 언어입니다. 앱이 잘 작동하지 않거나 지나치게 복잡하다고 느끼면 AI에게 다음과 같이 문의하십시오.
이 하나의 변화는 게임 체인저가 될 수 있습니다.
이 장에서는 창의적이고 효과적인 방식으로 스크린 샷을 활용하는 데 중점을두고 AI 트랙 및 변경 사항을 기억하기위한 전략과 워크 플로가 생산적이고 좌절이없는 상태를 유지하는 데 중점을 둡니다.
스크린 샷은 종종 단어보다 더 많은 것을 말할 수 있습니다. 특히 UI의 무언가가 예상대로 보이거나 행동하지 않을 때. 그러나 적절한 컨텍스트가 없으면 AI는 스크린 샷을 잘못 해석하고 강조하는 문제보다는 원하는 솔루션을 나타내는 것으로 가정 할 수 있습니다. 이를 해결하려면 스크린 샷을 AI의 초점을 안내하는 정확한 프롬프트와 짝을 이루는 것이 중요합니다.
스크린 샷과 함께 명확한 설명을 제공합니다.
맥락이없는 스크린 샷은 오해로 이어질 수 있습니다. 예를 들어, 시각적 버그를 강조하는 경우 다음과 같은 설명을 포함하십시오.
스크린 샷의 주요 영역을 강조 표시하십시오.
기본 이미지 편집 도구를 사용하여 문제와 관련된 스크린 샷의 부분에 동그라미, 밑줄 또는 주석을 달 수 있습니다. 이것은 AI가 어디에 집중 해야하는지 알 수 있도록 도와줍니다.
스크린 샷이 문제를 나타내는 것을 명확히하십시오.
AI가 원하는 출력으로 이미지를 잘못 해석하지 않도록하려면이 프롬프트를 사용하십시오.
이것이 작동하는 이유 :이 문구는 AI에게 스크린 샷을 문제의 증거로 취급하도록 명시 적으로 지시하여 결과를 가정하기보다는 문제를 분석합니다.
또 다른 일반적인 문제는 AI가 앱 또는 웹 사이트 UI에 나타나지 않는 코드 변경을 생성하는 경우입니다. 이는 여러 가지 이유로 발생할 수 있으며, 이는 프로젝트 구조의 배포 문제, 구원받지 않은 변경 또는 숨겨진 버그도 발생할 수 있습니다. 스크린 샷은“이전”및“후”상태를 시각적으로 캡처하여 AI가 무엇이 잘못되었는지 정확히 파악할 수 있기 때문에 특히 유용합니다.
두 개의 스크린 샷을 찍으십시오.
다음과 같은 설명과 함께 프롬프트에 두 스크린 샷을 모두 포함시킵니다.
대상 프롬프트를 사용하여 더 깊이 갈 수 있습니다.
이것이 작동하는 이유 : 스크린 샷을 프롬프트와 결합하면 AI에 시각적 및 서면 컨텍스트가 모두 제공되므로 근본적인 문제를 더 쉽게 식별 할 수 있습니다.
스크린 샷은 UI 문제를 정확히 찾아내는 것이 아닙니다. 다음은 스크린 샷을 사용하여 AI 어시스턴트와의 커뮤니케이션을 개선 할 수있는 몇 가지 방법입니다.
오류 메시지 또는 로그 표시 :
브라우저 콘솔 또는 응용 프로그램 로그가 오류가 표시되면 스크린 샷을 찍고 다음과 같은 프롬프트를 포함시킵니다.
라이브 환경에서 예상치 못한 행동 캡처 :
배포 된 프로젝트를 디버깅 할 때 예상치 못한 동작의 스크린 샷을 찍고 대신 일어난 일을 설명하십시오.
UI에서 누락 된 요소를 강조 표시합니다.
UI (예 : 이미지, 버튼 또는 텍스트)에서 뭔가 빠진 경우 스크린 샷을 사용하여 부재를 표시하십시오.
디자인 비교 :
유사한 앱 또는 프로젝트의 디자인 스크린 샷을 영감으로 사용하고 AI에 해당 디자인의 요소를 복제하도록 요청하십시오.
AI 지원 개발에 대한 또 다른 빈번한 도전은 AI가 사전 편집을 잊어 버리거나 변경 한 변화를 잃을 때입니다. 이를 위해 AI에 프로젝트 내에서 사용자 정의 변경 추적 시스템을 만들도록 요청할 수 있습니다. 이 시스템은 무언가 잘못 될 때마다 참조 할 "메모리"역할을하는 변경 사항을 문서화합니다.
여기에는 다음이 포함될 수 있습니다.
중앙화 로그 파일 :
AI는 파일 (예 : changelog.txt )을 만들 수 있으며, 여기서 각 변경 사항에 대한 설명이 자동으로 추가됩니다.
Timestamp: 2025-01-06 11:30PM
File Edited: main.js
Description: Fixed the submit button functionality to redirect to the confirmation page.
인라인 코드 주석 :
AI에 코드에서 직접 변경 사항을 주석을달라고 요청하십시오.
// Added event listener to fix the submit button issue (2025-01-06)
submitButton.addEventListener('click', handleSubmit);
버전 번호 또는 태그 :
AI가 코드 내에 버전 번호 또는 태그를 포함시켜 필요한 경우 특정 지점으로 되돌릴 수 있습니다.
https://github.com/techcow2/cursor-agent-tracking
프로젝트를 수행 할 때는 충돌, 예기치 않은 행동 또는 지속적인 오류와 같은 문제가 발생할 수 있습니다. 이 순간은 실망 스러울 수 있지만 알려진 함정을 피하면서 AI가 이러한 문제를주의 깊게 처리하도록 안내하는 간단하고 효과적인 방법이 있습니다. 이 섹션에서는 AI가 새로운 문제를 도입하지 않고 효과적으로 문제를 해결하는 데 도움이되는 사려 깊은 프롬프트를 제작하는 방법을 보여줍니다.
때로는 문제를 해결하거나 새로운 기능을 추가하려고 할 때 AI가 실수로 동일한 실수를 반복하거나 새로운 문제를 도입 할 수 있습니다. AI가 과거 오류를 알지 못하거나 피하기에 충분한 맥락이 주어지지 않기 때문에 발생할 수 있습니다. 명확한 지침이 없으면 중요한 세부 사항을 간과하거나 의도하지 않은 부작용을 일으킬 수 있습니다.
이러한 문제를 방지하기 위해 작업 설명을 피해야 할 사항에 대한 명시적인 지침과 결합하는 프롬프트를 제작할 수 있습니다. 이를 통해 AI는주의해서 작업에 접근하고 추가 합병증을 일으키지 않고 문제를 해결하는 데 중점을 둡니다.
안정적인 상태로 되돌아 (필요한 경우) :
문제를 식별하고 문서화하십시오.
프롬프트를 제작하십시오 :
Implement [task/feature] carefully while avoiding [specific problem/error]. Ensure all existing functionality remains intact.
컨텍스트 제공 (해당되는 경우) :
The error might be caused by how the product list is being rendered. Please ensure any changes to this part of the code do not introduce new bugs.
출력 검토 및 테스트 :
웹 사이트 또는 웹 기반 애플리케이션을 구축하거나 향상시킬 때 효율성과 성능이 두 가지 중요한 요소입니다. 이러한 목표를 달성하는 한 가지 효과적인 방법은 CDN (Content Delivery Network) 라이브러리를 사용하는 것입니다. 이 장에서는 CDN 라이브러리가 무엇인지, 프로젝트에 도움이되는 방법을 안내하고 Tailwind CSS, Bootstrap, Material UI 등과 같은 가장 인기있는 라이브러리를 소개합니다. 또한 AI 어시스턴트가 이러한 라이브러리를 통합하고 사용하도록 프롬프트하는 방법에 대한 유용한 예제를 제공합니다. 코딩을 처음 접하고 개발 작업을 단순화하는 경우 AI를 사용하는 경우에도 유용합니다.
CDN (Content Delivery Network)은 위치를 기반으로 사용자에게 자바 스크립트 라이브러리, CSS 프레임 워크 또는 글꼴과 같은 웹 컨텐츠를 전달하는 지리적으로 분산 된 서버 네트워크입니다. CDN 라이브러리는 이러한 네트워크에서 호스팅되는 인기있는 프레임 워크 또는 도구 (부트 스트랩 또는 jQuery) 버전을 나타냅니다. 파일을 자신의 서버 또는 개발 컴퓨터로 다운로드하는 대신 CDN에서 직접 참조합니다.
더 빠른 로딩 시간
CDN은 사용자와 가장 가까운 서버의 파일을 제공하여 사이트로드하는 데 걸리는 시간이 줄어 듭니다.
서버의 대역폭 감소
CDN에 라이브러리 호스팅을 오프로드하면 자신의 서버가 해당 파일 다운로드를 처리 할 필요가 없음을 의미합니다.
구현의 용이성
하나 또는 두 줄의 코드로 강력한 라이브러리를 빠르게 추가 할 수 있습니다.
자동 업데이트
CDN은 일반적으로 최신 버전의 라이브러리를 호스팅하므로 최신 정보를 쉽게 유지할 수 있습니다.
캐싱 장점
사용자가 이미 다른 사이트의 CDN에서 동일한 라이브러리 또는 프레임 워크를로드 한 경우 브라우저는 캐시 버전을 사용하여로드 시간 속도를 높일 수 있습니다.
코딩을 처음 접하고 프로젝트를 설정하기 위해 AI에 의존하는 경우 AI 핸들 라이브러리 통합을하는 데 사용할 수있는 신속한 예는 다음과 같습니다.
CSS 프레임 워크 통합
예제 프롬프트 :
“기존 HTML 파일에 부트 스트랩 CDN을 사용하십시오. Navbar가 모바일에서 무너 지는지 확인하십시오. 간단한 저작권 통지와 함께 바닥 글을 바닥에 배치하십시오.”
한 프레임 워크에서 다른 프레임 워크로 마이그레이션합니다
예제 프롬프트 :
“내 프로젝트에서 CDN을 통해 Tailwind CSS를 부트 스트랩으로 교체하십시오. 기존 테일 윈드 클래스를 부트 스트랩 등가물로 신중하게 변환하여 동일한 전체 디자인을 유지하십시오.”
JavaScript 유틸리티 추가
예제 프롬프트 :
“Index.html에 CDN에서 lodash를 포함시킵니다. 그런 다음 main.js 파일에서 텍스트 입력에 Lodash의 분량 기능을 사용하는 방법을 보여줍니다.”
이 프롬프트는 AI를 사용할 라이브러리, CDN을 통해 사용하는 방법 및 구현하려는 특정 작업 또는 기능에 대한 AI 명확성을 제공합니다.
아래에는 CDN을 통해 프로젝트에 쉽게 추가 할 수있는 인기있는 라이브러리가 있습니다. 각 항목에는 설명, 사용 메모, 샘플 스 니펫 및 AI의 신속한 예제가 포함됩니다.
설명:
HTML에서 사전 정의 된 클래스를 사용하여 사용자 정의 디자인을 신속하게 구축하는 데 도움이되는 유틸리티 우선 CSS 프레임 워크.
최선의 :
많은 맞춤형 CS를 쓰지 않고 디자인을 세분화하려는 개발자.
샘플 구현 :
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
>
AI 프롬프트 예 :
“CDN을 통해 내 프로젝트에 Tailwind CSS를 추가하십시오. 헤더, 간단한 영웅 섹션 및 바닥 글로 홈페이지를 만듭니다. Tailwind 클래스를 사용하여 깨끗하고 현대적인 디자인을 보장하십시오.”
설명:
반응 형 모바일 우선 웹 사이트를 구축하기 위해 가장 널리 사용되는 CSS 프레임 워크 중 하나입니다. Navbars, Forms, Modals 등과 같은 사전 디자인 된 구성 요소가 제공됩니다.
최선의 :
최소한의 설정으로 빠르고 일관된 디자인을 원하는 초보자.
샘플 구현 :
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
AI 프롬프트 예 :
“내 웹 사이트에 최신 부트 스트랩 CDN 링크를 추가하십시오. '서비스'에 대한 드롭 다운과 오른쪽에 검색 창이있는 반응 형 Navbar를 만듭니다. 모바일 장치에서 잘 보이도록하십시오.”
설명:
버튼, 카드 및 대화 상자와 같은 즉시 사용 가능한 구성 요소를 제공하는 Google의 재료 설계 시스템을 구현하는 React 기반 라이브러리.
최선의 :
매끄럽고 현대적이며 전문적인 디자인 미학이 필요한 프로젝트에 반응합니다.
샘플 구현 :
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
>
npm install @mui/material @emotion/react @emotion/styled
(재료 UI는 주로 NPM을 권장하지만 여전히 CDN을 통해 아이콘 글꼴을 참조 할 수 있습니다.)
AI 프롬프트 예 :
“CDN의 자료 아이콘을 통합하여 React 앱에서 사용하십시오. 재료 스타일의 '카트 추가'버튼으로 제품을 표시하기위한 간단한 카드 구성 요소를 구축하십시오.”
설명:
CSS와 쉽게 스타일링 할 수있는 확장 가능한 벡터 아이콘을 제공하는 포괄적 인 아이콘 라이브러리.
최선의 :
맞춤형 SVG를 만들지 않고 소셜 미디어 아이콘, NAV 아이콘 또는 기타 도해 법을 빠르게 추가합니다.
샘플 구현 :
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
>
AI 프롬프트 예 :
“CDN을 통해 내 HTML에 굉장한 글꼴을 추가하십시오. 내 Navbar의 모든 자리 표시 자 아이콘을 'Home', 'Profile'및 'Cart'의 글꼴 멋진 아이콘으로 교체하십시오. 모바일에서 올바르게 확장하십시오.”
설명:
DOM 조작, 이벤트 처리 및 AJAX 작업을 단순화하는 것으로 알려진 고전적인 JavaScript 라이브러리.
최선의 :
광범위한 바닐라 JavaScript를 작성하지 않고 복잡한 UI 상호 작용을 원하는 레거시 프로젝트 또는 초보자.
샘플 구현 :
<script
src="https://code.jquery.com/jquery-3.6.4.min.js"
></script>
AI 프롬프트 예 :
“CDN을 통해 jQuery를 INdex.html에 추가하십시오. 사용자가 버튼을 클릭 할 때 DIV를 숨기는 방법을 보여주고 콘솔에 성공 메시지를 기록하십시오.”
설명:
딥 클로닝, 디 폴링 등을 포함하여 데이터 조작을위한 광범위한 기능을 제공하는 JavaScript 유틸리티 라이브러리.
최선의 :
배열, 객체 및 문자열에서 복잡한 작업을 단순화합니다.
샘플 구현 :
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"
></script>
AI 프롬프트 예 :
“CDN에서 Lodash를 추가하십시오. 기존 루프를 Lodash 메소드로 변환하고 검색 필드를 분해하는 방법을 보여줍니다.”
설명:
특정 클래스를 추가하여 요소에 적용 할 수있는 미리 제작 된 애니메이션 (Fade, Bounce, Slide 등)을 제공하는 CSS 라이브러리.
최선의 :
맞춤형 CSS 애니메이션을 작성하지 않고 요소에 애니메이션을 빠르게 추가합니다.
샘플 구현 :
<link
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
rel="stylesheet"
>
AI 프롬프트 예 :
“CDN을 통한 Animate.css를 포함시키고 페이지로드의 영웅 섹션에 페이드 인 애니메이션을 적용하십시오. 또한 '지금 가입'버튼에 바운스 효과를 적용하십시오.”
설명:
대화식 차트 및 그래프를 만들기위한 다목적 JavaScript 라이브러리.
최선의 :
보다 복잡한 라이브러리로 다이빙하지 않고 데이터를 시각화하는 간단한 방법을 원하는 초보자.
샘플 구현 :
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3],
backgroundColor: ['red', 'blue', 'yellow']
}]
}
});
AI 프롬프트 예 :
“CDN을 통해 Chart.js를 추가하고 월별 판매 데이터를 보여주는 막대 차트를 만듭니다. y 축을 '판매'로 표시하고 X 축으로 올해의 달에 표시하십시오.”
귀하의 필요를 식별하십시오
주로 스타일링 (CSS) 또는 JavaScript 기능에 도움이 필요한지 결정하십시오. 일부 라이브러리 (부트 스트랩 또는 테일 윈드와 같은)는 디자인에 중점을 두는 반면, jQuery 또는 Lodash와 같은 다른 라이브러리는 JavaScript 작업을 돕는 데 중점을 둡니다.
호환성을 점검하십시오
선택한 라이브러리가 이미 가지고있는 도구 또는 프레임 워크와 잘 어울리는지 확인하십시오.
활발한 커뮤니티 및 문서를 찾으십시오
잘 지원되는 라이브러리에는 일반적으로 더 나은 튜토리얼, 문제 해결을위한 대규모 커뮤니티 및 빈번한 업데이트가 있습니다.
AI에게 물어보세요
어떤 도서관을 사용할 지 확신 할 수없는 경우 AI에게 조언을 구해주십시오.
"초보자 친화적이고 사용자 정의 할 수있는 UI : Tailwind, Bootstrap 또는 Material UI에 가장 적합한 라이브러리는 무엇입니까?"
AI는 프로젝트의 맥락에서 각 선택에 대한 장단점을 설명 할 수 있습니다.
