챗GPT와 함께하는 페어 프로그래밍 | HTMXR_002

Find AI Tools
No difficulty
No complicated process
Find ai tools

챗GPT와 함께하는 페어 프로그래밍 | HTMXR_002

Table of Contents

  1. 소개
    • ChatGPT와 함께하는 코딩
    • ChatGPT의 활용성
  2. 블록에 회전 기능 추가하기
    • 회전 가능한 직사각형 컴포넌트 생성
    • 커서와 블록 사이의 거리에 따라 각속도 조절
    • 블록의 회전 방향을 마우스 방향으로 조절
    • 마우스 버튼을 누를 때만 회전하도록 제한
    • 코드 리팩토링: 함수 분해와 최적화

ChatGPT를 활용한 코딩

안녕하세요, 로만입니다. 이전 글에서는 이동 가능한 블록을 생성하는 방법을 살펴보았습니다. 그래픽 에디터에서 블록을 잡아 움직일 수 있는 기능을 구현했습니다. 이번 글에서는 블록에 회전 기능을 추가해보려고 합니다. 하지만 이번엔 코드를 직접 작성하지 않을 거예요. 대신 ChatGPT를 사용해서 코드를 작성하고, 저는 코드를 해석하는 역할을 할 겁니다. 일종의 코드를 실행하는 런타임 역할이라고 생각하시면 됩니다. 그러면서 ChatGPT나 LLM(언어 모델)과 같은 것들이 작업을 돕는 도구로 사용할 수 있는 예시를 보여드리고자 합니다. ChatGPT는 일반적인 작업흐름을 더 효율적이고 집중적으로 만들어줍니다. 즉, 우리직업을 대체하지는 않고, 작업을 하는 데 도움을 주는 도구로서 사용할 수 있다는 뜻입니다. 우리는 ChatGPT의 안내를 받으며 계속 배우지만, ChatGPT가 제시하는 방법으로 작업을 진행하는 대신에, 무엇이 잘못되었는지 이해하려 노력하면서 기술을 습득할 수 있습니다. 이러한 작업흐름은 흥미로울 것입니다. 물론 100% 정확하지 않을 수 있으니, ChatGPT가 제시하는 내용을 검증하는 게 좋습니다. 이렇게 한다면 코드를 실행시키고, 올바르게 작동한다면 제대로 된 것이고, 그렇지 않다면 수정이 필요한 부분이라고 생각할 수 있습니다. 하지만 일반적으로 인터넷 검색을 통해 확인하는 것이 좋습니다.

블록에 회전 기능 추가하기

✨ 회전 가능한 직사각형 컴포넌트 생성하기 ✨

이전 글에서 생성한 블록에 이번에는 회전 기능을 추가해보려고 합니다. 마우스 커서와 블록 사이의 거리에 따라 회전 속도를 다르게 조절하려고 합니다. 블록이 커서에 가까울수록 회전 속도가 느려지고, 커서와 멀어질수록 회전 속도가 빨라지길 원합니다. 이는 그래픽 에디터에서 흔히 볼 수 있는 동작입니다. ChatGPT에게 React로 회전 가능한 사각형 컴포넌트를 작성해 달라고 요청해보겠습니다. ChatGPT는 useEffect를 사용하고 CSS와 설정 코드도 함께 제공해줄 것입니다. 제가 받은 코드를 CodeSandbox에 붙여넣으면 작동을 확인할 수 있을 것입니다. 생성된 컴포넌트는 아직 완벽하지는 않지만, 기본 아이디어는 구현되었습니다. 출발점으로 좋은 시작점이라고 할 수 있습니다.

✨ 커서와 블록 사이의 거리에 따라 각속도 조절하기 ✨

블록과 마우스 커서 사이의 거리에 따라 각속도를 조절하려 합니다. 커서가 블록에 가까울수록 회전 속도가 느려져야 합니다. ChatGPT에게 새로운 동작을 포함한 컴포넌트를 다시 작성해 달라고 요청해보겠습니다. 그리고 ChatGPT는 계산까지도 수행할 것입니다. 이제 다시 테스트를 해보겠습니다. 제대로 동작하는지 확인해보면 됩니다. 잘 동작하지만 속도가 너무 빠른 것 같습니다. 회전 속도를 늦춰보도록 요청을 해보겠습니다. ChatGPT는 스케일링 요소를 제안하고 있습니다. 이제 다시 테스트를 해봅시다. 이전보다는 느려진 것 같지만 아직 세밀하게 제어할 수 없는 정도입니다. 하지만 괜찮습니다. 다음 단계로 넘어가서 마우스 포인트의 방향으로 블록을 회전시켜보는 것이 좋을 것 같습니다.

✨ 블록의 회전 방향을 마우스 방향으로 조절하기 ✨

마우스가 아래로 이동하면 좌측으로 회전시키고, 위로 이동하면 우측으로 회전시키려고 합니다. 마우스가 왼쪽으로 이동하면 왼쪽으로, 오른쪽으로 이동하면 오른쪽으로 회전시키고 싶습니다. 사용자 인터페이스를 예측 가능하게 만들기 위해서입니다. ChatGPT에게 이 동작을 포함한 컴포넌트를 작성하도록 요청해보죠. 새로 작성된 코드를 다시 테스트해봅시다. 잘 작동하는 것 같습니다. 처음부터 정상적으로 작동하여 놀랍습니다. 이는 구현하기 어려운 컴포넌트인데도 불구하고 잘 작성되었습니다. 이제 마우스를 움직일 때 블록이 항상 회전하는데, 마우스를 클릭하고 블록을 움직일 때만 회전되도록 제한해보겠습니다.

