챗GPT, 개발 공부에 있어서 든든한 친구 같은 존재이죠. 내일배움캠프의 수강생들도 혼자 공부할 때에는 챗GPT의 도움을 받고 있는데요. 오늘은 내일배움캠프 수료생들의 챗GPT 경험담을 보고, 여러분의 개발 공부에 적용해봅시다.
무한 새로고침 오류 발생
카카오 페이지를 따로 두고 카카오 OAuth 페이지에서 받아온 코드를 이용해 백엔드 서버에서의 인증을 마치고 유저 정보를 로컬 스토리지에 저장하였습니다. 그 후 “로그인이 완료되었습니다.”라는 모달 창과 함께 새로고침을 통해 메인페이지로 이동하게 하려고 하였으나 카카오 페이지에서 무한 새로고침이 되는 문제가 발생하였습니다.
최종 프로젝트에서 프론트엔드를 처음 접해본 저는 GPT에게 간절하게 소원을 빌었습니다.
프롬프트: 카카오 로그인 후 homepage로 이동해야 하는 상황에서 카카오페이지 무한 새로고침 문제 발생
GPT는 쿠키와 캐시 삭제, 브라우저 문제, CORS, 네트워크 상태 등등의 가능성을 제시해 주었습니다.
그러나 백엔드 서버에서 인증이 잘 된 것을 확인했고, 또 로컬 스토리지에 서버에서 온 응답(유저 정보)도 잘 담기는 것을 확인했기에 조금 더 문제를 구체화하여 물어봤습니다.
프롬프트: 내가 만든 카카오 페이지에서 OAuth 사용해서 인증 마치고 유저 정보까지 로컬 스토리지에 저장했어. 그걸 확인하고 새로고침으로 홈페이지로 이동하려고 하는데 무한 새로고침이 뜨네
GPT는 로컬 스토리지에 담겨있는지 여부와 검증 과정에 문제가 있다고 생각했는지 계속 로컬 스토리지를 확인해 보라는 답변만 받아 곤란했습니다.
마지막 방법으로 카카오 페이지에 대한 vue3 코드를 모두 보여준 후 무한 새로고침에 대해 문의하였습니다.
이번에는 다행히도 제가 몰랐던 부분이 어딘지 정확히 캐치해 주었습니다. vue3에 있는 다양한 라이프사이클 훅을 설명해 주면서 created라는 라이플사이클 훅 내부에 인증 코드 발급을 충분히 기다리지 않고 새로고침을 한 것이 문제였습니다.
저는 인증 정보가 로컬 스토리지에 담기는 것을 확인했기 때문에 이런 문제인지 몰랐는데 그 짧은 찰나에 1. 인증 요청 → 2. 새로고침 명령 → 3. 인증 정보 도착 순서로 일어났기 때문에 새로고침이 계속해서 일어난 것이었습니다. 이후에 async created() + await 인증받는 로직 조합으로 무한 새로고침을 해결하였습니다.
여기서 헤맸던 이유는 프론트엔드 코드가 돌아가는 것에만 만족하고 어떻게 동작하는지 완전히 이해하지 못한 채로 GPT에게 ‘해결해 줘.’라는 식으로 질문했기 때문이라고 생각합니다.
어차피 내 코드는 내가 이해해야 하는 법이기 때문에 이 두 가지 방법을 추천드립니다.
1. 코드를 완전히 이해한 후에 구체적인 질문을 하기
2. 너무 막연하다면 연관된 모든 코드들을 보여주기
내일배움캠프가 여러분의 러닝메이트가 되어드리겠습니다
내일배움캠프의 많은 수강생들이 부트캠프 생활을 수료하고 현업에서 개발자로 활약하고 있습니다. 내일배움캠프는 모든 운영진이 교육, 특강, 12시간 밀착 케어, 찐한 관리, 인재 채용까지 열과 성을 다해 수강생들의 꿈을 지원하고 있습니다. 수많은 장애물을 넘을 수 있도록 내일배움캠프가 든든한 러닝메이트가 되어드리겠습니다. 내일배움캠프과 함께 여러분의 개발자 여정을 시작하세요.
CREDIT
글 | 장동하 내일배움캠프 수료생
편집 | 김진원 팀스파르타 객원 에디터
취업 준비, 어디서부터 시작해야 할지 모르겠다면?
🧐비전공자인데 IT 업계 취업할 수 있을까?
😟프로젝트 경험이 부족한데, 어떻게 준비해야 할까?
🥺IT 기업으로 이직하고 싶은데 뭐부터 시작해야 할까?
이런 고민을 하고 있다면, 내일배움캠프의 IT 취업 컨설팅을 받아보세요.
취업 코칭 전문가들이 여러분의 고민을 해결해 드립니다.
다음 링크에 이메일을 입력하시면 메일로 1:1 커리어 상담권과 취준 자료집을 보내드릴게요.
Share article
Subscribe to our newsletter