이전에 작업한 SMS 웹 전송 시스템 유지 보수 (2)

역시 새벽에 할 거 없을땐 코딩하고 게임 번갈아 가면서 하는게 최고죠. 또 다시 SMS 전송 시스템 업그레이드 입니다.

* 이전 업그레이드 (1) 참고

 

1. 파일 편집 열 너비가 고정 너비를 가지도록 수정

기존에 Vuetify Table을 이용하면 각 열 너비가 컨텐츠 내용에 따라 맞춰져, 페이지를 넘길때마다 열 너비가 마구잡이로 바뀌어 UI가 깨지는 듯 한 느낌이 들었는데요. 이를 조금이라도 완화하고자 파일 편집 열을 고정 너비로 수정했습니다.

 

이렇게 해두면 페이지를 넘길 시 파일 이름, 업로드 날짜는 여전히 컨텐츠 내용에 따라 바껴서 조금 정신 사나울 지 몰라도 파일 편집 열이라도 고정이라 변화를 조금 줄일 수 있게 되었습니다.

 

많은 열 중에서 파일 편집 열을 고정 너비로 수정한 건 기존에 파일 이름이 너무 길어지면  파일 이름이 옆으로 공간을 많이 차지하게 되면서 파일 편집 부분을 밀어내, 파일 편집 부분의 삭제 & 다운로드 버튼이 두 줄로 표시되는 문제가 있었기 때문입니다.

 

고정폭으로 지정함으로써 무조건 삭제 & 다운로드 버튼이 한 줄로 표시됩니다.

 

추후에는 합리적으로 파일 이름과 업로드 날짜 열 역시 고정 너비로 수정할까 고려중입니다.

 

2. 로그 화면 개선

이모지와 유니코드 구분자인 ─ 문자를 활용해서 로그 화면을 이쁘게 꾸몄습니다.

왼쪽이 기존 로그고 오른쪽이 신규 로그입니다. 확연히 차이가 보이시죠?

참고로 이 로그는 백엔드 자체에서 바꾼게 아니라 프론트엔드에서 치환(Replace) 만 진행한 것입니다.

 

백엔드(서버)의 로그 형태는 그대로고, 프론트엔드 쪽에서만 정규식을 이용해 이쁘게 바꿨습니다.

참고로 로그 꾸미기와 이에 관련한 정규식 치환 코드는 전부 ChatGPT가 생성해줬습니다.

AI 최고!

 

추가로 공부하면서 안 사실인데 자바스크립트는 문자열 replace/replaceAll 함수에 replace 조건으로 regex(정규식) 을 넣을 수 있더라구요. 덕분에 replaceAll 하나로 쉽게 백엔드 로그를 프론트에서 꾸밀 수 있었습니다.

 

Vue 프론트엔드단 코드는 이런식입니다. 신기하죠? 자바스크립트는 정규식을 입력할 때 / / 라는 문자로 정규식 입력 구분을 하고 끝에 g(global) 같은 옵션을 주더라구요.

그리고 replace 이후 변경될 값에서 $1 $2 와 같이 그루핑한 대상을 그대로 지정해줄 수도 있었습니다.

 

메서드(함수) 체이닝 을 이용해 깔끔하게 서버 문자열을 치환한 코드 모습입니다.

 

3. 로그 전체화면 기능 추가

말 그대로 로그를 전체화면에서 볼 수 있는 기능을 추가했습니다.

 

4. 로그 목록 기능 추가

지금 까지의 로그 목록을 볼 수 있는 기능을 추가했습니다. (History)

참고로 로그 목록의 경우 백엔드에서 지금 까지 모든 로그 파일을 읽고 빈 로그가 아닌 경우만 그 날짜의 로그 파일을 응답합니다. 

 

5. 예약 작업 삭제 알림 추가

예약 작업을 삭제하면 한 번 더 확인 메세지를 띄우게 수정했습니다. 기존엔 이 메세지가 없어서 예약 목록에서 보기 버튼을 누를려다 실수로 삭제를 하면 단번에 예약 작업이 썰리는 슬픈 상황이 생겼는데, 이제는 그럴 일이 없습니다.

 

+ 백엔드 코드 클린업

지금까지 업데이트는 전부 프론트엔드(화면) 위주로 보여드렸지만, 실제로 백엔드에서 변경점도 많습니다. 백엔드에서 변경점이라면 기존에 로깅 라이브러리로 사용하던 winston 의 설정 파일만 js고 나머지는 전부 ts였는데 이 설정파일도 ts로 리팩토링하고, 쓸모 없는 주석을 모두 없앴으며 로그 목록을 응답하기 위해 서버에서 처리 코드 역시 추가되었습니다.

 

이외에도 서버 코드에서 조금 남아있는 console.log는 모두 제거하고 winston 로깅 라이브러리의 logger.info(...) 코드로 전부 변경하였습니다. * 화면 출력만이 아닌 로깅도 동시에 하도록 수정했다는 뜻.