타로리딩 웹앱 만들기 - (2) / AI가 봐주는 타로리딩 ^^

코드 자체에 api키가 노출되고 있기에, 해당 api키를 삭제했습니다. 그리하여 타로리딩 테스트가 안될거에요... api키 부분 수정하여 작동하도록 next step가보겠습니다. 감사합니다 ^^

소개

시도하고자 했던 것과 그 이유를 알려주세요.

이전에 올린 내용에서 AI 타로 리딩을 구현하고 싶었습니다.

78장의 카드를 기반으로 업그레이드 하고 싶었습니다.

(이전 글 참고 ↓)

https://www.gpters.org/wealth/post/creating-tarot-reading-web-G4sgQ2PRFpQkfLm

진행 방법

어떤 도구를 사용했고, 어떻게 활용하셨나요?
Tip: 사용한 프롬프트 전문을 꼭 포함하고, 내용을 짧게 소개해 주세요.
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)

openai api 연동에서 계속 에러가 나는 문제를 해결하고자, 지피티에게 해당 부분만 확인하는 코드를 부탁했습니다.

## Prompt:
코드샌드박스 react로 openai api 연결하고 싶어. 테스트 코드 작성해줘. 나는 왕초보니까, 10살 수준으로 하나하나 알려줘

## Response:
왕초보를 위한 React와 OpenAI API 연결 테스트 코드를 하나하나 쉽게 설명해 줄게. 먼저 React 프로젝트를 만들고 OpenAI API를 연결하는 기본 코드를 작성할 거야.

---

### 1단계: React 프로젝트 생성하기

1. **코드샌드박스 접속**  
[https://codesandbox.io/](https://codesandbox.io/)에 접속해서 새 프로젝트를 생성해.

2. **React 템플릿 선택**  
"Create Sandbox" 버튼을 누르고, "React" 템플릿을 선택해.

---

### 2단계: OpenAI API 키 준비하기

1. **OpenAI API 가입**  
[https://platform.openai.com/](https://platform.openai.com/)에 가입하고 로그인해.
2. **API 키 생성**  
   상단 메뉴에서 "API Keys"로 들어가서 새 API 키를 생성하고 복사해 둬.

---

### 3단계: 코드 작성하기

아래 코드를 `App.js`에 복사하고 붙여 넣어. 하나씩 설명할게.

```javascript
javascript코드 복사import React, { useState } from "react";

const App = () => {
  const [input, setInput] = useState(""); // 사용자가 입력한 텍스트
  const [response, setResponse] = useState(""); // OpenAI의 응답 저장

  const handleInputChange = (e) => {
    setInput(e.target.value); // 입력 값 업데이트
  };

  const handleSubmit = async () => {
    try {
      const apiKey = "여기에_너의_API_키를_넣으세요"; // OpenAI API 키
      const response = await fetch("https://api.openai.com/v1/completions", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${apiKey}`,
        },
        body: JSON.stringify({
          model: "text-davinci-003", // 사용할 모델
          prompt: input, // 사용자 입력
          max_tokens: 50, // 응답 글자 수 제한
        }),
      });

      const data = await response.json();
      setResponse(data.choices[0].text.trim()); // 응답 텍스트 저장
    } catch (error) {
      console.error("Error:", error);
      setResponse("오류가 발생했습니다. 다시 시도해주세요.");
    }
  };

  return (
    <div style={{ padding: "20px", fontFamily: "Arial" }}>
      <h1>OpenAI API 테스트</h1>
      <textarea
        rows="4"
        cols="50"
        placeholder="질문을 입력하세요..."
        value={input}
        onChange={handleInputChange}
      ></textarea>
      <br />
      <button onClick={handleSubmit} style={{ marginTop: "10px" }}>
        보내기
      </button>
      <h2>응답:</h2>
      <p>{response}</p>
    </div>
  );
};

export default App;
```

---

### 4단계: 코드 설명

1. **사용자 입력**  
`textarea`에서 사용자가 입력한 내용을 `input` 상태에 저장해.
2. **OpenAI API 호출**  
   버튼을 누르면 `fetch`를 사용해 OpenAI API에 데이터를 보내고 응답을 받아와.
3. **응답 출력**  
   받은 데이터를 화면에 표시해.

---

### 5단계: 실행하기

1. API 키를 복사한 곳에 붙여 넣고 저장해.
2. 코드샌드박스에서 "Run" 버튼을 눌러 실행해.
3. 텍스트를 입력하고 버튼을 눌러 OpenAI API가 응답하는지 확인해!

혹시 막히는 부분이 있으면 언제든 물어봐! 😊