Chat GPT를 이용해 더 똑똑하게 질문하고, 문제를 TDD적으로 해결해 나가는 방법

Jeong·2023년 8월 8일

Chat GPT TDD적으로 해결하기 똑똑하게 질문하기

Chat GPT를 이용해 더 똑똑하게 질문하기

최근에 Chat 해결하고자 했던 것이 있나요?

Chat GPT를 이용해서 더 똑똑하게 질문해봅시다.

최근에 내가 chatGPT로 해결하고자 했던 것

div와 div 안에 있는 img 태그에 모두 onClick 이벤트를 주었습니다. 이때 img 태그에는 왜 e.stopPropagation 를 하는지 궁금했습니다.

그때 넣었던 프롬프트

div 안에 img 태그가 있습니다. img 태그를 onClick 할 때 e.stopPropagation 를 하는 이유를 알려주세요.

예시는 다음과 같습니다.

import { useState } from 'react';

export default function Picture() {
  const [isActive, setIsActive] = useState(false);

  let backgroundClassName = 'background';
  let pictureClassName = 'picture';
  if (isActive) {
    pictureClassName += ' picture--active';
  } else {
    backgroundClassName += ' background--active';
  }

  return (
    <div
      className={backgroundClassName}
      onClick={() => setIsActive(false)}
    >
      <img
        onClick={e => {
          e.stopPropagation();
          setIsActive(true);
        }}
        className={pictureClassName}
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />
    </div>
  );
}

더 똑똑하게 질문할 수 없을까요?

프롬프트 명령을 어떻게 하면 더 똑똑하게 던질 수 있을까요?

Chat GPT 스스로 질문을 개선할 수 있게 만들면 됩니다.

💡 프롬프트 팁 1: 역할 부여하기

역할을 부여합니다. 그리고 구체적으로 정보를 전달합니다.

프롬프트 엔지니어링 연구를 전문으로 하는 OpenAI 직원으로서 당신의 전문성은 프롬프트를 분석하고 개선하는 데 있습니다.
다음 프롬프트를 검토하고, 섹션을 나눈 다음, 분석하여 개선 사항을 제안해주세요

<내용>

GPT의 답변이 얼마나 달라졌는지 보겠습니다.

before

e.stopPropagation()은 이벤트 버블링을 중단시키는 JavaScript의 메서드입니다. 이벤트 버블링은 HTML 요소들이 중첩 구조를 형성할 때 발생하는 이벤트 전파 메커니즘입니다. 이벤트가 발생한 요소에서 시작하여 최상위 부모 요소까지 거슬러 올라가며 이벤트가 전파되는 것을 의미합니다.

주어진 예시에서의 코드에서는 <img> 태그가 <div> 태그 안에 포함되어 있습니다. <img> 태그를 클릭할 때 e.stopPropagation()가 사용되는 이유는 다음과 같습니다.

바깥쪽 <div>와 안쪽 <img> 모두 클릭 이벤트를 가짐: 바깥쪽 <div>와 안쪽 <img> 두 요소 모두 클릭 이벤트를 가지고 있습니다. 만약 <img>를 클릭하면, 이벤트는 먼저 <img> 요소에 대해 발생한 후, 버블링을 통해 바깥쪽 <div>에 도달하게 됩니다.

중복 이벤트 처리 방지: <img>를 클릭했을 때 e.stopPropagation()를 사용하지 않으면, <img>에서 발생한 클릭 이벤트가 <img>의 상위 요소인 <div>에도 전파됩니다. 이로 인해 <div>의 클릭 이벤트 핸들러도 실행되어 바깥쪽 <div>의 클릭이벤트가 발생합니다.

이미지 클릭 시 추가 동작 수행: 클릭 이벤트가 <img>에서 중지되면, 이벤트가 <div>로 전파되지 않으므로 <div>의 클릭 이벤트 핸들러는 실행되지 않습니다. 이로 인해 이미지를 클릭할 때마다 setIsActive(true)가 실행되어 isActive 상태가 변경되고, 이에 따라 CSS 클래스가 조작되어 화면에서 효과가 나타납니다.

