이전 글
깃허브 주소

오랜만이네

어느 정도 기능들이 구현된 이후에 손을 놓고 있었는데 같이 배우는 분이 정렬 기능도 있으면 좋겠다고 하여 정렬 기능을 추가하기 위해서 오랜만에 개발을 진행 했다.

정렬 기능 넣는거야 이제는...

여러 기능들을 개발하면서 필요한 것들이 이제는 정리가 많이 돼있고 그리고 또 그 틀에 맞춰서 개발을 진행하면 되기 때문에 금방 구현할 수 있었다.
아래와 같은 사항들을 고려 했다.

1. 어디에 해당 기능을 넣을 것인가 => 툴바에 해당 기능을 넣을 것이다.
2. 어떤 동작을 해야 하는가 => 버튼을 눌를 경우에 벨로그에서 글이 정렬될 수 있어야 한다.
3. 아이콘은 어떻게 만들 것 인가 => 피그마를 이용해서 글 정렬에 어울리는 SVG 파일을 만들 것이다.

아이콘이 없으면 만들면 되지

정렬과 관련된 적절한 svg 파일을 구하지 못해서 피그마를 이용해서 직접 그렸다. frame의 크기는 24px x 24px로 지정을 하고 정렬이라는 아이콘이 느껴지게끔 3개의 타원을 크기 별로 배치를 하여 아래 처럼 만들고 svg 파일을 export 했다.

잘 보이지 않겠지만 매우 마음에 들었다

이제 기능과 툴바에 넣을 수 있도록 해보자

기능을 구현하기에 앞서 어떻게 구현해야 하는가를 고민했다. velog에서 editor는 태그를 넣고 그 태그에 스타일을 인라인으로 넣어서 스타일을 적용시킬 수 있다. 그래서 p태그에 text-align:"center"를 넣었더니 바로 됐다. 처음에는 span을 생각을 하였는데 span은 기본적으로 inline-block이기 떄문에 text-align을 부여하는 의미가 없기 때문에 p태그를 적용시켰다.

현재 지금 가운데 정렬을 적용시킨 상태입니다.

기능을 어떻게 해야 구현해야 하는지에 대해서 알았으니 이제 버튼을 눌르면 자동적으로 해당 태그가 editor에 써지면 된다. 이전 개발 일지에서 해당 기능은 수도 없이 실행했으니 해당 기능을 바로 구현할 수 있었다.

현재 적용된 툴바의 모습이고 툴바의 뒤에 위치한 정렬 버튼 3개를 눌르면 보여지는 것처럼 사용이 가능하다.
왼쪽 정렬
가운데 정렬
오른쪽 정렬

버튼을 눌르면 위 처럼 태그가 자동적으로 생기게 되고 실제 벨로그에서도 정렬된 상태를 유지한채로 볼 수 있다.

다만.... 이 기능의 단점은 같은 익스텐션을 설치한 사람만 그림처럼 볼 수 있다... 다른 방법이 있나 더 생각해봐야겠다.

눈에 거슬리는 것 발견

모듈로 기능을 다 구현을 하고 이제 content.js에 import 할려고 봤더니 눈에 거슬리는 것을 발견했다.

크롬 익스텐션에서 content.js에서 모듈을 가져오기 위해서는 동적 import를 통해서 모듈을 가져와야 한다. 그래서 처음에는 await을 이용해서 각각 필요한 모듈들을 가져오는 방식으로 구현을 했었는데 여러 기능들을 추가하다보니 await 부분들이 연관돼 있는 정보들이 아님에도 불구하고 동기적으로 실행되는 것이 불필요하다고 생각을 하였다.
우선 떠오른 것이 Promise.all이었다. 자바스크립트에서 all이란 여러 개의 비동기 작업을 실행을 하고 가장 오래 걸리는 것이 모두 끝나면 비동기 작업들의 결과물을 반환하는 메서드이다.
그래서 위의 코드 처럼 구현을 하였다. 그리고 기존의 import들을 아래처럼 받을 수 있도록 하였다.

흠... 더 별로지 않나?

그런데 생각했던 것보다 기존의 코드가 더 깔끔해 보이는 것은 어쩔 수 없는 것 같다. import가 그렇게 시간이 오래걸릴 것 같지도 않고 드라마틱한 성능향상을 기대되지 않는다고 생각을 했다. 그리고 이전에는 어느 파일에서 어느 코드를 가져오는 구나라는 것을 한 번에 알 수 있었는데 이제는 한꺼번에 가져오기 때문에 그게 좀 힘들다고 느껴졌다. 그래도 나 나름의 생각을 가지고 있었고 또 그 생각이 합리적인 부분도 없지 않아 있다고 생각을 한다.
내 코드의 성능을 들여다보고 좀 더 코드를 만져보고 내 말에 논리를 붙일 수 시간이 된 것 같아서 매우 유의미한 시간을 가진 것 같다.
그래서 다른 코드도 여럿 수정을 봤다.

뭐가 정답일까?


기존의 이벤트 위임 관련된 코드이다. 이벤트 위임을 통해서 특정 태그이면 해당 이벤트가 발생하지 않도록 중간에 return을 해주었다. 이를 아래처럼 바꿔줬다.

공통점을 찾고 해당 공통점을 하나의 함수로 표현을 하여 DRY한 코드를 만들었다고 생각한다.

이것도 이렇게 바꿔놓고나서 한참을 들여다봤다. 이렇게 바꾸는게 더 올바를까? 올바른게 존재하기는 할까? 정답이 있을까?하고 말이다.

제대로 동작한다면 틀린 건 아니다

그래서 생각한 내 나름의 결론이다. 어느 코드가 더 좋다 나쁘다라고 논하기 전에 각각이 틀린 것이 아니다 기능을 수행하기 위한 다른 표현일 뿐 마치 내가 국밥을 먹는데 누구는 깍두기 국물을 국밥에 넣고 누구는 깍두기 국물을 안넣는 사람 둘이 있는데 둘 중 하나가 잘못 먹는다고 말할 수는 없을 것이다. 본인의 생각이 있고 본인의 스타일대로 자연스럽게 먹으면 된다.

다만 나는 어떤 생각으로 코드를 작성했고 그 코드를 작성한 합리적인 이유에 대해서 생각하는 개발자가 돼야겠다.