웹팩

모듈번들러는 무엇이더냐 > 파일을 여러개로 분리하는 과정을 모듈화라고 부르고, 파일을 모듈이라고 한다. 자바스크립트로 개발을 하다보면 코드의 재사용 및 유지보수 측면에서 모듈화해서 작업할 떄가 많다. 이렇게 모듈화 된 파일들을 브라우저에 보여주기 위해선 모듈마다 하

웹팩을 앞에 내용에 이어서 정리해보자. Code Splitting 코드 스플리팅을 사용하면 코드를 다양한 번들로 분할하고, 요청에 따라 로드하거나 병렬로 로드할 수 있다. 더 작은 번들을 만들고 리소스의 우선순위를 올바르게 제어하면 로드 시간에 큰 영향을 끼칠 수

실제 배포 환경을 구축하기 위한 유틸리티와 좋은 사례들에 대해 알아보자.development 와 production의 빌드 목표는 매우 다르다. development 같은 경우에는 강력한 소스 매핑을 통한 디버깅, localhost 서버에서 라이브 리로딩이나 hot m

마이크로 프론트엔드 아키텍쳐를 리액트를 가지고 실제로 적용시켜 보며 개념을 정리해보자.모놀로식 애플리케이션을 여러개의 조금한 애플리케이션으로 나누어 개발하는 것을 말한다. 일반적으로 마이크로 서비스 아키텍쳐 개념을 프론트엔드 애플리케이션에 접목시켰다고 이해하면 쉬울 것

지난번에 이어서 마이크로 프론트엔드를 좀 더 파헤쳐 보자. 저번에 구현 부분을 네트워크탭에서 확인해보면 cart와 products에서 동시에 faker 모듈을 분리해서 불러오고 있는것을 볼 수 있다. 하지만 faker은 중첩된 모듈이고 번들 사이즈도 매우 큰편이기에 효

Micro Frontend 마이크로 프론트엔드 아키텍쳐를 잘 활용하기 위해서 몇가지 지켜야하는 필수사항들이 있다. 컨테이너 외의 프로젝트들끼리는 공유되는게 없어야한다. 함수/객체/클래스 상태값(ex.redux,context) 라이브러리 컨테이너와 하

CI/CD 파이프라인 구축

간혹 마이크로프론트엔드에서 CSS가 제대로 적용 안되는 상황이 발생한다.