AI연구회
경남ICT협회 AI 연구 모임
본 내용은 builder.io site에서 가져온 내용입니다. ICT협회에 조금이나 도움이 되었으면 합니다.
지루하고 반복적인 코딩 작업에 지쳐서 효율성을 최적화하고 싶다면 잘 찾아오셨습니다. ChatGPT의 기능을 사용하면 워크플로를 간소화하고 오류를 줄이며 코드 개선에 대한 통찰력을 얻을 수도 있습니다.
이 블로그 게시물에서는 ChatGPT를 사용하여 웹 개발 워크플로의 속도를 높이는 데 도움이 되는 50개 이상의 프롬프트와 전략을 제공합니다. 초보자로서 개념을 배우는 것부터 인터뷰 준비에 이르기까지 웹 개발자로서 AI를 최대한 활용하는 데 필요한 모든 것을 찾을 수 있습니다.
하지만 먼저 ChatGPT의 한계를 이해하는 것이 중요합니다. 강력한 도구이지만 ChatGPT는 자신의 지식과 기술을 대체할 수 없습니다. 또한 ChatGPT는 사실을 확인할 수 없으므로 모든 연구를 팩트체크해야 합니다. 또한 학습 데이터는 2021년까지이므로 현재 추세나 이벤트를 인식하지 못할 수 있습니다. 이러한 주의 사항을 염두에 두고 AI 기반 웹 개발의 흥미진진한 세계로 뛰어들어 보겠습니다!
https://chat.openai.com/ 에서 모든 프롬프트를 실행할 수 있습니다.
ChatGPT는 다양한 웹 개발 작업을 위한 코드를 생성하여 시간을 절약하고 효율성을 높일 수 있습니다. 의미 체계 HTML 및 CSS 코드, JavaScript 함수 및 데이터베이스 쿼리를 생성하는 데 도움이 될 수 있습니다.
프롬프트: 의미 있고 액세스 가능한 HTML 및 [구성 요소 부분]으로 구성된 (프레임워크) CSS [UI 구성 요소]를 생성합니다. [구성 요소]는 [레이아웃]이어야 합니다.
예: 사용자 이름, 이메일, 문제 유형 및 메시지로 구성된 의미 체계 HTML 및 Tailwind CSS "지원 문의" 양식을 생성합니다. 양식 요소는 수직으로 쌓아서 카드 안에 배치해야 합니다.
프롬프트: JavaScript 함수를 작성합니다. [input]을 수락하고 [output]을 반환합니다.
예제: JavaScript 함수를 작성합니다. 전체 이름을 입력으로 받아들이고 아바타 문자를 반환합니다.
프롬프트: [기능]에 대한 [프레임워크] API를 작성합니다. [database]를 사용해야 합니다.
예: Express.js API를 작성하여 현재 사용자의 프로필 정보를 가져옵니다. MongoDB를 사용해야합니다.
프롬프트: 데이터베이스에 [쉼표로 구분된 테이블 이름]이 있습니다. [database] 쿼리를 작성하여 [requirement]를 가져옵니다.
예: 데이터베이스에는 학생 및 코스 테이블이 있습니다. PostgreSQL 쿼리를 작성하여 3개 이상의 과정에 등록한 학생 목록을 가져옵니다.
AI의 힘으로 ChatGPT는 컨텍스트와 스타일에 맞는 코드 완성을 제안할 수도 있습니다.
프롬프트: 코드 완성[코드 조각]
예: 코드를 완성합니다.
const animals = ["dogs", "cats", "birds", "fish"]; let animal = animals[Math.floor(Math.random() * animals.length)]; switch (animal) { case "dogs": console.log( "Dogs are wonderful companions that bring joy and loyalty into our lives. Their wagging tails and wet noses never fail to make us smile." ); break; }
일반적으로 프롬프트를 콜론으로 끝내고 코드 블록을 새 줄에 붙여넣는 것이 좋습니다. 삼중 백틱 '''[code]''' 또는 삼중 따옴표 """[code]"""로 코드 블록을 구분하는 것도 좋은 옵션입니다.
개발자는 다른 코드로 작성된 코드로 작업해야 할 수 있습니다. 언어 또는 프레임워크. ChatGPT를 사용하면 코드 스니펫을 쉽게 변환할 수 있습니다 한 언어 또는 프레임워크에서 다른 언어 또는 프레임워크로.
프롬프트: 아래 코드 조각을 [language/ framework]에서 [language/ framework]로: [코드 조각]
예: 아래 코드 조각을 JavaScript에서 타입스크립트
function nonRepeatingWords(str1, str2) { const map = new Map(); const res = []; // Concatenate the strings const str = str1 + " " + str2; // Count the occurrence of each word str.split(" ").forEach((word) => { map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1); }); // Select words which occur only once for (let [key, val] of map) { if (val === 1) { res.push(key); } } return res; }
프롬프트 : [CSS 프레임 워크]를 사용하여 아래 코드를 사용하여 [CSS 프레임 워크] : [코드 스 니펫]
예: Bootstrap을 사용하여 아래 코드를 변환하여 Tailwind CSS: [코드 조각]
ChatGPT는 설명을 제공하거나 답변을 통해 코드를 이해하는 데 도움이 될 수 있습니다 그것에 대한 구체적인 질문. 이는 작업할 때 특히 유용할 수 있습니다. 다른 사람이 작성하거나 복잡한 코드를 이해하려고 할 때 코드입니다.
프롬프트: 다음 [language] 코드 스니펫을 설명합니다. [코드 블록]
프롬프트: 이 코드는 무엇을 합니까: [수락된 응답 코드 스택 오버플로]
코드 검토는 소프트웨어 개발의 필수적인 측면이며 종종 혼자 일할 때 발생할 수 있는 모든 문제를 파악하기 어렵습니다. 와 ChatGPT의 도움으로 코드 냄새와 보안 취약점을 식별할 수 있습니다. 코드에서 보다 효율적이고 안전하게 만들 수 있습니다.
프롬프트: 코드 냄새에 대한 다음 [언어] 코드를 검토합니다. 개선 사항 제안: [코드 블록]
프롬프트: 보안 취약성을 식별합니다. 다음 코드: [코드 조각]
댓글을 작성하고 한 번도 본 적이 없습니까? ChatGPT는 너무 많은 시간이나 노력을 들이지 않고도 코드를 리팩토링하고 개선할 수 있는 방법을 제안함으로써 이를 줄이는 데 도움이 될 수 있습니다.//todo: refactor this code
//todo: refactor this code
프롬프트: 지정된 [language] 코드를 리팩터링하여 오류 처리 및 복원력 향상: [code block]
프롬프트 : 주어진 [language] 코드를 리팩토링하여 모듈식으로 만듭니다 : [code block]
프롬프트: 성능 향상을 위해 지정된 [언어] 코드를 리팩터링: [코드 블록]
프롬프트: 모바일, 태블릿 및 데스크톱 화면에서 반응하도록 아래 구성 요소 코드를 리팩터링합니다. [코드 블록]
프롬프트: 변수 및 함수에 대한 설명적이고 의미 있는 이름을 제안하여 코드에 있는 각 요소의 용도를 더 쉽게 이해할 수 있도록 합니다.
프롬프트: 복잡한 조건문을 단순화하고 읽고 이해하기 쉽게 만드는 방법 제안: [코드 조각]
개발자로서 우리는 코드의 모든 버그를 포착하는 것이 항상 쉬운 것은 아니라는 것을 알고 있습니다. 그러나 ChatGPT 프롬프트의 도움으로 문제를 일으킬 수 있는 성가신 버그를 쉽게 식별하고 해결할 수 있습니다.
프롬프트: 다음 코드에서 버그를 찾습니다: [코드 조각]
프롬프트 : 다음 코드 조각 [코드 조각]에서 [error] 오류가 발생합니다. 어떻게 고칠 수 있습니까?
ChatGPT는 특정 기술 스택을 사용하여 시스템을 설계하거나 설계 및 아키텍처를 다른 기술 스택과 대조하는 방법에 대한 귀중한 통찰력과 권장 사항을 제공할 수 있습니다. 웹 애플리케이션, 모바일 앱 또는 분산 시스템을 구축하든 ChatGPT는 요구 사항을 충족하는 확장 가능하고 안정적이며 유지 관리 가능한 아키텍처를 설계하는 데 도움이 될 수 있습니다.
프롬프트: 시스템 설계 및 아키텍처 전문가입니다. [시스템]을 설계하는 방법을 알려주세요. 기술 스택은 [쉼표로 구분된 기술 목록]입니다.
예: 시스템 설계 및 아키텍처 전문가입니다. 호텔 예약 시스템을 설계하는 방법을 알려주세요. 기술 스택은 Next.js 및 Firebase입니다.
프롬프트: 기술 스택으로 [쉼표로 구분된 기술 목록]을 사용하여 디자인 및 아키텍처를 대조합니다.
예: 기술 스택으로 React 및 Supabase를 사용하여 설계 및 아키텍처를 대조합니다.
ChatGPT는 검색 엔진에 맞게 웹사이트를 최적화하기 위한 팁과 모범 사례를 제공할 수 있습니다.
프롬프트: 랜딩 페이지의 SEO를 개선하는 방법은 무엇입니까?
프롬프트: [웹사이트]의 검색 엔진 최적화(SEO)에 최적화된 HTML 코드의 예<head> 섹션을 제공합니다.
예: 운동선수를 위한 소셜 네트워킹 사이트의 검색 엔진 최적화(SEO)에 최적화된 HTML 코드의 <head> 섹션을 예로 들어 보겠습니다.
테스트 목적이든 데모 목적이든 현실적이고 대표적인 데이터를 보유하는 것이 중요합니다. ChatGPT를 사용하면 다양한 도메인 및 형식에 대한 모의 데이터를 빠르게 생성할 수 있습니다.
프롬프트: [도메인]에 대해 [number] [entity]의 샘플 [데이터 형식]을 생성합니다.
예: 의류 전자 상거래 사이트에 대한 5개 제품의 샘플 JSON 생성
프롬프트: 보다 세밀한 제어를 위해 모든 응답 후에 프롬프트를 입력할 수도 있습니다
ChatGPT는 단위 테스트 작성, 테스트 사례 목록 생성, 적절한 테스트 프레임워크 또는 라이브러리 선택에 도움을 줄 수 있습니다.
프롬프트: [testing framework/ library]를 사용하여 다음 [library/ framework] 구성 요소 [component code]에 대한 단위 테스트를 작성합니다.
프롬프트: 웹/모바일 애플리케이션에서 사용자 등록을 수동으로 테스트하기 위한 테스트 사례 목록을 생성합니다.
프롬프트: React Native 앱에 대해 어떤 테스트 프레임워크 또는 라이브러리를 선택해야 하나요?
단독 프로젝트를 진행하든 팀 프로젝트를 진행하든 좋은 문서화를 통해 시간을 절약하고 골치 아픈 문제를 예방할 수 있습니다.
프롬프트: 아래 코드에 대한 주석 작성: [코드 조각]
프롬프트 : 아래 JavaScript 함수에 대한 JSDoc 주석 작성 : [코드 스 니펫]
개발자는 코드 작성에만 국한되지 않습니다. ChatGPT는 Git을 사용하여 셸 명령 및 버전 제어를 지원할 수 있습니다
프롬프트: [requirement]에 셸 명령 쓰기
예: 'logs' 폴더에서 확장자가 '.log'인 모든 파일을 삭제하는 셸 명령을 작성합니다.
프롬프트: [requirement]에 git 명령 작성
예: 이전 커밋을 실행 취소하는 git 명령 작성
Prompt: Explain the following command [command]
Example: Explain the following command [git switch -c feat/qwik-loaders]
ChatGPT를 사용하면 복잡한 정규식을 이해하고 텍스트의 특정 패턴과 일치하는 정규식을 생성할 수 있습니다.
프롬프트: 이 정규식 설명: [regex]
예: JavaScript에서 이 정규식을 설명하십시오. const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\\.[A-Za-z]{2,}$/;
const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\\.[A-Za-z]{2,}$/;
프롬프트: 사용자의 역할은 텍스트의 특정 패턴과 일치하는 정규식을 생성하는 것입니다. 정규식을 쉽게 복사하여 정규식 사용 텍스트 편집기 또는 프로그래밍 언어에 붙여넣을 수 있는 형식으로 제공해야 합니다. [text]와 일치하는 정규식을 생성합니다.
ChatGPT를 사용하면 특정 요구 사항에 맞게 다양한 목적으로 콘텐츠를 생성할 수 있습니다.
프롬프트: 전자 상거래 사이트에 대한 질문과 대답 목록 생성
프롬프트: 코스 랜딩 페이지에 대한 콘텐츠를 생성합니다. 강좌는 "[강좌 제목]"입니다. 여기에는 최소한 코스가 무엇인지, 주요 청중이 누구인지, 그들이 어떻게 혜택을 받을 것인지, 코스 섹션 및 구조, 교수 방법, 저자에 대한 섹션, 가격 섹션이 포함되어야 합니다. 가격 책정 섹션의 경우 사용자가 선택할 수 있는 세 가지 계층을 제공합니다.
매력적이고 세련된 이력서와 커버 레터를 작성하는 것은 어려운 작업일 수 있지만 ChatGPT의 도움으로 그럴 필요는 없습니다. ChatGPT는 모든 문자 또는 단어 제한도 엄격하게 준수합니다.
프롬프트: 내 이력서를 사용하여 LinkedIn 정보 섹션을 작성하십시오: [résumé]. 키워드[쉼표로 구분된 키워드]를 사용합니다. 2인칭으로 쓰고 친근한 어조를 사용하십시오. 600,<>자를 초과할 수 없습니다.
프롬프트: 커버 레터 작가 역할을 해줬으면 좋겠어요. 나는 당신에게 내 이력서를 제공할 것이고, 당신은 그것을 보완할 커버 레터를 생성할 것입니다. 나는 커버 레터가 [형용사] 어조를 더 갖기를 원하는데, 나는 [회사 유형] 회사에 지원할 것입니다. 다음은 제 이력서입니다. 다음은 직무 기술서[직무 설명]입니다.
프롬프트: [이력서] [회사]의 이 [직위] 직위를 기반으로 이력서를 개선하고 영향력과 지표 [직무 설명]를 보여주는 글머리 기호 성과를 포함합니다. 참고: ChatGPT에 LaTex 마크업으로 출력을 생성하도록 요청할 수 있습니다.
ChatGPT의 도움으로 다가오는 면접을 잘 준비할 수 있습니다.
프롬프트: [직책]에 대해 [회사 이름]과 인터뷰가 있습니다. 다음 질문에 대한 답변을 도와주세요.
프롬프트: [직책] 역할에 대해 면접을 보고 있습니다. [직책] 직책에 대해 가장 많이 묻는 10가지 면접 질문을 나열하십시오.
예: 저는 선임 React 개발자 역할에 대해 인터뷰하고 있습니다. 선임 React 개발자 직책에 대해 가장 많이 묻는 10가지 인터뷰 질문을 나열하십시오.
프롬프트: [직책] 역할에 대해 면접을 보고 있습니다. 아래에 게시된 직무 역할과 관련된 10개의 면접 질문을 생성하십시오. [직무 역할]
프롬프트 : 무작위로 쉬운 / 중간 / 어려운 Leetcode 질문을하고 정확성과 시간 및 공간 복잡성을 기반으로 솔루션을 평가하십시오.
웹 개발에서 학습은 멈추지 않습니다. 새로운 프로그래밍 언어를 배우거나, 모범 사례를 이해하거나, 웹사이트 성능을 개선하는 등 ChatGPT가 지원합니다.
프롬프트: 저는 [언어/기술]을 배우는 웹 개발자입니다. 팔로우할 상위 5개 [소셜 미디어] [계정/채널/프로필]을 제안합니다.
프롬프트: 로그인 양식을 만들 때 가장 좋은 방법은 무엇입니까?
프롬프트: 웹 접근성의 중요성을 설명하고 웹 사이트에 액세스할 수 있도록 하는 세 가지 방법을 나열합니다.
프롬프트 : [언어 / 프레임 워크]에서 깨끗하고 유지 관리 가능한 코드를 작성하기위한 모범 사례는 무엇입니까?
프롬프트: 다음 요구 사항이 있는 [기술/프레임워크] 블로그 앱을 만드는 단계는 무엇인가요?
프롬프트 : [언어 / 프레임 워크]의 [유사한 개념 목록]의 차이점은 무엇입니까?
예: JavaScript에서 var, let 및 const 키워드의 차이점은 무엇입니까?
프롬프트: 실제 비유로 [언어/프레임워크] [개념]을 설명합니다.
예: 실제 비유로 JavaScript promise 설명
프롬프트: 웹 사이트의 성능을 향상시키는 다른 방법은 무엇입니까?
웹 개발자인 경우 ChatGPT를 사용하면 코딩 작업을 간소화하는 프롬프트와 전략을 제공하여 워크플로를 최적화하고 효율성을 높일 수 있습니다. ChatGPT는 강력한 도구이지만 한계를 염두에 두고 지식과 기술을 보완하는 데 사용하는 것이 중요합니다. 연구를 팩트체크하고 최신 동향을 파악하면 웹 개발에서 AI의 이점을 최대한 활용할 수 있습니다. ChatGPT를 귀중한 리소스로 사용하면 자신 있게 웹 개발의 세계를 탐색하고 기술을 향상시킬 수 있습니다.
(원본 Site: 50+ ChatGPT Prompts for Web Developers (builder.io)
위 원본 Site를 클릭하면 바로 원본 Site로 이동합니다. 참고 하세요
기업 홍보를 위한 확실한 방법협회 홈페이지에 회사정보를 보강해 보세요.