Chatgpt 3.5 Turbo vs. Chatgpt 4

두 모델의 답변 정확도는 너무나 잘 알려져있어서 당연히 GPT4가 더 좋을 것이라 기대한다 그렇다면 어느정도로 어떤 부분들이 좋은지 체감해볼 수 있도록 같은 명령어를 주고 어떤 답을 주는시 시험해본다. 코딩의 주제는

PROMPT

Web app에서 입력받은 시각을 postgresql 의 table에 저장할 때 타임존 표시 없이 Local Time으로 저장하는 다음의 내용을 만족하는 예제를 부탁해
1. typescript기반의 조회,수정,삭제 가능한 React앱
2. 위 앱과 함께 동작할 node.js 백엔드 코드
3. table 생성에 필요한 ddl
4. 해당 table의 데이터를 조회해오는 python 프로그램

GPT 3.5의 답변

1. TypeScript 기반의 조회, 수정, 삭제 가능한 React 앱 예제:

import React, { useState } from "react";
import axios from "axios";

interface User {
  id: number;
  name: string;
  created_at: string;
}

const App = () => {
  const [users, setUsers] = useState<User[]>([]);
  const [name, setName] = useState("");

  const fetchUsers = async () => {
    const response = await axios.get<User[]>("/users");
    setUsers(response.data);
  };

  const handleCreateUser = async () => {
    await axios.post("/users", { name });
    setName("");
    await fetchUsers();
  };

  const handleDeleteUser = async (id: number) => {
    await axios.delete(`/users/${id}`);
    await fetchUsers();
  };

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} - {user.created_at}
            <button onClick={() => handleDeleteUser(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
      <div>
        <input value={name} onChange={(e) => setName(e.target.value)} />
        <button onClick={handleCreateUser}>Create</button>
      </div>
    </div>
  );
};

export default App;

2. 위 앱과 함께 동작할 Node.js 백엔드 코드 예제:

const express = require("express");
const bodyParser = require("body-parser");
const { Pool } = require("pg");

const pool = new Pool({
  user: "username",
  host: "localhost",
  database: "mydatabase",
  password: "mypassword",
  port: 5432,
});

const app = express();
app.use(bodyParser.json());

app.get("/users", async (req, res) => {
  const { rows } = await pool.query("SELECT * FROM users");
  res.json(rows);
});

app.post("/users", async (req, res) => {
  const { name } = req.body;
  await pool.query("INSERT INTO users (name) VALUES ($1)", [name]);
  res.sendStatus(201);
});

app.delete("/users/:id", async (req, res) => {
  const { id } = req.params;
  await pool.query("DELETE FROM users WHERE id = $1", [id]);
  res.sendStatus(204);
});

app.listen(3000, () => {
  console.log("Server is listening on port 3000");
});

3. 해당 테이블의 데이터를 저장하기 위해 사용할 DDL:

CREATE TABLE users (
  id SERIAL PRIMARY KEY,
  name VARCHAR(255) NOT NULL,
  created_at TIMESTAMP NOT NULL DEFAULT now()
);

4. 해당 테이블의 데이터를 조회해오는 Python 프로그램 예제:

import psycopg2

connection = psycopg2.connect(
    user="username",
    password="mypassword",
    host="localhost",
    port="5432",
    database="mydatabase",
)

cursor = connection.cursor()

cursor.execute("SELECT * FROM users")
rows = cursor.fetchall()

for row in rows:
    print(row)

cursor.close()
connection.close()

위의 예제는 psycopg2를 사용하여 PostgreSQL 데이터베이스에 연결하고, 쿼리를 실행하여 결과를 가져옵니다. 적절한 PostgreSQL 드라이버를 설치하고 위의 예제를 실행하기 위해 적절한 PostgreSQL 드라이버를 설치해야합니다. psycopg2는 일반적으로 Python에서 사용되는 PostgreSQL 드라이버 중 하나입니다. 설치 방법은 다음과 같습니다.

pip install psycopg2-binary

그러나 psycopg2는 개발을 중단하였기 때문에 psycopg2-binary 대신 psycopg2cffi나 asyncpg 등의 대안을 고려할 수 있습니다.

또한, 위의 예제에서는 쿼리 결과를 단순히 출력하는 것으로 충분하지만, 더 복잡한 애플리케이션에서는 결과를 객체로 변환하거나 다른 방식으로 처리해야할 수 있습니다. 이를 위해 psycopg2의 cursor 객체를 사용하여 쿼리 결과를 적절한 방식으로 처리할 수 있습니다.

GPT 4의 답변

요청하신 예제를 작성하였습니다. 아래는 각 부분에 대한 설명과 코드 예제입니다.

1. TypeScript 기반의 조회, 수정, 삭제 가능한 React 앱
   React 앱에 필요한 필수 라이브러리를 설치하세요.

npx create-react-app my-app --template typescript
cd my-app
npm install axios

이후, src/App.tsx 파일을 아래와 같이 수정하세요.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface TimeEntry {
  id: number;
  time: string;
}

