부트캠프 26주차 회고를 적어본다. 이제 수료까지 단 하루의 출석일만이 남았다.
최종 프로젝트
이번 주에는 프론트엔드 UX/UI 개선 등 추가적인 수정 사항을 반영하고, 배포 작업을 진행하였다. AWS 배포의 경우 담당자 분께서 약 1주일 간 사투를 벌인 끝에 성공하였다. 로직 설계, UX/UI, 코드의 유지보수성, 재사용성 등의 관점에서 아쉬운 점도 있었지만, 좋은 팀원과 멘토님 덕분에 기간 대비 훌륭한 결과물을 만들 수 있었다고 생각한다.
멘토링
이번 주 수요일에는 멘토님과 함께 지난주에 확인하지 못한 기능을 살펴보고, 발표 자료에 대한 피드백을 받았다. 일부 기능이 예상대로 작동하지 않는 것을 발견해 다음 날에 수정할 수 있었다. 발표 자료의 내용에 대한 피드백과 더불어, 심사위원 분들이 고년차 직장인이신 만큼 깔끔한 템플릿을 사용할 것을 말씀해주셨다. 템플릿 수정은 너무 오래 걸리니 꼭 반영하지 않아도 좋다고 덧붙이셨지만, 담당 팀원분들께서 반영해주셨다.
문제 상황
배포 환경에서 스타일이 깨지는 문제
-
설명: 배포 환경에서 스타일이 깨지는 문제를 겪었다. 로컬 환경에서는 설정한 스타일대로 잘 보이던 버튼이 아무 스타일도 적용되지 않은 상태로 보이기도 하고, 헤더가 깨지기도 했다.
-
원인: S3에
index.html정적 파일을 업로드하는 방식으로 프론트엔드 배포를 진행했는데, 이 과정에서 Vue 프로젝트가 돌아가는 로컬 서버와는 작동 방식이 달랐던 것으로 추정된다. 로컬 서버에서 돌아가는 페이지는 아래와 같이 개발자 도구를 켰을 때Vue가 나타나지만, 배포 서버에서는Vue가 나타나지 않는다.
-
해결 방법:
- 버튼 스타일 깨지는 문제: 컴포넌트화 한 버튼을 사용하지 않고 별도의 html 코드로 만든 버튼이 문제였다. 해당 버튼을 공통 컴포넌트로 수정한 후 해결되었다.
- 헤더가 깨지는 문제: 헤더 컴포넌트에 바인딩하는 객체는
to속성을 가지고 있었다. 로컬 환경에서는 이 부분이 없어도 잘 돌아갔지만, 배포 환경에서는 이 부분이 없으면 헤더가 뜨지 않았다. 아래와 같이 코드를 수정한 후 해결되었다.
개발과 ChatGPT
프로젝트를 진행하며 ChatGPT의 도움을 받는 일이 종종 있었다. 대 GPT의 시대인 만큼 도움을 받는 것이 나쁜 것은 아니지만, 정말 조심해서 써야 함을 알게 되었다. ChatGPT의 도움을 받은 코드에는 다음과 같은 이슈가 발생하였다.
- 영어로 된 주석을 달아줌
- 기존에 작성되어 있던 주석을 삭제함
if혹은switch문으로 작성한 코드를 멋대로 삼항 연산자?를 이용한 코드로 수정함- 선언한 변수를 없애고 메서드에 인자로 직접 넣어버림
- 작동하지 않는 코드를 마음대로 넣음
이와 같이 코드가 수정되면 유지보수성이나 가독성이 떨어지고, 디버깅이 어려워지게 된다. 필자는 이런 코드를 응답으로 받으면 고쳐서 다시 보내달라고 요청하거나, 수정할 부분이 어디인지 짚어달라고 요청한 뒤 직접 수정하기도 했다. 수정된 코드 전체를 그대로 붙여넣는 방식에 비해 시간은 오래 걸렸지만, 보다 안정적으로 기존 코드 스타일을 유지할 수 있었다.
팀원의 PR에서 이런 식으로 주석이 망가진 코드가 올라오면, 해당 부분의 코드를 이전처럼 다시 수정할 것을 제안하였다.
ChatGPT가 생산성을 높여주는 도구임에는 분명하지만, 개발을 잘 하기 위해서는 이를 맹신하지 않고 나의 상황에 맞게 잘 통제할 수 있어야 한다.
느낀 점
길다고 생각했던 최종 프로젝트가 막바지에 이르렀다. 남은 주말 동안 추가 작업도 마무리하여 잘 매듭지어 보려 한다.
