(번역) 웹 개발자를 위한 50개 이상의 ChatGPT 프롬프트

50+ ChatGPT Prompts for Web Developers

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt

50+ ChatGPT Prompts for Web Developers

❗Deepl을 사용해서 번역한 내용입니다.

---

지루하고 반복적인 코딩 작업에 지쳐서 효율성을 최적화하고 싶으시다면 제대로 찾아오셨습니다. ChatGPT의 강력한 기능으로 워크플로를 간소화하고 오류를 줄이며 코드 개선에 대한 인사이트를 얻을 수 있습니다.

이 블로그 게시물에서는 ChatGPT를 사용하여 웹 개발 워크플로우의 속도를 높이는 데 도움이 되는 50가지 이상의 프롬프트와 전략을 제공합니다. 초보자를 위한 개념 학습부터 면접 준비까지, 웹 개발자로서 AI를 최대한 활용하는 데 필요한 모든 것을 찾을 수 있습니다.

하지만 먼저 ChatGPT의 한계를 이해하는 것이 중요합니다. 강력한 도구이긴 하지만 ChatGPT가 여러분의 지식과 기술을 대체할 수는 없습니다. 또한 ChatGPT는 사실을 검증할 수 없으므로, 이 도구가 제공하는 모든 리서치에 대해 사실 확인을 해야 합니다. 또한, 학습 데이터는 2021년까지만 제공되므로 최신 트렌드나 이벤트를 인식하지 못할 수도 있습니다. 이러한 주의 사항을 염두에 두고 흥미진진한 AI 기반 웹 개발의 세계로 뛰어들어 봅시다!

 

🔎 https://chat.openai.com/ 에서 모든 프롬프트를 실행할 수 있습니다.

 

코드 생성

ChatGPT는 다양한 웹 개발 작업을 위한 코드를 생성하여 시간을 절약하고 효율성을 높일 수 있도록 도와줍니다. 시맨틱 HTML 및 CSS 코드, 자바스크립트 함수, 데이터베이스 쿼리까지 생성할 수 있습니다.

 

프롬프트: [컴포넌트 파트]로 구성된 시맨틱하고 접근 가능한 HTML 및 (프레임워크) CSS [UI 컴포넌트]를 생성합니다. 컴포넌트 파트]는 [레이아웃]이어야 합니다.

예시: 사용자의 이름, 이메일, 문제 유형 및 메시지로 구성된 시맨틱 HTML 및 Tailwind CSS "지원팀에 문의" 양식을 생성합니다. 양식 요소는 세로로 쌓아서 카드 안에 배치해야 합니다.

프롬프트: JavaScript 함수를 작성합니다. 이 함수는 [입력]을 받고 [출력]을 반환합니다.

예시: JavaScript 함수를 작성합니다. 이 함수는 전체 이름을 입력으로 받고 아바타 문자를 반환합니다.

프롬프트: 기능]에 대한 [프레임워크] API를 작성하세요. 데이터베이스]를 사용해야 합니다.

예시: 현재 사용자의 프로필 정보를 가져오기 위한 Express.js API를 작성하세요. MongoDB를 사용해야 합니다.

프롬프트: 데이터베이스에는 [쉼표로 구분된 테이블 이름]이 있습니다. 요구 사항]을 가져오기 위한 [데이터베이스] 쿼리를 작성하세요.

예시: 데이터베이스에 학생 및 코스 테이블이 있습니다. 3개 이상의 코스에 등록한 학생의 목록을 가져오기 위한 PostgreSQL 쿼리를 작성합니다.

 

코드 완성

ChatGPT는 AI의 강력한 기능을 통해 사용자의 상황과 스타일에 맞는 코드 완성도를 제안할 수도 있습니다.

프롬프트: 코드 완성 [코드 스니펫]

예시: 코드를 완성합니다:

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;
}

🔎 일반적으로 프롬프트를 콜론으로 끝내고 코드 블록을 새 줄에 붙여넣는 것이 좋습니다. 세 개의 백틱 ```[코드]``` 또는 세 개의 따옴표 """[코드]"""로 코드 블록을 구분하는 것도 좋은 옵션입니다.

코드 변환

개발자는 다른 언어나 프레임워크로 작성된 코드로 작업해야 할 수도 있습니다. ChatGPT를 사용하면 코드 조각을 한 언어 또는 프레임워크에서 다른 언어로 쉽게 변환할 수 있습니다.

