5월 2주차 주간회고

너무 많은 일에 치였다.

말 그대로 너무 많은 일에 치였다. 사이트 운영에는 정말 많은 노력이 소요된다.

어떤 일이 있었는가? (Fact)

SNS 로그인에 관련된 문제가 있었다.

• SNS 로그인 정책과 휴면 정책이 변경되면서, 기존에 있던 회원에 대한 고려가 부족해 문제가 생겼다.
• 휴면의 경우는 로그인을 하지 않은지 1년이 지나야 일어나는 일이며, 휴면 회원은 다시 휴면을 해제하러 오는 일이 잦지 않으므로 이러한 장애는 수면위로 떠오르기 정말 힘든 장애다.
• 이제서야 발견되어 내가 고쳤다. 다행히, 전임자가 여전히 회사에 다니는 도중이라 여러가지 궁금한점을 물어보고 조치가 가능했다.
• SNS 로그인 기능은 https 에서만 테스트가 가능하고, 기존 히스토리를 몰라 재연데이터를 만드는데 어려움을 느껴 많이 애를 먹었다.

프론트에서 화면이 깨지는 문제가 있었다.

• a.js 와 b.js 에서 각각 화면에 있는 공통 클래스에 대한 이벤트를 걸었는데, 이 두 .js 파일이 하나의 html 파일에서 불러와지면서 발생한 문제였다.
• 원인을 찾기 매우 힘들 뻔 했는데, 다행히 구글 크롬의 Elements > Event Listeners 탭을 통해 쉽게 발견할 수 있었다.
  • Ancestors 체크를 해제하면 정확히 해당 엘리먼트에 걸린 이벤트만 보이는데, 어떤 이벤트가 걸렸는지 알기에 너무 좋다.

구글 크롬 devtools 에는 무궁무진한 기능이 있으므로, 웹개발자는 이를 잘 활용하면 많은 문제를 해결할 수 있는 것 같다.

• jquery 의 경우, .off() 메서드로 걸린 이벤트를 지울 수 있다.
• jquery 의 경우, $._data($('#id')) 와 같이 Query selector 를 통해, 걸려있는 이벤트가 있는지 확인할 수 있다.
  • 이를 이용해, 이벤트가 걸려있다면, 이벤트 리스너를 등록하지 않고, 이벤트 리스너가 등록되어 있지 않다면 등록하는 방식으로 이벤트 리스너 중복 등록을 막았다.

UI/UX 개선 프로젝트를 약간 진행했다.

• 사용하지 않는 JS, CSS 를 제거하려 시도했다.
  • 참고 링크를 찾았다.
  • chrome devtools 에서 more tools > coverage 에 가면, 내가 해당 페이지에서 실제로 얼마만큼의 JS, CSS 코드를 사용하는지 알 수 있다.
• 다음부터는 프론트 개발 가이드에 따라 개발하도록 하자고 마음먹었다.
  • 네이버 Toast UI 개발가이드
    • 여러가지 관점에서 작성된 개발가이드이다. 잘 읽어보고 하나씩 정리해보자.

png 이미지를 수정해야 하는 일이 있었다.

• .png 이미지 파일의 경우 배경을 투명색으로 저장할 수 있다.
  • 일반 그림판에서 이를 편집하면 투명색이 깨진다.
  • 이 웹 서비스를 이용하면, 투명색이 깨지지 않게 크기조정 등을 할 수 있다.

MSSQL 슬로우 쿼리 프로시저를 개선해야 했다.

• 프로시저에서 일반 함수를 쓰면, 인덱스를 타지 않는 문제가 발생했었다.
  • 이는 임시테이블에 잠시 데이터를 넣었다가 다시 지우는 방법으로 해결이 가능했다.
• 암호화 테이블을 직접 이용하면 너무나 느린 문제가 있었다.
  • 암호화가 걸리지 않은 다른 테이블을 이용하자.
• 프로시저에서 변수를 선언할 때 타입이 varchar 라면 많은 크기가 필요하지는 않은지 다시한번 체크가 필요하다.
  • 평소에는 String 선언 시 크기를 정하지 않으니 이런 것들에 대해 간과하기가 너무 쉬웠다.

어떤 감정을 느꼈는가? (Feeling)

• 너무 바쁘다고 느껴서 스트레스를 받았다.
• 잘 할 수 있을만한 업무를 할당 받았을 때는 자신감을 얻고 자존감이 생겼다.
• 처음 해보고 처리하기 까다로워 보이는 업무를 받았을 때는 왠지 모르게 너무 답답했다.

무엇을 배웠고 앞으론 어떻게 할 것인가? (Findings & Future)

• 위에 기재한 문제에 대한 해결법을 배웠다.
• SNS 로그인, 휴면 회원과 같은 테스트하기 힘든 도메인은 미래에 어떻게 테스트를 할 것인지 생각해보자.
• js 코드는 최대한 공통을 뽑아내려고 하기보다는 최대한 나눈 뒤에 공통을 나중에 합치자.
• 프론트엔드 코딩 컨벤션을 공부하며 정리해보자.
• Chrome Canary 에서 지원하는 Recoder 로 테스트를 정리하는 방법을 좀 정리해볼 것이다.
• 내가 너무 주석을 달지 않아 동료에게 불친절하다는 사실을 깨달아 javadoc 을 통해 주석을 제대로 작성할 것이다.
• 배운것들을 차근차근 정리해 포스팅할 것이다.

기타 내가 메모했던 것들

Intellij Diff 툴

Intellij 에서 제공하는 diff 도구가 있다. 알아보자.

Chrome 에서 script 맘대로 바꿔서 실행하기

Script 를 지운 뒤에 내가 원하는 Script 를 적고 저장하여 마음대로 바꿔서 실행할 수 있다. 알아보자. Chrome Source 탭에서 소스코드 검색도 가능하고, 변경하여 저장도 가능하다.

JQuery 의 이벤트 리스너 문제

다들 JS 를 갖다 끼우면서 click 이벤트를 넣으니 수많은 문제가 발생했다.

• JQuery 에서 .off() 메서드로 jQuery 로 생성한 이벤트를 지울 수 있다.
• $._data($('#id')[0], "events") 와 같은 형식으로 Element 에 걸린 이벤트를 확인할 수 있다.
• 두 개를 적절히 이용하면, 이벤트가 걸린 경우 이벤트 걸지 않기, 이벤트가 걸린 경우 이벤트 지우기. 등의 행위를 할 수 있다.

구글 크롬 Recoder 를 이용한 테스트 자동화

• 구글 크롬 Recoder 는 Puppeteer 를 기반으로 테스트를 자동화해준다. 매우 편리하다.
  • 현재는 카나리 버전에서만 이용 가능하다.

주석 제대로 작성하기

동료들이 내 코드를 이해하기 쉽도록 제대로 주석을 작성해보자. 제대로 주석을 작성하기 위해서 Java docs 를 많이 읽고 어떤 주석이 도움이 되는지 정리해보자.

너무 많은 업무...

너무 많은 업무를 했다.