easy-media-calc 제작 후기

https://www.npmjs.com/package/@hellojh/easy-media-calc

@hellojh/easy-media-calc

회사 퍼블리셔분들이 리액트 반응형 퍼블리싱을 할 때 "calc(100vw * (---/428))"가 반복적으로 사용되는 것을 보았습니다.

 

반복을 줄이고자 js파일을 만들어 자주 사용되는 스타일링 코드를 함축시켰습니다.

두 개의 인자를 받고 그 인자들을 calc형태로 뿌려주는 형태로,  코드는 어렵지 않습니다. 

function Width(elPx, totalPx){
    return (`width:calc(100vw*(${elPx}/${totalPx}));`);
}

 

누군가 이 npm을 보고 단순히 코드 한 줄 간편하게 하려고 라이브러리까지 만드네라고 생각할 수 있습니다.

 

하지만 제 생각은 다릅니다.

실제 프로젝트를 진행하다 보면 반응형을 잡기 위하여 한 페이지 당 굉장히 많은 "calc"코드가 있고

이러한 페이지가 수 십 페이지씩 있습니다.

추후 유지보수/추가개발이 들어갔을 때 이러한 코드를 본다면 가독성은 떨어집니다.

 

예를 들어보겠습니다.

아래 코드들 중 어떤게 가독성이 좋나요? 

margin:calc(100vw * (100/428)) calc(100vw * (50/428)) calc(100vw * (100/428)) calc(100vw * (50/428));

// or

Margin(100, 50, 100, 50, 428)

 

저는 후자를 선택하겠습니다.

---

이 라이브러리는 지난번 만들었던 이니시스같이 큰 기능은 아니지만

조금이라도 시간은 단축시키기 위해 만들었습니다.