모든것은 다른 프로젝트를 하고있는 크루로부터 부탁을 받은 시점이었다.
자신이 진행하고 있는 팀프로젝트의 어떤 파트에 다라쓰 댓글 서비스를 삽입할 계획인데,
댓글 색상 테마를 변경하고, 몇가지 UI를 제거하고 싶다는 의견이었다.
(물론 그런기능이 있으면 좋겠다고 생각하고 있었지만, TODO로만 있을 뿐 실제로 개발이 이루어지지는 않았었다.)
부탁을 받는순간 고민에 빠졌다.
현재 기능을 고정하고, 리팩터링과 테스트코드를 작성하는것에 집중할 것이냐,
아니면 기능을 추가로 구현해서 사용자의 만족을 줄것이냐였다.
프론트엔드 개발 인력도 팀내에 나 뿐이라서, 분업할 여력도 되지 않았다.
하지만 빠른시일내에 해주기로 했다.
모든 서비스는 고객을 만족시키는 방향이 우선시되어야한다고 생각했기 때문이다.
그래서 어떻게 문제를 해결하고 어떻게 기능을 구현할 것인지에 대해 고민을 해나갔다.
빠르게 구현하기 위해서, 백엔드에 팀원에게 의존하지 않고 최대한 프론트엔드에서 처리할 수 있도록 설계하려 했다.
script 태그의 data-*에 특정 속성을 사용자가 넣으면, 그에 맞추어 댓글 ui가 정해지도록 구현했다.
어차피 백엔드 api를 구현해도, 비슷한 데이터를 서버로 부터 받아와야하기 때문에, 사용자가 스크립트에 데이터를 삽입하는것과 다를바없다고 생각했다. 불편한점은, ui를 바꾸고 싶으면 사용자가 스크립트 코드를 수정해주어야 한다는 것이다. (이 부분은 고민중에 있다. 여력이 되면 백엔드 크루에게 api를 하나 뚫어달라고 해야겠다.)
구현했다고 하니까, 굉장히 간단하게 구현된것같은데, 사실 그 과정은 만만치 않았다.
우선, 모든 프로젝트들의 싱크를 맞추어야했다.
1. 베포 스크립트 프로젝트는 data-* 속성을 받아서 댓글모듈 프로젝트에게 쿼리스트링으로 데이터를 넘겨주어야 했다.
2. 댓글 모듈 프로젝트는 쿼리스트링을 파싱하여 Context API를 통해 필요한 곳에 데이터를 뿌려주어 조건부 렌더링을 해주어야했다.
또한, 급하게 구현하느라 useContext 를 필요한곳마다 써주었는데, 이를 통한 테스트 코드도 19개 가량 다시 수정해주어야했다.
3. 관리자 페이지에서는 사용자가 설정한 UI에 따른 배포스크립트를 적어주고, 미리보기 기능을 통해서 어떻게 보여지는지 구현하도록 했다.
4. 그리고 html 스크립트 뿐만 아니라, darass-react라는 react 컴포넌트도 제공하고 있는데, (리액트에서 html삽입해서 script 실행시키는 것이 보안상 어렵기 때문) 이게또 다른 별도의 레포이다.
그래서 작업을 하는데 4개의 vs code를 띄우고 하나하나 싱크를 맞추면서 작업을 해야했다.
화면을 왔다갔다하는것이 여간 귀찮은것이 아니었다.
하지만 결국엔 기능을 내가 원하는 대로 완성시켰고, 부탁했던 크루로부터 잘 작동한다는 감사의 메시지를 받았다.
이렇게 우리 서비스를 이용하는 고객이 한명더 생겨났다.
국내 댓글 서비스 시장을 정복할때까지 열심히 작업해야겠다.
https://github.com/woowacourse-teams/2021-darass/pull/757
[FE][댓글모듈] 댓글 모듈에서 웹소켓 안열리는 이슈 해결 by zereight · Pull Request #757 · woowacourse-team
알림 소켓을 여는 훅이 user를 필요로하고, user는 user Context에서 꺼내오고 있었는데, 알림 소켓을 여는 훅이 user Context.Provider 바깥에 있어서 못불러오고 있어서 웹 소켓이 안열리고 있던 문제를 해
github.com
https://github.com/woowacourse-teams/2021-darass/pull/758
[FE][공통][beta] 댓글 테마 및 ui 커스텀 설정기능 추가 by zereight · Pull Request #758 · woowacourse-teams/2021
Hide details View details zereight merged commit 19677a0 into main Oct 22, 2021 2 checks passed
github.com
https://github.com/woowacourse-teams/2021-darass/pull/759
[FE][공통][Hotfix] 댓글 추가시 즉시 반영안되는 버그 수정 by zereight · Pull Request #759 · woowacourse-teams
댓글 추가 시, 바로 반영안되던 버그 수정 이전 버전 사용자가 custom ui 속성 선언안했을 시 true처리
github.com
https://github.com/woowacourse-teams/2021-darass/pull/760
[FE][관리자페이지][Hotfix] darass-react 컴포넌트 버전업 by zereight · Pull Request #760 · woowacourse-teams/2021-
Hide details View details zereight merged commit b59d53d into main Oct 22, 2021 2 of 3 checks passed
github.com
https://github.com/woowacourse-teams/2021-darass/pull/761
[FE][공통] 커스텀 UI 코드 리팩터링 by zereight · Pull Request #761 · woowacourse-teams/2021-darass
Hide details View details zereight merged commit 06da0a0 into main Oct 22, 2021 5 checks passed
github.com
'개발 > 개발 리포트' 카테고리의 다른 글
| 2021/10/24 : JSX 파서 만들기 (아직 개발중) (0) | 2021.10.25 |
|---|---|
| 2021/10/23 : 구버전 라이브러리를 사용하고 있는 사용자를 위한 설계 (0) | 2021.10.24 |
| 2021/10/21 : textarea의 link부분을 자동으로 하이퍼링크 처리하기, simple-react-query 라이브러리 배포 (1) | 2021.10.22 |
| 2021/10/20 : 모든 프로젝트에서 react-query 제거 (0) | 2021.10.21 |
| 2021/10/19 : DB에 저장해야할 정보는? 다크 모드를 감지하는 방법? (0) | 2021.10.20 |
