프로젝트 코드 리팩토링 - 태그버튼 관련 js와 trim을 이용한 공백 제거

 

 

 

 

조 프로젝트의 매장관리 페이지에서 매장을 대표할 태그를 작성하는 기능이 존재한다.

오늘은 이 부분에 대한 html 마크업과 js 코드를 수정해봤다

 

 

 

기존의 html 마크업

 

 

 

 

기존의 js 코드이다.

 

 

여기서 코드의 의문점은

1. 왜 이 부분만 window.onload 가 들어가야 하는지

2. 밑에 이미 중복되는 코드 존재

 

이 부분이었다.

 

알고 보니 window.onload로 따로 코드를 작성해주지 않으면,

태그를 처음 작성할 때는 태그의 텍스트와 삭제할 수 있는 X 버튼이 한 묶음으로 나오지만,

새로고침을 하면 이 두 개가 정말 분리되어 버리는 문제가 발생한다는 점이었다.

 

 

기존 태그의 텍스트도 버튼 형식인데, 부트스트랩의 close 버튼을 가져와서 쓰려다 보니 이 또한 버튼 형식으로 작성했던 것이다.

그래서 class명 자체는 btn이지만, html 마크업을 div로 바꾸었다.

( 태그의 텍스트 button 안에 태그를 삭제하는 X 버튼인 div를 넣는 구조)

 

 

이렇게 작성 후, 위의 window.onload와 중복되는 모든 코드를 제거 후,

삭제 이벤트를 부여하는 코드만 따로 빼주었다.

 

그리고 확인하기 위해 실행시켜보니 코드가 전과 같이 잘 작동이 되었다 :)

 

위의 코드에서 남은 코드

 

참고로, ${tmp}로 사용자가 태그의 텍스트로 입력한 값을 받아올 때,

깔끔한 코드를 위해 저렇게 마크업과 떨어지게 작성하면 tmp에 들어가는 텍스트의 마지막 부분에 띄어쓰기로 공백이 한 칸

들어가게 된다.

사용자가 입력 한 태그의 텍스트는 "떡튀순"이지만, "떡튀순 "으로 읽어진다. (DB에서 데이터가 일치하지 않아서 에러 발생)

 

 

 

위의 에러로 인해 코드의 깔끔함을 포기하고 <button...>${tmp}<button> 이렇게 붙여서 작성하는 것보단,

자바스크립트 코드에서 태그의 텍스트 부분에. trim()을 붙여줘서 텍스트의 앞 뒤 공백을 제거하는 방법이 더욱 깔끔한 방법이 될 것이다.