사내 SDK 고도화 및 경량화 발표 자료
용어
|
Rake JS 개발 시, 생각해야 하는 점.
|
데이터 입수 메서드 테스트 (v2.x.x ~ v3.2.6)
v2.x.x의 테스트 (jasmine + karma)jasmine으로 테스트 코드를 작성하고, karma로 브라우저를 열어서 테스트 진행하는 방식 (Container.spec.js, Rake.spec.js 등등)이 조합의 테스트 방식이 v3.x.x로 오면서 사용이 되지 않음. 사용 되지 않는 이유  jasmine-brwoer-runner를 도입해서, 테스트 진행 결과, Rake는 모두 ESM으로 구성되어있고, import {something} from 'source' 과 같이, source.js가 아닌 soure로 .js 확장자를 붙이지 않고 개발되었음. --experimental-specifier-resolution 이 활성화된 상태. 하지만 jasmine-browser-runner에서는 모듈 import시, .js를 붙여주어야만, 404에러가 뜨지 않고 불러옴. Snippet까지는 잘 불러오지만 Rake를 불러올때 각종 모듈들의 확장자를 모두 붙여주어야하고, 특히, 외부패키지를 import해서 사용하는 함수는 이 문제가 해결되지 않음. 해당 문제를 해결하더라도, jasmine-browser-runner 동작의 형태가, 크롬 브라우저를 띄워서 콘솔을 확인하므로, v3.x.x의 현 테스트 방법과 동일하다고 볼 수 있음. 사실 parcel가 jasmine-browser-runner의 역할을 이미 포함하고 있음을 확인. 따라서 jasmine과 karma는 v3.x.x 오면서 동작하지 않은 이유에 대해 정확히 알 수 있었고 해당 모듈 제거 검토 예정. v3.x.x ~ 현재까지의 테스트 (parcel의 dev server)parcel 번들러가 제공하는 dev server로 가상의 서버를 띄움 -> html파일에 snippet을 심고 → rake를 불러들여 → 입수 메서드 테스트 (rakeTestApp.js) → rake의 모든 메서드들은 한번씩 호출함문제점
  사용하지 않는 패키지는 없애자!   |
브라우저 간 호환성 + SDK 경량화
예전 Rake ( ~ v3.2.0)
3개의 빌드 파이프라인
빌드 방식 : parcel v1 + babel parcel가 build시 babel의 presets과 plugins이 동작하여, 옛날 브라우저 지원. {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"ie" : 8,
"chrome" : 26,
"firefox" : 16,
"safari" : 7
}
}
]
],
"plugins": [
[ "transform-remove-console" ],
[ "transform-remove-debugger"],
[ "transform-es3-property-literals" ],
[ "transform-es3-member-expression-literals" ],
[ "@babel/plugin-transform-object-assign"],
[ "@babel/plugin-transform-reserved-words" ],
[ "@babel/plugin-proposal-class-properties",{},"debugging@babel/plugin-proposal-class-properties" ]
]
}
|
parcel v1→v2 업그레이드 및 IE8 지원 종료 (v3.2.1 ~ 현재 <v3.2.6>)
빌드 방식 : parcel v2 (babel이 있긴하지만 트랜스파일 역할은 하지 않아 그 크기가 작음) (parcel docs) 한 줄 요약 : parcel v2로 왔으면 더 이상 babel 필요없고, browerlist에 너가 지원할 브라우저 목록을 적어두면 babel 대신 트랜스파일해줄게 (우리가 바벨보다 빨라) 기존에 사용되어 왔던, browserlist를 사용함. "browserslist": [
"ie 10",
"Chrome 26",
"Firefox 16",
"Safari 7"
],
 rake.bundle.ie8 이 더 이상 빌드 되지 않음.
추후 해결해야 할 과제) Snippet 개편 필요성 Snippet 역할 : html에 비동기적으로 rake를 심어주는 역할을 함 (script async)  기존에 3개의 빌드 파이프라인이 존재했고, 브라우저 버전에 맞게 3개중 하나의 rake를 심도록 분기처리가 되어있음. 빌드 라인이 3개에서 2개로 줄었고, rake.bundle.js와 rake.bunlde-ie.js 역시 사실상 하나의 browserlist로 빌드된 같은 파일. Snippet에서도 줄여주어야함. (3개의 분기처리 → 1개로) |
최신 Rake (v3.3.0 아직 개발 서버만 배포)
| 외부 개발자 지원 과정에서, rake 버그를 찾게됨 과거부터 getLoggingLevel에 휴먼에러가 있었음. (19년도 커밋 때 들어간 에러) Rake의 과정을 기록하는 Logger에서 getLoggingLevel을 사용하는데, 이 때, Logger 자체를 비활성화 함. (오류를 잡기 위해서 비활성화한 것으로 보여짐) 휴먼에러를 해결하고, Logger를 활성화 시키면, IE에서만 문제가 발생함 (Symbol 관련) => es6-shim을 추가해도 해당 부분이 해결되지 않음 (이 때문에 Logger를 과거에 비활성화시켰을 수도 있다고 생각) 다시 분석해보자. 3가지 문제점.
3의 문제는 IE11로 접속하면 snippet이 rake.bundle-ie.js를 불러오는 것이 아니라, rake.bundle.js를 불러옴 (10이하에서는 rake.bundle-ie.js를 불러옴) => rake.bundle-ie.js가 거의 사용되지 않았음을 의미 몰랐던 버그인데, 왜 아무런 이슈가 없었지? (아무도 안쓰나 혹시...?) 이쯤되니 IE 사용량이 궁금해짐 SDK IE 사용량 (0 집계) Rake JS가 사용되고 있는 프로젝트 모두, 2023년 기준 browser가 IE인 데이터 0 최근 오픈한 오글오글 서비스에서는 IE에서는 Rake를 애초에 심지 않음, 모바일 웹브라우저로 동작하는게 대부분이라 IE가 존재하기 어려움 윈도우에서 IE 접속시 자동으로 Edge로 전환됨. (레지스트리 편집기로 전환을 막을 수는 있으나 일반인이 그렇게까지 하면서 IE를 쓸것이라 생각하지 않음) MS도 지원종료한지 1년이 넘었고, 각 기업 및 공공기관에서조차 손 땐 IE 지원을 더 해야하는지 의문. ++) 정말 낮은 확률로 추후에, IE에서 Rake를 써야겠다는 요청이 오면 그때 빌드 라인을 다시 추가하는게 낫다고 생각함. IE 지원 종료시 장점
 종료 시 얻는 장점이 크다. v3.3.0에서는 필요없는 테스트 패키지 제거, snippet 빌드 라인 축소, browserlist를 es6 지원 브라우저로 변화 "browserslist": [
"defaults and supports es6-module",
"maintained node versions"
],
 npm install 시  npm run build 시   |
'Programming > Frontend' 카테고리의 다른 글
| Webpack 마이그레이션 작업 (v4 -> v5) 및 디버깅, 최적화 공유 (1) | 2024.01.30 |
|---|---|
| Next.js 13 (App Router)에서 MultiPart Form 처리 && 파일 업로드 (0) | 2023.06.15 |
| Parcel 번들러 Migration 후기 (parcel-bundler -> parcel) (0) | 2023.01.06 |