본문 바로가기

Programmer/JAVASCRIPT

 (21)
유지보수 힘든 JSP를 Claude Code로 구조화해본 기록 드디어 틈새 시간이 조금 생겨서,Claude Code를 활용해 유지보수가 너무 힘들었던 기존 JSP를 정리하는 테스트를 해봤다. 이번에 손댄 화면은 특정 타입에 따라 표시되는 내용이 달라지는 구조였는데,기존에는 타입마다 소스가 덕지덕지 붙어 있는 상태였다. 여러 사람의 손을 거쳐 수정되다 보니, 타입 하나만 추가하려고 해도 어디를 건드려야 할지부터 막막한 수준이었다.말 그대로 소스만 봐도 머리가 아파오는 구조였다.왜 이 화면이 특히 힘들었나이 페이지가 더 골치 아팠던 이유는 단순히 조건문이 많아서가 아니었다. $().load() 방식으로 다른 페이지를 불러오고 있어서실제로는 JSP가 2개가 얽혀 있었고, 변수 선언도 여기저기 흩어져 있었다. 중복 소스는 기본이고, 왜 존재하는지조차 알기 어려운 코드도 적..
jQuery UI Sortable 사용 시 checkbox 클릭이 안 되는 원인과 해결 방법 유지보수 중이던 화면은 항목 순서를 sortable로 변경할 수 있고,각 항목마다 checkbox 옵션도 함께 있는 구조였습니다. 이 화면은 웹과 앱에서 함께 사용하고 있었는데,웹 브라우저에서는 별다른 문제가 없었지만 앱에서는 checkbox가 정상적으로 클릭되지 않는 문제가 발생했습니다. 항목 순서를 변경하는 기능 자체는 정상적으로 동작했지만,같은 영역 안에 있는 체크박스만 유독 클릭이 불안정했던 것입니다. 처음에는 단순한 체크박스 이벤트 문제처럼 보였습니다.하지만 원인을 확인해보니, 실제 문제는 jQuery UI Sortable이 드래그 시작을 감지하는 방식에 있었습니다. 이번 글에서는 이 문제가 왜 발생했는지, 그리고 가장 깔끔하게 해결한 방법이 무엇이었는지 예제와 함께 정리해보겠습니다.문제 상황유..
회사 개발환경에서 AI 코드 도구를 써보려 했던 이야기 개발 커뮤니티를 보면 Claude code나 Codex 같은 AI 코드 도구를개발환경에 연결해 생산성을 높이고 있다는 이야기를 자주 볼 수 있다. 나 역시 개인적으로 여러 가지를 만들어보면서AI 도구가 개발 생산성을 꽤 많이 높여준다는 것을 체감하고 있었다. 그러던 중 회사에서도기존 소스를 AI 코드 도구를 활용해 정리해볼 수 있는지 테스트해보라는 요청이 있었다.그래서 테스트 삼아 복잡한 JSP 파일을 Claude에게 넘겨 리팩토링을 시켜보았다.회사 개발환경현재 회사 개발환경은 대략 다음과 같은 구조다.SVN 기반 형상관리JSP 중심의 레거시 구조여러 기능이 하나의 파일에 몰려 있는 형태Claude에게 JSP 정리를 시켜봤다이번 테스트의 목표는 단순했다.중복 코드 정리로직 분리가독성 개선현재 서비스는 처..
jQuery Ajax async:false 사용 시 렌더링이 멈추는 이유와 해결 방법 웹 개발을 하다 보면 jQuery ajax에서 async:false를 사용했을 때로딩 UI가 보이지 않거나 화면 렌더링이 멈추는 현상을 경험할 수 있습니다. 최근 예전에 만들어진 소스를 유지보수 중에도 “로딩이 보이지 않는다”는 이슈가 발생했습니다.확인해보니 로딩 이미지를 표시하는 코드가 분명히 존재했지만 실제 화면에서는 전혀 보이지 않았습니다. 코드를 확인하던 중 ajax 요청에서 async:false가 사용되고 있었고,이 때문에 브라우저 렌더링이 차단되어 로딩 UI가 표시되지 않는 문제였습니다.이번 글에서는 async:false가 왜 렌더링을 막는지, 그리고 어떻게 해결할 수 있는지 정리해보겠습니다.1. async:false란 무엇인가async:false는 동기(Synchronous) Ajax 요청입..

티스토리툴바