웹 개발자를 위한 Chat GPT 프롬프트들

출처

https://www.builder.io/blog/ai-prompts-for-web-developers-chatgpt 의 프롬프트들을 따라쳐서 정리해본 자료입니다.

가능한 것들

• 코드 생성 (Code generation)
• SQL 생성 (SQL generation)
• 코드 완성 (Code completion)
• 코드 변환 (Code conversion)
• 코드 설명 (Code explanation)
• 코드 리뷰 (Code review)
• 코드 리팩토링 (Code refactoring)
• 버그 파악 및 수정 (Bug detection and fixing)
• 시스템 디자인과 아키텍처 (System design and architecture)
• 검색엔진 최적화 (Search Engine Optimizaiton)
• 목 데이터 생성 (Mock data generation)
• 테스팅 (Testing)
• 문서화 (Documentation)
• 쉘 커맨드 (Shell commands)
• 정규표현식 (Regular expressions)
• 컨텐츠 생성 (Content generation)
• 이력서, 커버레터 (Resumes and cover letters)
• 면접 준비 (Interview preparation)
• 학습 (Learning)

코드 생성 (Code generation)

• HTML, CSS, Javascript functions, SQL 등 의 코드를 생성할 수 있다.

HTML 생성 포맷

• Generate a semantic and accessible HTML and (framework) CSS [UI Component] consisting of [component parts]. The [component parts] should be [layout].

예시

• Generate a semantic and accessible HTML and Tailwind CSS "Contact Support" form consisting of the user's name, email, issue type, and message. The form elements should be stacked vertically and placed inside a card.

자바스크립트 함수 생성 포맷

• Write a [language] function. It accepts [input] and returns [output].

예시

• Write a Javascript function. It accepts a full name as input and returns avatar letters.

프레임워크 API 생성 포맷

• Write a/an [framework] API for [functionality]. It should make of [database].

예시

• Write an Express.js API to fetch the current user's profile information. It should make use of MongoDB.

예시 2

• Write an spring framework controller APIs based on java 1.8. there will be the endpoints for starting timer and stopping timer. the records will be saved in database and i will use spring data jpa.

DB SQL 생성 포맷

• The database has [comma-separated table names]. Write a [database] query to fetch [requirement].

예시

• The database has students and course tables. Write a PostgreSQL query to fetch a list of students who are enrolled in at least 3 courses.

코드 완성 (Code completion)

• 컨텍스트와 스타일에 맞는 코드를 완성시키도록 만들 수 있다.

코드 완성 포맷

• Complete the code [code snippet]

예시

Complete the code:

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

결과

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;
  case "cats":
    console.log(
      "Cats are independent creatures who offer the perfect balance of companionship and personal space. Their soft purrs and gentle kneading are a soothing presence."
    );
    break;
  case "birds":
    console.log(
      "Birds are beautiful and intelligent creatures. Their ability to fly captures our imaginations and their lovely songs bring music to our ears."
    );
    break;
  case "fish":
    console.log(
      "Fish are serene pets. Watching them glide through the water has a calming effect. Their vibrant colors and diverse shapes are fascinating to observe."
    );
    break;
  default:
    console.log("The animal is not in the list.");
    break;
}

코드 변환 (Code conversion)

• 다른 언어로 쓰인 코드를 내가 사용하는 언어로 변경해준다.

코드 변환 포맷

• Convert the below code snippet from [language/framework] to [language/framework]: [code snippet]

예시

• Convert the below code snippet from Javascript to Typescript

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

예시 결과

