ChatGPT 의 출시는 놀라운 코드 스니펫을 제시할 수 있었기 때문에 프로그래밍 커뮤니티를 통해 파문을 일으켰습니다.

작년에 출시된 GitHub Copilot 과 비교하면 어떻습니까? AI 가 당신의 직업을 쫓고 있습니까 ? 알아 보자.

GitHub Copilot 에서 이전 기사를 읽지 않았다면 여기에서 확인할 수 있습니다 .

ChatGPT 테스트

GitHub Copilot 에 적용한 것과 동일한 테스트 를 간단히 살펴보겠습니다 .

테스트 1: 주가 가져오기

슬프게도 처음으로 잘못된 코드를 생성했습니다.

함수가 로 정의되지 않았 async으며 promises가 제대로 처리되지 않았습니다.

다음 시도는 더 좋았습니다.

이상하게도 API 키 없이 작동 합니다(쿼리 매개변수에 apikey임의의 값이 있는 키가 포함되어 있는 한).

결과 : GitHub Copilot 은 ChatGPT 를 먼지 속에 남겨 둡니다.

테스트 2: BFS 순회

이번에는 ChatGPT 가 한 번에 해결했습니다. 슬프게도 너무 길어서 스크린샷이 화면에 맞지 않아서 생성된 코드는 다음과 같습니다.

class Node:
  def __init__(self, value):
    self.value = value
    self.left = None
    self.right = None

class BinarySearchTree:
  def __init__(self):
    self.root = None

  def insert(self, value):
    new_node = Node(value)

    if self.root is None:
      self.root = new_node
      return

    current_node = self.root
    while True:
      if value < current_node.value:
        if current_node.left is None:
          current_node.left = new_node
          return
        current_node = current_node.left
      else:
        if current_node.right is None:
          current_node.right = new_node
          return
        current_node = current_node.right

  def inorder_traversal(self, node, numbers):
    if node is None:
      return
    self.inorder_traversal(node.left, numbers)
    numbers.append(node.value)
    self.inorder_traversal(node.right, numbers)

  def get_numbers(self):
    numbers = []
    self.inorder_traversal(self.root, numbers)
    return numbers

bst = BinarySearchTree()
bst.insert(10)
bst.insert(5)
bst.insert(15)
bst.insert(3)
bst.insert(7)
bst.insert(13)
bst.insert(17)

numbers = bst.get_numbers()
print(numbers)  # [3, 5, 7, 10, 13, 15, 17]

결과 : ChatGPT 가 이겼습니다.

테스트 3: 100개의 배열

ChatGPT 는 이에 대해 여러 제안을 생성했습니다.

GitHub Copilot 이 실행 되었을 때 약간 불안정한 제안을 생성했지만 지금은 ChatGPT 와 동일한 코드를 생성합니다 .

결과 : 무승부(비교하는 소프트웨어 버전에 따라 다름)

완전한 TODO 프로젝트 생성

테스트를 더 진행하기 위해 두 소프트웨어를 모두 사용하여 완전한 TODO 프로젝트를 만들기로 결정했습니다.

채팅GPT

1. TODO 프로젝트는 어떻게 생성하나요?

ChatGPT 에서 언급한 단계 는 매우 포괄적입니다.

2. React프로젝트는 어떻게 생성하나요?

3. Todo 컴포넌트 생성

마음에 들지 않는 부분입니다. 생성된 코드는 레거시 클래스 구성 요소 구문을 사용하고 있었습니다. 할일 추가도 처리하지 않았습니다.

4. Todo 구성 요소를 최적화하여 할일 추가 및 삭제를 처리하고 완료로 표시합니다.

생성된 코드는 다음과 같습니다(스크린샷에는 너무 깁니다).

import React from "react";

// TodoItem component
const TodoItem = ({
 item,
 onDelete,
 onComplete,
}) => (
 <li>
   {item.text}
   <button onClick={onDelete}>Delete</button>
   <button onClick={onComplete}>
     {item.isComplete ? "Undo" : "Complete"}
   </button>
 </li>
);