✨ 마우스 클릭 시에만 회전하도록 제한하기 ✨

마우스 버튼을 누를 때에만 블록이 회전하도록 제한하려고 합니다. ChatGPT에게 해당 기능을 추가하도록 요청해보겠습니다. ChatGPT는 mouse down 이벤트와 mouse up 이벤트를 위한 이벤트 리스너를 추가하는 것과 같은 간단한 작업을 추천하고 있습니다. 이제 테스트를 해보면 마우스 버튼을 누를 때만 블록이 회전하는 것을 확인할 수 있습니다. 그런데 회전이 시작될 때 블록이 이동해버리는 이슈가 발생하는데, 이부분을 개선할 필요가 있습니다. ChatGPT에게 해당 부분을 고려한 코드를 작성하도록 요청해보겠습니다. ChatGPT는 현재 각도와 새로운 각도 사이의 오프셋을 추적하고 회전 중에도 이를 유지하는 것을 제안하고 있습니다. 이제 다시 테스트를 해봅시다. 잘 작동하는 것 같습니다. 이제 제품을 사용할 수 있는 상태에 이르렀습니다. 마지막으로 컴포넌트를 리팩토링해보겠습니다.

✨ 코드 리팩토링: 함수 분해와 최적화 ✨

현재 모든 내용이 하나의 use effect 안에 포함되어 있는데, 이를 좀 더 유지보수 가능하고 가독성이 좋도록 리팩토링하려고 합니다. ChatGPT에게 이 역할을 수행해줄 함수들로 코드를 재작성해 달라고 요청해보겠습니다. ChatGPT는 코드를 더 작은 함수들로 분해해줄 것입니다. 이 작업을 통해 함수들을 use callback을 사용하여 메모이제이션할 수도 있습니다. 이를 ChatGPT에게 요청해보겠습니다. 하지만 결과적으로 받은 코드는 아직 완벽하지 않습니다. useEffect 의존성에 대해 잘못된 React 오류가 발생하는데, 작성된 개별 함수들은 모두 정상적으로 제공됩니다. 우리는 ChatGPT에게 use callback을 사용하여 함수들을 최적화하도록 요청할 수도 있습니다. 하지만 지금의 코드도 문제가 없는 좋은 코드라고 할 수 있습니다.

요약

이렇게 ChatGPT를 이용하여 UI를 만들거나 소프트웨어 프로그램을 작성할 때마다 ChatGPT를 일상적으로 활용할 수 있습니다. 저는 예를 들어, 비디오 컴포짓 작업을 위해 사용하는 ffmpeg의 설정들을 작성하는 데 ChatGPT를 활용했습니다. 이 작업을 위해서는 이상한 DSL(도메인 특화 언어)을 사용해야 하는데, 이를 쉽게 기억하기 어렵습니다. 그래서 때때로 이러한 쿼리 문자열 작성을 ChatGPT에게 의뢰하곤 합니다. 그리고 ChatGPT가 매우 잘 해내기도 합니다. 이번 에피소드를 좋아하셨다면 좋아요를 눌러주시고, 구독도 해주세요. 또한 GPT와 관련한 다른 이야기를 듣고 싶으시다면 댓글로 알려주세요.

FAQ

Q: ChatGPT는 어떻게 작동하는 건가요?
A: ChatGPT는 큰 데이터셋에서 학습한 언어 모델입니다. 이 모델은 주어진 입력에 대해 응답을 생성하는 데 사용됩니다.

Q: ChatGPT를 통해 작성한 코드는 항상 100% 정확한가요?
A: 아닙니다. ChatGPT도 사람만큼이나 항상 정확하지는 않습니다. 따라서 코드를 실행하기 전에 결과를 검증하는 것이 좋습니다.

Q: ChatGPT를 사용하여 UI 개발이 실제로 편리해지나요?
A: 네, ChatGPT를 사용하면 일상적인 업무를 효율적으로 진행할 수 있습니다. 코드를 작성하는 데 도움을 줄 뿐만 아니라 흥미로운 작업흐름을 만들어줍니다.

Q: ChatGPT의 작성된 코드를 수정할 수 있나요?
A: 네, ChatGPT가 작성한 코드는 수정할 수 있습니다. ChatGPT의 제안을 기반으로 코드를 적합하게 수정할 수 있습니다.

Q: ChatGPT는 어떤 종류의 프로젝트에 활용할 수 있나요?
A: ChatGPT는 다양한 종류의 프로젝트에 활용할 수 있습니다. UI 개발, 소프트웨어 개발, 쿼리 작성 등 다양한 분야에서 유용하게 사용할 수 있습니다.

Q: ChatGPT를 사용하면 개발자의 역할이 대체되는 건가요?
A: 아닙니다. ChatGPT는 개발자의 역할을 보조해주는 도구입니다. 개발자는 여전히 필요하며, ChatGPT는 개발자의 작업을 더욱 효율적으로 만들어줍니다.

자료

Most people like

Are you spending too much time looking for ai tools?
App rating
4.9
AI Tools
100k+
Trusted Users
5000+
WHY YOU SHOULD CHOOSE TOOLIFY

TOOLIFY is the best ai tool source.