프롬프트: 아래 코드 조각을 [언어/프레임워크]에서 [언어/프레임워크]로 변환하세요: 코드 스니펫]: [코드 스니펫

예시: 아래 코드 스니펫을 자바스크립트에서 타입스크립트로 변환하세요.

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 프레임워크]를 사용하도록 변환하세요: 코드 조각]: [코드 스니펫

예시: 부트스트랩을 사용하여 아래 코드를 테일윈드 CSS를 사용하도록 변환합니다: [코드 스니펫]

코드 설명

ChatGPT는 코드에 대한 설명을 제공하거나 특정 질문에 답변하여 코드를 이해하는 데 도움을 줄 수 있습니다. 다른 사람이 작성한 코드로 작업하거나 복잡한 코드를 이해하려고 할 때 특히 유용할 수 있습니다.

프롬프트: 다음 [언어] 코드 스니펫을 설명하세요: [코드 블록]

프롬프트: 이 코드의 기능은 무엇인가요? [스택 오버플로우에서 허용된 응답 코드]

코드 리뷰

코드 리뷰는 소프트웨어 개발의 필수적인 측면이며, 혼자서 작업할 때는 모든 잠재적 문제를 파악하기 어려울 수 있습니다. ChatGPT를 사용하면 코드에서 코드 냄새와 보안 취약점을 식별하여 보다 효율적이고 안전한 코드를 만들 수 있습니다.

프롬프트: 다음 [언어] 코드에서 코드 냄새를 검토하고 개선 사항을 제안하세요: [코드 블록]

프롬프트: 다음 코드에서 보안 취약점을 식별하세요: [코드 스니펫]

코드 리팩터링

이 코드 주석을 리팩터링하기 위해 //todo: 리팩터링을 작성했지만 실행에 옮기지 못한 적이 있나요? ChatGPT는 많은 시간이나 노력을 들이지 않고도 코드를 리팩터링하고 개선할 수 있는 방법을 제안하여 이러한 문제를 줄일 수 있습니다.

프롬프트: 주어진 [언어] 코드를 리팩터링하여 오류 처리 및 복원력을 개선하세요: [코드 블록]

프롬프트: 주어진 [언어] 코드를 리팩터링하여 더 모듈화하세요: [코드 블록]

프롬프트: 주어진 [언어] 코드를 리팩터링하여 성능을 개선하세요: [코드 블록]

프롬프트: 모바일, 태블릿, 데스크톱 화면에서 반응하도록 아래 컴포넌트 코드를 리팩터링하세요: [코드 블록]

프롬프트: 변수와 함수에 대해 설명적이고 의미 있는 이름을 제안하여 코드에서 각 요소의 목적을 더 쉽게 이해할 수 있도록 합니다: [코드 스니펫]

프롬프트: 복잡한 조건문을 단순화하여 읽고 이해하기 쉽게 만드는 방법을 제안: [코드 스니펫]

버그 감지 및 수정

개발자로서 코드의 모든 버그를 찾아내는 것이 항상 쉬운 일은 아니라는 것을 알고 있습니다. 하지만 ChatGPT 프롬프트의 도움으로 문제를 일으킬 수 있는 성가신 버그를 쉽게 식별하고 해결할 수 있습니다.

프롬프트: 다음 코드에서 버그를 찾아보세요: [코드 스니펫]

프롬프트: 다음 코드 조각에서 [오류]가 발생했습니다: [코드 스니펫]. 어떻게 수정할 수 있나요?

시스템 설계 및 아키텍처

ChatGPT는 특정 기술 스택을 사용하여 시스템을 설계하거나 다른 기술 스택과 설계 및 아키텍처를 대조하는 방법에 대한 귀중한 인사이트와 권장 사항을 제공할 수 있습니다. 웹 애플리케이션, 모바일 앱 또는 분산 시스템을 구축할 때 ChatGPT는 필요에 맞는 확장 가능하고 안정적이며 유지 관리가 가능한 아키텍처를 설계하는 데 도움을 줄 수 있습니다.

프롬프트: 귀하는 시스템 설계 및 아키텍처 전문가입니다. 시스템]을 설계하는 방법을 알려주세요. 기술 스택은 [쉼표로 구분된 기술 목록]입니다.

 

예시: 귀하는 시스템 설계 및 아키텍처 전문가입니다. 호텔 예약 시스템을 설계하는 방법을 알려주세요. 기술 스택은 Next.js와 Firebase입니다.

프롬프트: 설계와 아키텍처를 기술 스택으로 [쉼표로 구분된 기술 목록]과 대조하세요.

예시: 디자인 및 아키텍처를 기술 스택으로 React 및 Supabase와 대조하세요.

검색 엔진 최적화

ChatGPT는 검색 엔진에 맞게 웹사이트를 최적화하기 위한 팁과 모범 사례를 제공할 수 있습니다.

프롬프트: 랜딩 페이지의 SEO를 개선하는 방법은 무엇인가요?