// TodoApp component
class TodoApp extends React.Component {
 // Define the initial state of the component
 state = {
   todoItems: [],
 };

 // Method to handle adding new items to the todo list
 addTodo = (text) => {
   // Add the new item to the todo list
   this.setState({
     todoItems: [
       ...this.state.todoItems,
       { text, isComplete: false },
     ],
   });
 };

 // Method to handle deleting items from the todo list
 deleteTodo = (index) => {
   // Delete the item at the given index
   this.setState({
     todoItems: this.state.todoItems.filter(
       (_, i) => i !== index
     ),
   });
 };

 // Method to handle completing/undoing a todo item
 completeTodo = (index) => {
   // Update the "isComplete" property of the item at the given index
   this.setState((state) => {
     const todoItems = [...state.todoItems];
     todoItems[index].isComplete =
       !todoItems[index].isComplete;
     return { todoItems };
   });
 };

 // Method to render the component
 render() {
   return (
     <div>
       {/* Form to add new items to the todo list */}
       <form>
         <input
           type="text"
           placeholder="Add a todo item"
         />
         <button type="submit">Add</button>
       </form>

       {/* List of todo items */}
       <ul>
         {this.state.todoItems.map(
           (item, index) => (
             <TodoItem
               key={index}
               item={item}
               onDelete={() =>
                 this.deleteTodo(index)
               }
               onComplete={() =>
                 this.completeTodo(index)
               }
             />
           )
         )}
       </ul>
     </div>
   );
 }
}

5. Functional Components 를 생성 하고 todos의 추가, 삭제 및 완료를 처리 하는 것을 언급하여 마지막 시도 .

import React from "react";

// TodoItem component
const TodoItem = ({ item, onDelete, onComplete }) => (
  <li>
    {item.text}
    <button onClick={onDelete}>Delete</button>
    <button onClick={onComplete}>
      {item.isComplete ? "Undo" : "Complete"}
    </button>
  </li>
);

// TodoApp component
const TodoApp = () => {
  // Define the initial state of the component
  const [todoItems, setTodoItems] = React.useState([]);
  // Method to handle adding new items to the todo list
  const addTodo = (text) => {
    // Add the new item to the todo list
    setTodoItems([
      ...todoItems,
      { text, isComplete: false },
    ]);
  };
  // Method to handle deleting items from the todo list
  const deleteTodo = (index) => {
    // Delete the item at the given index
    setTodoItems(
      todoItems.filter((_, i) => i !== index)
    );
  };
  // Method to handle completing/undoing a todo item
  const completeTodo = (index) => {
    // Update the "isComplete" property of the item at the given index
    setTodoItems((state) => {
      const todoItems = [...state];
      todoItems[index].isComplete =
        !todoItems[index].isComplete;
      return todoItems;
    });
  };
  // Return the component
  return (
    <div>
      {/* Form to add new items to the todo list */}
      <form>
        <input
          type="text"
          placeholder="Add a todo item"
        />
        <button type="submit">Add</button>
      </form>
      {/* List of todo items */}
      <ul>
        {todoItems.map((item, index) => (
          <TodoItem
            key={index}
            item={item}
            onDelete={() => deleteTodo(index)}
            onComplete={() => completeTodo(index)}
          />
        ))}
      </ul>
    </div>
  );
};

GitHub 부조종사

슬프게도 Copilot 은 React 프로젝트를 생성할 수 없습니다. 주어진 컨텍스트에서만 코드 스니펫을 제안할 수 있으므로 직접 반응 앱 을 만들어 보겠습니다 .

1. 반응 프로젝트 생성

npx create-react-app react-copilot

3. 마침내 우리가 앉아서 모히토를 홀짝이는 동안 Copilot 이 마법을 부릴 시간입니다.

수행할 작업에 대한 설명이 파일 상단에 추가되었습니다.

