Codemod 라는 것을 이용한다 !
Codemod is a tool/library to assist you with large-scale codebase refactors that can be partially automated but still require human oversight and occasional intervention. (https://github.com/facebookarchive/codemod)
근데 Facebook에서 개발한 Codemod라는 라이브러리는 정규식을 이용하기에 리팩토링 할 수 있는 코드가 제한적이다. 이를 위해 Facebook에선 Jscodeshift라는 Codemod 툴을 만들어냈다.
jscodeshift is a toolkit for running codemods over multiple JavaScript or TypeScript files. It provides:
- A runner, which executes the provided transform for each file passed to it. It also outputs a summary of how many files have (not) been transformed.
- A wrapper around recast, providing a different API. Recast is an AST-to-AST transform tool and also tries to preserve the style of original code as much as possible.
간단하게는 소스 코드를 AST(https://yceffort.kr/2021/05/ast-for-javascript)로 변환시킨 뒤 수정한 뒤 수정된 AST를 소스 코드로 변환 시켜주는 과정을 쉽게 할 수 있게 만들어둔 라이브러리이다.
module.exports = function(fileInfo, api, options) {
return api.jscodeshift(fileInfo.source)
.findVariableDeclarators('foo')
.renameTo('bar')
.toSource();
}
이는 foo라는 변수 이름을 bar로 바꿔주는 아주 간단한 예제이다.
좀 옛날 라이브러리지만 Method 이름도 직관적이고, Method Chaining Pattern을 사용하여 가독성이 나쁘지 않은 것 같다.
현재 디자인 시스템(@superb-ai/ui)과 과거 디자인 시스템(@superb-ai/norwegian-forest)의 차이점 분석이 우선되어야 한다 !
| v2(superb-ai/norwegian-forest) | v3(superb-ai/ui) |
|---|---|
| width에서 유동적인 값을 지원한다. ex) 100px, 10vh | width에서 고정된 값만 지원한다. 나머지는 style props로 빼야한다. |
| background, color, border color 앞에 themed가 붙어있다. | 이름이 css property 그대로이다. |
| 회색 스펠링이 grey이다. | 회색 스펠링이 gray이다. |
| color 값이 배열이다. ex) [”grey”, 60] | color 값이 string이다. ex) “gray-100” |
| color 값이 많다. (50-900) | color값이 적다. (100-500) |
| border radius가 boolean이다 | border radius가 고정된 값이 있다. |
| gap이 8을 넘을 수 있으며 px도 존재한다. | gap이 정해진 숫자가 있다. |
| 여러 css property를 props로 넘길 수 있다. (flex, min~, max~, top, left, ~) | 한정된 css property만 props로 넘길 수 있다. |
위와 같은 차이점이 존재하는데, Jscodeshift를 사용하여 codemod를 만들기 전 준비사항들이 있다.