24.03.10~24.03.17

업무

신규 기능(Trigger ) 관련 버그 수정

offset width, height 계산 관련 오류

target element의 너비, 높이를 정확하게 계산하지 못해 올바른 곳에 요소가 위치하지 못하는 버그가 발생했다.

 

문제는 대부분의 상황에서는 잘 동작하는데,

개발자 도구를 켰을 때, 화면 우측 요소를 타겟팅할 때 등 알 수 없는 케이스에서만 이러한 일이 발생한다는 것!

 

이런저런 방향으로 디버깅을 한 결과...

target element 너비 높이를 계산하기 위해 사용한 hooks에서

callback ref의 호출 시점이 painting이 완료된 시점과 달라 해당 문제가 발생했음을 알 수 있었다.

→ callback ref에서 대상 element의 너비, 높이가 변하지 않을 때까지 해당 함수를 호출하는 형태로 해결할 수 있었다.

 

동작은 문제없이 했지만,

원인에 대한 원인(단순히 적용할 css 속성이 많은 케이스에서 발생하는 건가?)을

아직도 정확하게 알진 못해 아쉬움이 남았다. 추가 탐구 필요!

 

가이드 간 이동 시, 이전 target의 이벤트가 남아있던 버그

단순 논리 오류로 인해 발생한 버그!

 

기존 가이드 종료는 click event를 통해서만 발생했었는데,

신규 기능이 추가되면서 다른 가이드가 실행됨으로 인해 종료되는 케이스가 발생하게 되었고

useEffect의 cleanup 함수를 사용해 해결해 줬다.

 

trigger event 변경사항 반영

기존 다른 data property를 통해 제어하던 정책이 변경되면서, DB 구조도 이에 맞게 수정 후 반영했다.

 

신규 기능 관련 UI 변경사항 반영

Admin page내 trigger 관련 디자인 사항을 적용했다.

 

그 과정에서 next js의 routing group을 사용, 다른 url의 페이지들에 공통 layout을 적용했고,

관련 데이터 Read 기능을 추가했다.

 

회고

외부 API와 테스트

현재 개발 중인 서비스는 기본적으로

우리가 제공한 코드를 → 고객사 서비스 위에서 실행시키는 형태 로 동작한다.

 

이때 고객사 서비스는 웹 기반 서비스에 해당하며

고객사에 따라 그 구성이나 동작 방식이 천차만별일 수밖에 없다.

 

(일례로, AWS의 경우 기존 로직으로는 정상적으로 요소 타겟팅이 이뤄지지 않는 버그가 있었는데

그 이유는... 특정 기능 영역 전체가 iframe으로 구성되어 있어 document 관련 API가 예상과 다르게 동작했기 때문)

 

특히 내가 맡은 부분은 고객사에서 생성한 데이터를 기반으로

고객사 페이지 위에 우리가 제공하는 다양한 요소들을 그려주는 것인데 (script와 kit package라고 부른다)

 

최종적으로는 브라우저 내에 해당 요소가 정책에 맞게 뜨는지를 확인해야 하기 때문에

결국 직접 브라우저를 띄워두고, 사이트에 접속한 뒤, 각 페이지 위에서 동작을 테스트하는 과정이 필수적이었다.

→ 그리고 이 과정이 존재함으로써... 테스트한 페이지 이외의 환경에서도 100% 동작함을 보장할 수 없는 한계가 발생하고 말았다.

그러자 이런 고민이 들었다.

SW 최종 결과물이 결국 외부 API에 의존적인 경우

(제공하는 서비스도 브라우저에 의존적, 고객사의 서비스도 브라우저에 의존적)

이에 대한 테스트나 품질 보장은 어떻게 할 수 있는 걸까?

 

당장 테스트만 하더라도...

jest나 react test library를 사용해 의도대로 동작하는지 테스트를 해도,

이것이 (온갖 예외 케이스가 존재하는) 모든 고객사 서비스에서 동작함을 의미하지는 않았다.

매번 고객사가 늘어날 때마다 이럴 순 없는데...

그리고 이로 인해

특히 신규 고객사가 추가되었을 때

'해당 고객사에서도 정상적으로 동작한다'라는 자신감 보다

'알 수 없는 예외 케이스가 등장해 오류가 발생할지도 모른다'라는 불안감이 점차 생겨나게 되었다.

 

결국 개발자가 잘 처리하는 방법 말고는 없는 걸까? 다른 곳에서는 어떻게 이를 해결하고 있을까??