async/await처럼 동작 : red적용Promise 처럼 동작. blue 적용 (http로 가져온 css가 나중에 반영되어 덮어쓰워짐)

모든 패밀리 사이트의 폰트는 process.env.VUE_APP_COMM_HOSTNAME + "/styles/fonts/\_font.css" 으로 일관성있게 적용blink현상 없이 폰트 적용(폰트 로더가 먼저 로딩)webfontloader.tsremote package

export방식에 따라 lazy가 될 수도 있고, static 될 수 있음.lazy : import 후 사용 호출 시점static : import 후 export된 항목이 하나라도 사용 선언 된 경우 (호출하지 않아도 됨 ex : 클릭 이벤트 함수에 코드작성만 하고 이

RxJs를 활용한 사용자에게 비교적 안전하게 더 나은 사용자 경험을 제공 할 수 있는 방법UI사용경험 개선을 위한 캐싱.(서버 자원 사용량은 non-cacheing과 동일)목적개발중인 웹사이트의 홈화면 특정영역을 api를 통해 가져오는데 4초 이상의 시간이 소요 되었다

remote에서 공유된 CSS가 우선순위를 가짐.hostmain.tsremote webpack.config.js

각자 독립된 scope에서 서로 다르게 반영되어 동작함.remote \_variables.sasshost\_variables.sasswebpack.config.js(remote, host 양측 동일) webpack에 의해 번들링될때 scss의 variables($p

types/types.d.tsmain.ts

프로젝트 루트에 .yarnrc.yml 생성.yarn set version { your version }ex1) yarn set version 1.22.17ex2) yarn set version berry

타입추론

작업 디렉토리에 .yarnrc.yml이 없을 경우 글로벌설정을 따라감.작업 디렉토리에 .yarnrc.yml파일을 지웠을 경우..yarnrc.yml내에 yarnPath를 삭제 했을 경우 Global설정으로 이동됨.{yourProject}/.yarnrc.ymlnodeLin

webpack5 module Federation 2020년 10월에 릴리즈한 webpack5 스펙에 module Federation이 추가 되었다. 실무에 적용해 보고 그 과정을 공유해 보자.

모듈별 격리 : 각 모듈들은 IDE를 통해 독립 실행 & 테스트 가능재사용 : 공통으로 사용하는 컴포넌트, 화면, 모듈화applications/\* 모듈간 의존하지 않아야 한다.components/\* 모듈간 의존하지 않아야 한다.packages/\* 모듈간 의존하지