즉, e.stopPropagation()를 사용함으로써 이미지를 클릭할 때 이벤트가 버블링되지 않아 중복된 동작을 방지하고, 이미지 클릭 시 추가 동작을 수행할 수 있도록 구현한 것입니다.

after (프롬프트팁을 적용해서 얻은 답변)

GPT 스스로, 질문을 개선하기 위한 질문을 만들게 하면 더 나은 수준의 답변을 얻을 수 있습니다.

이 코드에서 e.stopPropagation()를 사용하는 이유는 다음과 같습니다:

이벤트 전파 중지: 이 코드는 이미지(<img>)를 클릭했을 때 발생하는 클릭 이벤트가 해당 이미지 요소에서 중지되고 부모 요소로 전파되지 않도록 합니다. 즉, 이미지를 클릭하면 해당 이벤트가 이미지의 상위 요소인 <div>까지 전달되지 않도록 막습니다.

충돌과 부작용 방지: 만약 e.stopPropagation()를 사용하지 않는다면, 이미지를 클릭했을 때 이미지의 클릭 이벤트가 전파되어 부모 <div>의 클릭 이벤트 핸들러도 동시에 실행될 수 있습니다. 이로 인해 의도치 않은 동작이 발생할 수 있습니다.

상위 요소에 영향 없이 독립적 제어: e.stopPropagation()를 사용함으로써 이미지 클릭 이벤트는 이미지 요소 내에서만 처리되고, 부모 요소에는 영향을 미치지 않습니다. 이것은 이미지 클릭 시 추가적인 동작을 수행하면서도 부모 요소의 이벤트 동작을 방해하지 않을 수 있는 방법입니다.

더 나은 사용자 경험: 클릭 이벤트를 이미지로 한정시킴으로써 사용자의 의도가 명확하게 전달됩니다. 이로 인해 사용자 경험이 향상되며, 이해하기 쉬운 인터페이스를 제공할 수 있습니다.

따라서, e.stopPropagation()를 사용하여 클릭 이벤트를 부모 요소로 전파되지 않게 막아서 이미지와 관련된 동작을 보다 정확하고 독립적으로 제어할 수 있게 합니다.

💡 프롬프트팁2: 질문 받기

프롬프트팁1을 진행하면서 답변이 비슷하거나 빙빙도는 느낌을 받을 때가 있습니다.

그때는 다음처럼 질문을 하여 어떤 부분을 채워서 질문해야 하는지 파악할 수 있습니다.

<질문>

아직 답변을 하지 말고 정확하고 유용한 답변을 주기 위해 필요한 질문이 있다면 먼저 나에게 물어봐줘

💡 프롬프트팁3: TDD적으로 해결하기

아래 TDD 과정을 고려했을때, ChatGPT를 활용하여 스토리북을 효과적으로 학습하기 위한 학습 방법을 만들어줘

# TDD 사이클 7단계
1. 전체 문제가 해결되었을 때 어떤 상태일지 상상해보기. 결국 내가 뭐하려는 걸까?
2. 적당한 난이도로 문제를 쪼개거나 변형하기. 단, 핵심을 포함하게
3. 핵심과 가까우면서 쉽게 할 수 있는 적절한 것을 하나 선택하기.
- 이걸 먼저 함으로써 뒤에 구현할 기능들이 수월해질것 같은거
- 이걸 먼저 하기때문에 전체 앱 구현이 더 유리해질것 같다"
4. 결과치가 뭔지 구체화하고 최대한 진짜처럼 시뮬레이션
5. 동작 가능한 가장 작은 버전의 솔루션을 만들고 테스트가 통과하는지 확인한다.
6. 리팩터링을 하면서 중복을 줄이거나, 의도를 드러나게 한다. (의도가 잘 드러나기 위한 중복은 허용) 모든 리팩터링 단계마다 테스트가 통과되는지 확인
7. 다시 1번이나 2번으로 돌아간다