23.09.17~23.09.24

업무

1. 신규 서비스 관련 기능 개발

회사에서 새로 개발하는 mvp 관련 기능 개발을 진행했다.

사용자의 웹 페이지에 접근해 DOM을 조작하고, script를 삽입해 데이터를 불러오는 등

기존 서비스 개발과는 다른, 새로운 형태의 요구 사항을 구현해야 했다.

각 요구 사항을 직접적으로 개발해본 팀원이 한 명도 없었기 때문에, 우선 한 사이클을 돌리는 데 집중한 한 주!

1) chrome extension을 통한 HTML 조작

https://www.youtube.com/watch?v=GF_3kGzJpCA 

이전에 감명 깊게 본 컨퍼런스.

크롬 익스텐션을 활용해 빠르게 프로토타입을 만들고, 실제 유저 환경에서 테스트하는 모습이 인상적이었다.

 

마침 이번 서비스도 익스텐션을 통해 사용자의 웹 사이트를 조작해야 했고

본격적으로 업무 분배를 하기 전, 작은 기능을 개발해 직접 적용까지 해봤다.

익스텐션을 통해, 사용자가 hover한 요소를 빨갛게 바꾼 모습

HTML, CSS, JS로 코드를 작성할 수 있기 때문에 → 마음대로 요소를 조작하고, 스타일을 변경하고, 데이터를 불러올 수 있는데...

이 말인즉, 대부분의 신규 or 수정 기능을 배포 중인 웹 서비스에서 직접 확인할 수 있다는 것!

 

서비스를 운영하다 보면 기획, 디자인적인 측면에서 '이런 식으로 만드는 게 사용하기 편할까? 좋을까?' 란 고민을 할 때가 많은데...

열심히 화이트보드나 피그마에 만들어봐도, 실제 사용자가 쓰는 환경에서 테스트하는 것과는 차이가 발생할 수밖에 없다.

→ 이때 해당 기능에만 집중한 vanllia code를 빠르게 작성해 테스트해볼 수 있을 테다.

2) script 생성 (ft 번들링)

메인 업무... 이자 날 가장 괴롭힌.

사용자의 웹 사이트에 우리의 script를 삽입해, 입력했던 정보에 맞게 화면 요소를 변경하는 기능을 개발했다.

 

처음에는 해당 script에 데이터를 조회하고, 받아온 데이터를 적용시키면 되겠지...라고 생각했는데.

script를 생성하는 시점과, 실제로 해당 script가 동작하는 시점에 명확한 차이가 존재하고,

해당 script는 우리 서비스가 아닌, 사용자 서비스에서 실행되기 때문에(수만 개의 요청이 발생할 수도 있음 + fetch 성능)

데이터가 입혀진 상태의 script를 db에 저장하고, 사용자 script는 저장된 JS파일을 실행하기만 하게끔 만들었다.

 

수많은 우여곡절을 겪었는데...

결론적으로는

1) script 저장 요청 발생

2) server 측에서는 필요 로직을 문자열로 작성

3) 작성된 script 문자열에 데이터 주입 (stringfy를 통해 문자열을 주입한다)

4) 데이터가 주입된 문자열 기반 파일 생성

5) 생성된 파일 webpack을 통해 번들링

6) 번들링 된 파일을 db (우리는 s3)에 업로드

7) 번들링된 파일 삭제

와 같은 흐름으로 구현할 수 있었다.