function App() {
  const [timeEntries, setTimeEntries] = useState<TimeEntry[]>([]);

  useEffect(() => {
    fetchTimeEntries();
  }, []);

  const fetchTimeEntries = async () => {
    const response = await axios.get('/api/time-entries');
    setTimeEntries(response.data);
  };

  const deleteTimeEntry = async (id: number) => {
    await axios.delete(`/api/time-entries/${id}`);
    fetchTimeEntries();
  };

  const updateTimeEntry = async (id: number, time: string) => {
    await axios.put(`/api/time-entries/${id}`, { time });
    fetchTimeEntries();
  };

  return (
    <div>
      <h1>Time Entries</h1>
      <ul>
        {timeEntries.map((entry) => (
          <li key={entry.id}>
            {entry.time}
            <button onClick={() => updateTimeEntry(entry.id, entry.time)}>Update</button>
            <button onClick={() => deleteTimeEntry(entry.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2. Node.js 백엔드 코드 (Express 사용)
   server.js 파일을 만들고 아래와 같이 작성하세요.

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const { Pool } = require("pg");

const app = express();
app.use(bodyParser.json());
app.use(cors());

const pool = new Pool({
  user: "your_user",
  host: "your_host",
  database: "your_database",
  password: "your_password",
  port: your_port,
});

app.get("/events", async (req, res) => {
  try {
    const result = await pool.query("SELECT * FROM events");
    res.status(200).json(result.rows);
  } catch (error) {
    res.status(500).send("Error fetching events");
  }
});

app.post("/events", async (req, res) => {
  try {
    const { title, time } = req.body;
    await pool.query("INSERT INTO events (title, time) VALUES ($1, $2)", [title, time]);
    res.status(201).send("Event created");
  } catch (error) {
    res.status(500).send("Error creating event");
  }
});

app.put("/events/:id", async (req, res) => {
  try {
    const { id } = req.params;
    const { title, time } = req.body;
    await pool.query("UPDATE events SET title = $1, time = $2 WHERE id = $3", [title, time, id]);
    res.status(200).send("Event updated");
  } catch (error) {
    res.status(500).send("Error updating event");
  }
});

app.delete("/events/:id", async (req, res) => {
  try {
    const { id } = req.params;
    await pool.query("DELETE FROM events WHERE id = $1", [id]);
    res.status(200).send("Event deleted");
  } catch (error) {
    res.status(500).send("Error deleting event");
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. 테이블 생성에 필요한 DDL

CREATE TABLE events (
    id SERIAL PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    time TIMESTAMP WITHOUT TIME ZONE NOT NULL
);

4.해당 테이블의 데이터를 조회해오는 Python 프로그램
다음은 Python을 사용하여 PostgreSQL 테이블에서 데이터를 조회하는 간단한 예제입니다. 이 예제에서는 psycopg2 패키지를 사용하므로, 먼저 설치해야 합니다. 패키지를 설치하려면 터미널에서 다음 명령을 실행하세요.

pip install psycopg2

그런 다음 다음 코드를 사용하여 데이터베이스에서 데이터를 조회할 수 있습니다.

import psycopg2

def get_connection():
    return psycopg2.connect(
        host="your_host",
        database="your_database",
        user="your_user",
        password="your_password"
    )

def fetch_data():
    conn = get_connection()
    cursor = conn.cursor()
    
    # Fetch data from the "events" table
    query = "SELECT id, event_name, local_time FROM events;"
    cursor.execute(query)
    rows = cursor.fetchall()
    
    # Print the data
    for row in rows:
        print(f"ID: {row[0]}, Event Name: {row[1]}, Local Time: {row[2]}")
    
    cursor.close()
    conn.close()

if __name__ == "__main__":
    fetch_data()

이 코드에서는 먼저 get_connection 함수를 사용하여 데이터베이스에 연결한 다음, fetch_data 함수를 사용하여 "events" 테이블에서 데이터를 가져옵니다. 데이터베이스 연결 정보를 입력하세요 (예: host, database, user, password). 코드를 실행하면 테이블의 모든 행이 출력됩니다.

비교 결론

1. Code review GPT4가 정답에 가까운 코드를 제공한다.
   time TIMESTAMP WITHOUT TIME ZONE NOT NULL 을 DDL내에 포함하여 일단 그럴싸해보인다.

2. 화자의 질문에 충실한 대답 역시 GPT4가 내놓는 것으로 보인다.
   질문 과정중에 내 실수로 삽입기능에 대한요건을 누락했는데

   1. typescript기반의 조회,수정,삭제 가능한 React앱
   2. 위 앱과 함께 동작할 node.js 백엔드 코드

   3.5는 insert, select, delete에 대한 답을, 4는 여기에 update에 대한 내가 원했던 내용을 포함하였다.
   

3. 실행 결과
   TBD - 오늘은 이만 늦어서 나중에 수정해둘 예정이다. 나도 궁금하다.