토도 아이템

// Functional TodoItem component which takes onDelete,
// onComplete, and item ({ todo: string; completed: boolean })
// as props

// Functional TodoApp component which handles addition,
// deletion & completion of todos. The TodoItem component
// is used to render each todo item

export default function TodoItem({
 onDelete,
 onComplete,
 item,
}) {
 return (
   <div>
     <input
       type="checkbox"
       checked={item.completed}
       onChange={() => onComplete(item)}
     />
     <span
       style={{
         textDecoration: item.completed
           ? "line-through"
           : "none",
       }}
     >
       {item.todo}
     </span>
     <button onClick={() => onDelete(item)}>
       Delete
     </button>
   </div>
 );
}

5. 생성TodoApp

import React, { useState } from "react";
import TodoItem from "./TodoItem";

export default function TodoApp() {
 const [todos, setTodos] = useState([]);
 const [todo, setTodo] = useState("");

 const addTodo = () => {
   setTodos([...todos, { todo, completed: false }]);
   setTodo("");
 };

 const deleteTodo = (item) => {
   setTodos(todos.filter((todo) => todo !== item));
 };

 const completeTodo = (item) => {
   setTodos(
     todos.map((todo) =>
       todo === item
         ? { ...todo, completed: !todo.completed }
         : todo
     )
   );
 };

 return (
   <div>
     <h1>Todo App</h1>
     <input
       type="text"
       value={todo}
       onChange={(e) => setTodo(e.target.value)}
     />
     <button onClick={addTodo}>Add</button>
     {todos.map((item, index) => (
       <TodoItem
         key={index}
         onDelete={deleteTodo}
         onComplete={completeTodo}
         item={item}
       />
     ))}
   </div>
 );
}

프로젝트를 설정하기 위해 추가 작업을 수행해야 했지만 Copilot 은 ChatGPT 에 비해 더 나은 Todo 앱용 코드를 생성할 수 있었습니다 .

하루가 끝나면 Copilot 은 개발자가 코드를 더 빨리 작성하는 데 도움이 되는 도구인 반면 ChatGPT 는 범용 chatbot이지만 여전히 개발 프로세스를 간소화할 수 있지만 GitHub Copilot 은 작업이 코딩에 집중될 때 손을 뻗습니다! 이것은 우리를 질문으로 인도합니다 ...

누가 당신의 일을 맡을 것입니까?

(마음 속으로) AI 개발자 : * 사악한 웃음 *

GitHub HQ 를 불태우기 위해 갈퀴를 꺼내기 전에 한 걸음 물러서서 더 큰 그림을 살펴봅시다. 이는 개발 프로세스 를 간소화하는 도구 이며 개발자를 대체하기 위한 것이 아닙니다 .

우리는 여전히 개발자가 코드를 작성해야 합니다. 물론 이러한 도구는 우리가 더 빠르게 코딩하는 데 도움이 될 수 있지만 사람의 입력 없이는 여전히 스스로 모든 것을 생각해낼 수 없습니다 .

불경기 로 인해 정리해고 소식이 산불 처럼 번지고 있다는 소식이 매우 무섭게 들릴 수도 있지만, 계속 업데이트하고 기술을 연마하는 한 괜찮을 것입니다!

오 한약 먹고 행복한 기술 향상 !

기술 분야 에 대한 격주로 새로운 정보 를 받아 보려면 저를 팔로우하세요 !

개발 문제를 해결하기 위해 최고 등급의 프런트 엔드 개발 프리랜서 가 필요하십니까 ? Upwork 에서 저에게 연락하십시오

내가 무엇을 하고 있는지 보고 싶습니까? 내 개인 웹 사이트 및 GitHub 를 확인하십시오.

연결하시겠습니까? LinkedIn 에서 저에게 연락하세요

저는 디지털 노마드이며 가끔 여행을 떠납니다. Instagram 에서 나를 팔로우 하여 내가 무엇을 하고 있는지 확인하세요.