function nonRepeatingWords(str1: string, str2: string): string[] {
  const map: Map<string, number> = new Map();
  const res: string[] = [];
  // Concatenate the strings
  const str: string = str1 + " " + str2;
  // Count the occurrence of each word
  str.split(" ").forEach((word: string) => {
    map.has(word)
      ? map.set(word, (map.get(word) as number) + 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;
}

코드 설명 (Code explanation)

• GPT 는 코드를 읽고 이해할 수 있다.
• 읽은 내용을 기반으로 질문에 답도 가능하다.
• 복잡하게 짜여진 코드를 해석할 때 유용하다.

예시

• Explain the following [language] snippet of code: [code block]
• What does this code do: [accepted answer code from stackoverflow]

코드 리뷰 (Code review)

• 모든 잠재적인 이슈를 직접 파악하기엔 정말 어렵다.
• GPT 가 코드 스멜과 보안 이슈 등을 파악해준다.

예시

• Review the following [language] code for code smells and suggest improvements: [code block]
• Identify any security vulnerabilities in the following code: [code snippet]

코드 리팩토링 (Code refactoring)

• //TODO: refactor this code 와 같은 메세지를 남겨두고 미처 수행하지 못한 코드들을 리팩토링해준다.

예시

• Refactor the given [language] code to improve its error handling and resilience: [code block]
• Refactor the given [langauge] code to make it more modular: [code block]
• Refactor the given [language] code to improve performance: [code block]
• Refactor below component code to be responsive across mobile, tablet, and desktop screens: [code block]
• Suggest descriptive and meaningful names for variables and functions, making it easier to understand the purpose of each element in your code: [code snippet]
• Suggest ways to simplify complex conditions and make them easier to read and understand: [code snippet]

버그 파악 및 수정 (Bug detection and fixing)

• 코드에서 미처 파악하지 못한 버그가 발견될 수 있다.
• 이슈를 만들 수 있는 성가신 버그를 쉽게 발견하고 해결할 수 있다.

예시

• Find any bugs in the following code: [code snippet]
• I am getting the error [error] from the following snippet of code: [code snippet]. How can I fix it?

시스템 디자인과 아키텍처 (System design and architecture)

• 특정 기술 스택을 사용해 시스템을 설계할 수 있다.
• 다른 기술 스택 및 아키텍처와 비교하여 권장사항을 제공해줄 수 있다.
• 웹 앱, 모바일 앱, 분산 시스템을 구축할 때 ChatGPT 는 요구사항에 맞는 확장 가능한, 안정적인, 유지 보수 용이한 아키텍처 설계에 도움을 준다.

예시

• You are an expert at system design and architecture. Tell me how to design a [system]. The technology stack is [comma-separated list of technologies].
• You are an expert at system design and architecture. Tell me how to design a hotel reservation system. The technology stack is Next.js and Firebase.
• Contrast the design architecture with [comma-separated list of technologies] as the technology stack.
• Contrast the design and architecture with React and Supabase as the technology stack.

검색엔진 최적화 (Search Engine Optimization)

• 검색 엔진을 위한 최적화 그리고 베스트 프랙티스에 대한 팁을 줄 수 있다.

예시

• How to improve SEO for a landing page?
• Give an example <head> section of the HTML code that is optimized for Search Engine Optimization (SEO) for a [website].
• Give an example <head> section of the HTML code that is optimized for Search Engine Optimization (SEO) for a social networking site for athletes.

목 데이터 생성 (Mock data generation)

• 다양한 도메인 형식의 모의 데이터를 빠르게 생성할 수 있다.

예시

• Generate a sample [data format] of [number] [entity] for a [domain].
• Generate a sample JSON of 5 products for a clothing e-commerce site.
• You can also enter prompts after every response for more fine-grained control.
  • Give me a list of [number] fields for [entity] on an e-commerce site.
  • Add an "id" field that will be unique to each [entity]. Replace [existing field] with [new field]
  • Generate a sample [data format] of [number] such [entity] with realistic values.

테스팅 (Testing)

• 유닛 테스트를 짜는 것을 돕는다.
• 테스트 케이스를 만드는 것을 돕는다.
• 적절한 테스트 프레임워크나 라이브러리를 고르는 것을 돕는다.

예시

• Write unit tests for the following [library / framework] component [component code] using [testing framework / library].
• Generate a list of test cases to manually test user registration in a web/mobile application.
• What testing frameworks or libraries should i choose for a React Native app?

문서화 (Documentation)

• 머리 아픈 문서화를 도와준다.

개인적으로 문서화는 프레임워크를 통해 자동으로 하는 것이 더 낫다고 본다.

예시

• Write comments for the code below: [code snippet]
• Write JSDoc comments for the below Javascript function: [code snippet]

쉘 커맨드 (Shell commands)

• 항상 코드만 짜는 것이 아니라 쉘 명령어를 입력할 일도 많다.
• 적절한 쉘 명령어를 작성하는 것에 도움을 준다.

예시

• Write a shell command to [requirement]
• Write a shell command to delete all files with the extension '.log' in the 'logs' folder.
• Write a git command to [requirement]
• Write a git command to undo the previous commit.
• Explain the following command [command]
• Explain the following command [git switch -c feat/qwik-loaders]

정규표현식 (Regular expressions)

• 이미 만들어진 정규표현식을 알아보는데 도움을 준다.
• 특정 패턴을 매칭하는 정규표현식을 만드는 데 도움을 준다.

예시

• Explain this regular expression: [regex]
• Explain this regular expression in JavaScript: const regex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}$/;
• Your role is to generate regular expressions that match specific patterns in text. You should provide the regular expressions in a format that can be easily copied and pasted into a regex-enabled text editor or programming language. Generate a regular expression that matches [text].

컨텐트 (Content)

• 웹 사이트에 필요한 다양한 컨텐츠를 만들 수 있다.

예시

• Generate a list of frequently asked questions for an e-commerce site.
• Generate content for a course landing page. The course is "[course title]". It should include at the least, sections on what the course is, who the primary audience is, how they will benefit, the course sections and structure, the method of teaching, about the author and a pricing section. For the pricing section, provide three tiers for the user to choose from.

이력서와 커버레터 (Resumes and cover letters)

• 글자 수나 단어 수 등 여러가지 조건에 맞춰서 이력서와 커버레터를 잘 작성해준다.

예시

• Write a LinkedIn about section using my resume: [resume]. Use the keywords [comma-separated keywords]. Write in the first person and use a friendly tone of voice. Do not exceed 2,600 characters.
• I want you to act as a cover letter. I will provide you with my resume, and you will generate a cover letter to complement it. I want the cover letter to have a more [adjective] tone, as I will be applying to a [type of company] company. Following is my resume [resume]. Following is the job description [job description].
• [Your resume] Enhance my resume based on this [title] position at [company] and include bullet point achievements that show impact metrics [Job description].

Note: ChatGPT 에게 LaTex 마크업으로 결과를 작성해달라고 할 수도 있다.

면접 준비 (Interview preparation)

• 면접 준비에 도움을 준다.

예시

• I have an interview with [company name] for [job title]. Help me with answers to the following questions: 1. Information on the company, the industry, and its competitors. 2. The culture of the company. 3. Questions I can ask at the end of the interview.
• I am interviewing for a [job title] role. Please list down the 10 most asked interview questions for a [job title] position.
• I am interviewing for a Senior React Developer role. Please list down the 10 most asked interview questions for a Senior React Developer position.
• I am interviewing for a [job title] role. Please generate 10 interview questions that are specific to the job role posted below [job role].
• Ask me a random easy/medium/hard Leetcode question and evaluate my solution based on correctness, and the time and space complexity.

학습 (Learning)

• 새 언어, 베스트 프랙티스, 웹사이트 퍼포먼스를 올리는 방법 등을 배울 수 있다.

예시

• I am a web developer learning [language/ technology]. Suggest top 5 [social media] [accounts/ channels/ profiles] to follow.
• What are the best practices when creating a login form?
• Explain the importance of web accessibility and list three ways to ensure a website is accessible.
• What are some best practices for writing clean and maintainable code in [language/ framework]?
• What are the steps to create a [technology/ framework] blog app with the following requirements? 1. A listing page of all articles. 2. A detail page where you can read the article. 3. An about me page. 4. Links to social media profiles. 5. Performant.
• What are the differences between [list of similar concepts] in [language/ framework].
• What are the differences between var, let, and const keywords in JavaScript.
• Explain [language/ framework] [concept] with a real-world analogy.
• Explain JavaScript promises with a real-world analogy.
• What are the different ways to improve the performance of a website?

결론

• 코딩 작업을 간소화하기 좋다.
• 그러나 한계를 명확히 파악해야 한다.
• 지식과 기술을 보완해주는 용도로 사용하는 것이 좋다.
• 검색을 통해 결과가 진실인지 확인해야 한다.