프롬프트: [웹사이트]의 검색 엔진 최적화(SEO)에 최적화된 HTML 코드의 <head> 섹션을 예로 들어 보세요.

예시: 운동선수용 소셜 네트워킹 사이트의 검색 엔진 최적화(SEO)에 최적화된 HTML 코드의 <head> 섹션을 예로 들어 설명하세요.

모의 데이터 생성

테스트 목적이든 데모 목적이든, 현실적이고 대표적인 데이터를 확보하는 것은 매우 중요합니다. ChatGPT를 사용하면 다양한 도메인과 형식의 모의 데이터를 빠르게 생성할 수 있습니다.

프롬프트: [도메인]에 대한 [번호] [엔티티]의 [데이터 형식] 샘플을 생성하세요.

예시: 의류 전자상거래 사이트에 대한 5개 제품의 샘플 JSON 생성하기

프롬프트: 모든 응답 뒤에 프롬프트를 입력하여 보다 세밀하게 제어할 수도 있습니다.

1. 이커머스 사이트의 [엔티티]에 대한 [숫자] 필드 목록을 알려주세요.
2. 각 [엔티티]에 고유한 "ID" 필드를 추가합니다. 기존 필드]를 [새 필드]로 바꾸기.
3. 해당 [엔티티]의 [숫자] 샘플 [데이터 형식]을 실제 값으로 생성합니다.

테스트

ChatGPT는 단위 테스트 작성, 테스트 사례 목록 생성, 적합한 테스트 프레임워크 또는 라이브러리 선택에 도움을 줄 수 있습니다.

프롬프트: 테스트 프레임워크/라이브러리]를 사용하여 다음 [라이브러리/프레임워크] 구성 요소 [구성 요소 코드]에 대한 단위 테스트를 작성하세요.

프롬프트: 웹/모바일 애플리케이션에서 사용자 등록을 수동으로 테스트하기 위한 테스트 사례 목록을 생성하세요.

프롬프트: React Native 앱에 어떤 테스트 프레임워크 또는 라이브러리를 선택해야 하나요?

문서

개인 프로젝트든 팀 프로젝트든, 좋은 문서는 시간을 절약하고 나중에 골치 아픈 일을 방지할 수 있습니다.

프롬프트: 아래 코드에 코멘트를 작성하세요: [코드 스니펫]

프롬프트: 아래 JavaScript 함수에 대한 JSDoc 주석을 작성하세요: [코드 스니펫]

셸 명령

개발자는 코드 작성에만 국한되지 않습니다. ChatGPT는 셸 명령과 Git을 사용한 버전 관리를 지원할 수 있습니다.

프롬프트: 요구 사항]에 셸 명령을 작성하세요.

예시: 셸 명령을 작성하여 'logs' 폴더에서 확장자가 '.log'인 모든 파일을 삭제합니다.

프롬프트: 요구사항]에 git 명령을 작성하세요.

예시: 이전 커밋을 되돌리려면 git 명령을 작성한다.

프롬프트: 다음 명령 [command]를 설명한다.

예시: 다음 명령을 설명한다 [git switch -c feat/qwik-loaders].

정규 표현식

ChatGPT를 사용하면 복잡한 정규식을 이해하고 텍스트의 특정 패턴과 일치하는 정규식을 생성할 수 있습니다.

프롬프트: 이 정규식을 설명하세요: [정규식]

예시: 이 정규식을 JavaScript로 설명하세요: const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$/;

프롬프트: 여러분의 역할은 텍스트의 특정 패턴과 일치하는 정규식을 생성하는 것입니다. 정규식을 정규식이 지원되는 텍스트 편집기나 프로그래밍 언어에 쉽게 복사하여 붙여넣을 수 있는 형식으로 제공해야 합니다. 텍스트]와 일치하는 정규식을 생성합니다.

콘텐츠

ChatGPT를 사용하면 특정 요구에 맞게 다양한 목적에 맞는 콘텐츠를 생성할 수 있습니다.

프롬프트: 이커머스 사이트에 대한 자주 묻는 질문 목록 생성하기

프롬프트: 코스 랜딩 페이지용 콘텐츠를 생성합니다. 코스는 "[코스 제목]"입니다. 최소한 강좌가 무엇인지, 주요 대상은 누구인지, 어떤 혜택을 받을 수 있는지, 강좌 섹션 및 구조, 교육 방법, 저자 소개, 가격 섹션이 포함되어야 합니다. 가격 섹션의 경우 사용자가 선택할 수 있는 세 가지 계층을 제공합니다.

이력서 및 커버 레터

매력적이고 세련된 이력서와 커버 레터를 작성하는 것은 어려운 작업이 될 수 있지만 ChatGPT의 도움을 받으면 그럴 필요가 없습니다. ChatGPT는 글자 수나 단어 수 제한도 철저히 준수합니다.

