ChatGPT가 프론트엔드 개발에 가져올 변화

들어가며

요즘 여기저기서 심심치 않게 들려오는 CHAT GPT
관심이 없는 사람도 한 번쯤은 들어볼 수밖에 없을 만큼 미디어에서 뜨거운 감자입니다.
그럼 CHAT GPT가 무엇일까요?

ChatGPT란?

ChatGPT는 Generative Pre-trained Transformer(GPT)와 Chat의 합성어로 OpenAI가 개발한 프로토타입 대화형 인공지능 챗봇이다.

대화형 인공지능 챗봇.
ChatGPT는 챗봇 기술과 GPT-3 기술을 결합한 기술로, 인공지능 분야에서 많은 주목을 받고 있습니다.
자연어 처리 기술을 이용하여 자연스러운 대화가 가능한 AI 챗봇 정도로 정리하면 가장 이해가 쉬울 것 같습니다.

ChatGPT를 프론트엔드 개발에 어떻게 활용할 수 있을까?

저는 Chat GPT에 다음과 같은 질문을 해보았습니다.

“react next 컴포넌트로 2개의 탭을 만들고 탭 클릭 시 자동으로 탭 버튼 위치로 스크롤 이동하게 코드 만들어줘”

그랬더니 ChatGPT는 아래와 같은 답변을 주었습니다.

import { useState } from 'react';

function Tabs() {
  const [selectedTab, setSelectedTab] = useState(0);

  const handleTabClick = (index) => {
    setSelectedTab(index);
    // 선택한 탭 위치로 자동 스크롤
    window.scrollTo({ top: index * window.innerHeight, behavior: 'smooth' });
  };

  return (
    <div>
      <div>
        <button onClick={() => handleTabClick(0)}>Tab 1</button>
        <button onClick={() => handleTabClick(1)}>Tab 2</button>
      </div>
      <div>
        <div style={{ height: '100vh' }}>Content 1</div>
        <div style={{ height: '100vh' }}>Content 2</div>
      </div>
    </div>
  );
}

export default Tabs;

좀 놀라웠던 것은 코드만 주는 게 아니라 코드에 관한 설명도 같이 준다는 것이었습니다.

 

• 우선, React에서 제공하는 useState Hook을 사용하여 탭의 현재 선택 상태를 저장하는 state를 만들어 줍니다. 그리고 각 탭 버튼에는 onClick 이벤트 핸들러를 등록하여 해당 탭이 선택되도록 합니다. 이때, 선택된 탭의 인덱스를 state에 업데이트해 줍니다.
• 위 코드에서는 각 탭 버튼이 클릭되면 handleTabClick 함수가 호출되고 선택된 탭의 인덱스가 state에 업데이트됩니다. 그리고 선택된 탭의 인덱스를 사용하여 window.scrollTo 함수를 호출하여 선택된 탭의 위치로 자동 스크롤 되도록 합니다. 이때, window.innerHeight를 사용하여 탭 내용이 화면 크기에 맞게 표시되도록 합니다.
• 위 코드에서는 탭 내용을 각각의 div로 구성하고, 각 div의 높이를 화면 크기와 동일하게 설정하여 전체 화면을 채우도록 합니다. 이렇게 하면 선택된 탭의 위치로 자동 스크롤되는 것이 자연스러워집니다.

 

꽤 그럴듯한 코드를 만들어주고 그에 대한 상세한 설명까지 해줘서 꽤나 놀라웠는데요, 똑같은 질문을 다시 한다면 같은 대답을 해줄까 싶어서 다시 질문을 해보니 이번엔 라이브러리를 쓰는 답변을 해주었습니다. 매번 같은 대답을 하진 않더라고요.

모든 코드를 ChatGPT를 이용해서 만들 수는 없겠지만, 일부 간단한 구현의 UI 컴포넌트는 충분히 도움을 받을 수 있을 거 같았습니다.

무언가 코드가 잘 풀리지 않으면 찾는 해답지처럼 찾는 스택오버플로 사이트 대신 ChatGPT에 물어봐도 되는 날이 금방 찾아올 것 같네요.

VSCODE 확장프로그램 aicodehelper로 받는 코드 리뷰

코드를 만들어주는 거 말고 내 코드에 대한 리뷰도 받을 수 있을까라는 생각을 하고 있던 차에 ChatGPT api를 이용한 VSCODE 확장 프로그램이 있다는 것을 알게 되었습니다.

aicodehelper라는 익스텐션인데요, ChatGPT api를 활용하고 있기 때문에 api 키값을 받은 후에 사용할 수 있었습니다.

그리고 프로젝트를 진행하면서 간단히 만들었던 훅에 대한 리뷰를 실행해 보았는데요. aicodehelper에서 제공하는 리뷰 기능 단축키를 이용했더니 아래와 같이 좋은 점, 나쁜 점 리뷰를 받아 볼 수 있었습니다.

// |이 코드는 스크롤을 잠그는 기능을 구현하는 커스텀 훅입니다.

// |좋은 점:
// |- 스크롤을 잠그는 기능을 구현하는 데 필요한 기능들이 모두 포함되어 있습니다.
// |- useWindowScroll 훅을 사용하여 스크롤 위치를 가져오는 부분이 간단하고 가독성이 좋습니다.
// |- useEffect를 사용하여 컴포넌트가 마운트될 때 body의 lock 클래스를 제거하는 부분이 깔끔하게 구현되어 있습니다.

// |나쁜 점:
// |- lockScroll 함수 내에서 body를 여러 번 쿼리하는 부분이 있어서 성능상 좋지 않을 수 있습니다. 이를 개선하기 위해서는 body를 변수에 할당하여 재사용하는 방법이 있습니다.
// |- lockScroll 함수 내에서 isOpen 값에 따라 스크롤을 잠그거나 해제하는 부분이 구현되어 있는데, 이를 사용하는 쪽에서 isOpen 값을 전달하지 않을 경우에 대한 예외 처리가 필요합니다.

// |

엄청나게 도움이 되는 리뷰까지는 아니었지만, 최소한의 실수를 방지하는 보호막 정도로는 사용 가능할 거 같아 신입 개발자들에게 도움이 되지 않을까 생각이 들었습니다.

마치며

ChatGPT가 계속된 발전을 하며 언젠가는 사람이 개발하는 시대가 아닌 ai가 개발을 하는 시대가 올지도 모른다고 할지도 모르겠습니다. 하지만 저는 ChatGPT에 대한 좋은 인상을 받았음에도 불구하고 오히려 사람을 완벽하게 대체할 수는 없지 않을까라는 의견에 한 표를 던져봅니다.
물론 너무나 신기한 기술이고, 잘 활용하면 업무시간을 단축하고 좀 더 실수 없는 퀄리티 높은 코드를 만들 수 있을 거라는 생각은 들지만, 어디까지나 도움을 받는 것이지 주체적인 역할을 힘들지 않을까 싶습니다.
그래도 지금 너무 신기해서 자꾸만 질문을 하고 싶어지는 건 어쩔 수 없는 거 같아요ㅎㅎ

아직 ChatGPT에게 질문을 해본 적이 없다면 지금 당장 질문을 해보세요!
생각지 못한 재미난 답변을 받을지도 모르니깐요~

이 글은pxd XE Group Blog에서도 보실 수 있습니다.

• 참고문서 : ChatGPT