[20220203] 자바스크립트 스파게티 코드(?) 개선하기

개발자로 취직한 뒤 두 번째 유지보수 건이 들어왔다. 이 프로젝트는 스프링 부트로 구성되었지만, 생각보다 코드가 복잡하게 얽혀있었다. 아직 경험이 부족해 이것도 스파게티 코드라고 해야 할지는 모르겠는데, 왜 이렇게 짰는지 모를 부분이 꽤 있었다.

 

첫 번째로, 자바 코드의 Controller에서 DTO를 생성하고 DTO의 모든 변수들을 getter로 뽑아 변수를 만들어 놓았다. (왜죠?) DTO의 변수명이 마음에 안 들었던 걸까? 애초에 DTO의 목적 자체가 데이터베이스의 Row를 한 번의 쿼리로 가져와서 필요한 부분에 쓰기 위함이 아닌가? 변수로 선언하고 각각의 변수를 하나씩 다른 DTO에 setter로 넣어주고 그걸 ModelMap 객체로 내보낸다. 게다가 if-else if-else 문으로 경우에 따라 뽑아낼 DTO를 바꿔가며 정성스럽게 변수를 넣어준다. if문으로 DTO만 바꿔주고 새로운 DTO에 set 해주는 부분은 공통으로 처리하면 코드는 엄청 줄어드는데... 내가 모르는 게 있는 건지 아니면 작성하신분이 퇴사 전에 뭔가 잔뜩 쌓여있었던 건지 모르겠다. ㅠㅠ 나중에 이 부분은 수정해보는 것으로...

 

다음으로, 자바스크립트 코드에서는 상당히 오래돼 보였다. var로 선언된 변수들 ajax가 아니라 jsp에서 표를 hidden으로 만들고 그걸 CSS selector로 가져와 변수를 선언하는 등.... var가 문제가 되는 것은 블록문 안에서 지역 변수로만 쓰이는 게 아니라 코드 어디에서든지 쓰일 수 있는 전역 변수이기 때문이다. 게다가 재선언이 가능해서 전역 변수로 코드 전체에서 사용되는 변수와 같은 이름으로 재선언해서 사용했다가는 문제가 생겨버린다. (다른 언어의 변수 선언 키워드였다면 재선언 시에 이름이 중복된다며 선언할 수 없게 되어있을 것이다.) 내가 본 코드들에서는 첫 번째 블록에서 var 키워드로 선언해 놓고, 다른 블록에서 또 선언하고, 또 다른 블록에서 선언해서 쓰기를 반복했다. 중복되는 코드는 가능하면 단일한 function으로 추출해서 필요할 때 호출해서 사용하자. 게다가 더 화가 나는 것은 변수명도 자기만 알 수 있게 "math", "select" 이런 식으로 지어놨다. 협업은 전혀 고려하지 않은 명명법이다. ㅠㅠㅠㅠ 자바와 자바스크립트 변수명은 딱 보면 알 수 있는 이름으로 camelCase로 지어주자.(파이썬이라면 snake_case로...)

 

이 건을 설 전에 받았었는데, hidden으로된 표 부분을 ajax로 고쳤어야 했다. 그냥 처음이니 쉽게 넘어가려고 했는데 편집 부분에서 DB의 추가적인 데이터가 필요하단다. ㅠㅠ 눈물을 머금고 내일은 ajax로 코드를 수정해보려고 한다.