프롬프트: 내 이력서를 사용하여 LinkedIn 소개 섹션을 작성하세요: [이력서]. 쉼표로 구분된 키워드]를 사용합니다. 1인칭으로 작성하고 친근한 어조를 사용합니다. 2,600자를 초과하지 마세요.

프롬프트: 커버 레터 작성자로 활동해 주셨으면 합니다. 제 이력서를 제공하면 이를 보완할 커버 레터를 작성해 주세요. 저는 [회사 유형] 회사에 지원할 것이므로 커버 레터에 [형용사] 톤이 더 많았으면 합니다. 다음은 제 이력서 [이력서]입니다. 다음은 직무 설명 [직무 설명]입니다.

프롬프트: [이력서] [회사]의 이 [직책] 직책을 기반으로 이력서를 보강하고 영향력과 지표를 보여주는 글머리 기호 업적 [직무 설명]을 포함하세요. 참고: ChatGPT에 LaTex 마크업으로 출력을 생성하도록 요청할 수 있습니다.

면접 준비

ChatGPT의 도움을 받으면 다가오는 면접을 잘 준비할 수 있습니다.

프롬프트: 회사명]과 [직책]에 대한 면접이 있습니다. 다음 질문에 대한 답변을 도와주세요:

1. 회사, 업계 및 경쟁업체에 대한 정보
2. 회사의 문화
3. 면접이 끝날 때 물어볼 수 있는 질문

프롬프트: [직책] 직책에 대한 면접을 보고 있습니다. 직책] 직위에 대해 가장 많이 묻는 면접 질문 10가지를 적어주세요.

예시: 시니어 React 개발자 직책에 대한 면접을 보고 있습니다. 시니어 리액트 개발자 직책에 대해 가장 많이 묻는 면접 질문 10가지를 적어주세요.

프롬프트: 저는 [직책] 역할에 대해 면접을 보고 있습니다. 아래에 게시된 [직책] 직무와 관련된 면접 질문 10개를 생성해 주세요.

프롬프트: 쉬운/중간/어려운 리트코드 질문을 무작위로 던지고 정답과 시간 및 공간의 복잡성을 기준으로 저의 솔루션을 평가해 주세요.

학습

웹 개발에서 배움은 멈추지 않습니다. 새로운 프로그래밍 언어를 배우든, 모범 사례를 이해하든, 웹사이트 성능을 개선하든, ChatGPT가 도와드릴 수 있습니다.

프롬프트: 저는 [언어/기술]을 배우는 웹 개발자입니다. 팔로우할 [소셜 미디어] [계정/채널/프로필] 상위 5개를 추천하세요.

프롬프트: 로그인 양식을 만들 때 모범 사례는 무엇인가요?

프롬프트: 웹 접근성의 중요성을 설명하고 웹사이트의 접근성을 보장하는 세 가지 방법을 나열하세요.

프롬프트: 언어/프레임워크]로 깔끔하고 유지 관리 가능한 코드를 작성하기 위한 모범 사례에는 어떤 것이 있나요?

프롬프트: 다음 요구 사항을 충족하는 [기술/프레임워크] 블로그 앱을 만들려면 어떤 단계를 거쳐야 하나요?

1. 모든 문서의 목록 페이지
2. 글을 읽을 수 있는 상세 페이지
3. 내 정보 페이지
4. 소셜 미디어 프로필 링크
5. 수행자

프롬프트: 언어/프레임워크]에서 [유사한 개념 목록]의 차이점은 무엇인가요?

예시: JavaScript에서 var, let, const 키워드의 차이점은 무엇인가요?

프롬프트: 실제 비유를 들어 [언어/프레임워크] [개념]을 설명하세요.

예시: 실제 세계 비유를 통해 JavaScript 약속을 설명하세요.

프롬프트: 웹사이트의 성능을 개선하는 다양한 방법에는 어떤 것이 있나요?

결론

웹 개발자라면 ChatGPT를 사용하면 코딩 작업을 간소화하기 위한 프롬프트와 전략을 제공하여 워크플로를 최적화하고 효율성을 높일 수 있습니다. ChatGPT는 강력한 도구이지만, 그 한계를 염두에 두고 자신의 지식과 기술을 보완하는 용도로 사용하는 것이 중요합니다. 연구를 통해 사실을 확인하고 최신 트렌드를 파악하면 웹 개발에서 AI의 이점을 충분히 활용할 수 있습니다. ChatGPT를 귀중한 리소스로 활용하면 웹 개발의 세계를 자신감 있게 탐색하고 기술을 향상시킬 수 있습니다.

반응형