[챗GPT로 코딩 공부] 페이지네이션 버튼 누적 현상 해결하기

내일배움캠프 수료생들은 챗GPT를 어떻게 개발 공부에 활용할까요?
Jun 28, 2024
[챗GPT로 코딩 공부] 페이지네이션 버튼 누적 현상 해결하기
✍🏼
챗GPT, 개발 공부에 있어서 든든한 친구 같은 존재이죠. 내일배움캠프의 수강생들도 혼자 공부할 때에는 챗GPT의 도움을 받고 있는데요. 오늘은 내일배움캠프 수료생들의 챗GPT 경험담을 보고, 여러분의 개발 공부에 적용해봅시다.
 
프론트엔드 작업 중에 페이지네이션 기능을 구현하면서 발생한 문제를 해결하기 위해 여러 방법을 시도했습니다. 초기 목표는 다음 페이지 버튼을 클릭했을 때 현재 페이지의 내용이 모두 없어지도록 하는 것이었으며, 이후 새로운 페이지 버튼들을 그리도록 하는 것이었습니다. 그러나 실제로는 현재의 페이지 버튼들이 없어지지 않고 그 아래에 새로운 페이지 버튼들이 추가되는 문제가 발생했습니다.
이 문제를 해결하기 위해 몇 시간 동안 다양한 접근 방식을 시도했습니다. HTML과 JavaScript 코드를 반복적으로 검토하고, 여러 디버깅 방법을 활용했지만 원인을 파악하는 데 어려움을 겪었습니다. 결국, 몇 시간의 노력 끝에 더 나은 해결책을 찾기 위해 챗GPT에게 도움을 요청하기로 했습니다.
 

페이지네이션 버튼 누적 현상

챗GPT에게 처음 질문한 내용은 "다음 페이지 버튼을 클릭했을 때 현재 페이지의 버튼들이 없어지지 않고 그 아래에 새롭게 추가되는 이유가 무엇인지"였습니다. 이 질문에 대해 챗GPT는 페이지 버튼을 제거하는 함수의 로직과 페이지네이션을 새로 그리는 방식에 대해 질문했습니다. 구체적으로, 페이지 버튼을 지우는 과정에서 문제가 발생할 수 있는 지점을 확인하기 위해 함수의 상세 코드와 도움을 요청했습니다.
 

원인은 오타!

챗GPT는 이 코드를 검토한 후, 문제의 원인을 파악했습니다. 첫 번째 지적은 내가 페이지 버튼을 지우는 부분에서 발생한 오타였습니다. 챗GPT는 제가 #pages이라는 아이디를 가진 컨테이너의 자식 요소들을 지우려고 했으나, 실제로는 #pages 가 아닌 다른 컨테이너를 지우고 있다는 것을 발견했습니다. 특히, 제가 실수로 페이지 버튼이 아니라 페이지 내용이 달리는 div의 자식 요소들을 지우고 있었다고 설명했습니다.
 
챗GPT의 조언에 따라 코드를 수정한 결과, 문제는 해결되었습니다. 페이지 버튼을 지우는 올바른 컨테이너를 지정한 후, 페이지 버튼들이 올바르게 갱신되었고, 기존 페이지 버튼이 사라지고 새로운 페이지 버튼이 제대로 그려졌습니다.
 
 
이 과정을 통해 큰 도움을 받았지만, 만약 다시 챗GPT에게 질문을 해야 한다면, 다음과 같은 방식을 사용할 것입니다. 첫째, 더 구체적이고 명확한 질문을 할 것입니다. 예를 들어, "다음 페이지 버튼을 클릭했을 때 현재 페이지 버튼들이 없어지지 않고 그 아래에 추가되는 현상이 발생하는데, 페이지 버튼을 올바르게 갱신하려면 어떻게 해야 하나요?"와 같이 질문의 범위를 명확히 하겠습니다.
둘째, 문제의 재현 과정을 구체적으로 설명하고, 관련 코드를 최대한 상세히 제공할 것입니다. 이를 통해 챗GPT가 문제를 정확히 이해하고 보다 구체적이고 실질적인 조언을 제공할 수 있을 것입니다. 또한, 디버깅을 위해 사용한 방법과 시도한 해결책들을 미리 설명함으로써 불필요한 조언을 피하고 더 집중된 해결책을 받을 수 있도록 할 것입니다.
 
 

내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다

내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.
 
 
CREDIT
글 | 김민선 내일배움캠프 수료생 편집 | 정효재 팀스파르타 에디터
Share article
Subscribe to our newsletter
RSSPowered by inblog