말랑말랑제리스타일

신규 프로젝트를 구상하면서 React JS로 Header, Footer, Sidebar가 있는 레이아웃을 만들 일이 생겼습니다.React 화면 컨트롤은 Browser Router를 사용했고 이왕 만드는 거 다른 프로젝트에서 재사용 가능하도록 최대한 모듈을 구분해서 만들어봤습니다.React 프로젝트 화면 구조 구상일단 이번에 생성할 React 프로젝트의 레이아웃 뼈대는 요런식으로 만들 겁니다.Header, Footer를 따로 빼고 메인 화면 좌측에 Sidebar를 넣어줄 예정이며, App Screen 부분을 Router를 이용해 이동시킬 겁니다. React 프로젝트 레이아웃 뼈대를 잡기 위한 프로젝트 생성먼저 VS Code와 node JS는 React를 해보신 분이라면 어렵지 않게 설치하실 테고, 이미 설..

Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 서비스를 구현해 봤습니다.간단한 컨테이너 앱에 마이크로 앱 두 개를 보여주는 형식으로 만들었기 때문에 Webpack의 Module Federation Plugin을 이용한 마이크로 프론트엔드 구현 방식을 이해하는 목적으로 사용해 주시면 좋을 것 같네요.Webpack과 마이크로 프론트엔드란?자 일단 마이크로 프론트엔드와 Webpack이 뭔지부터 간단히 이해를 해보죠.먼저 마이크로 프론트엔드는 프론트엔드의 소스를 여러 개로 분할해서 서비스하는 방식입니다.여러 사람이 같이 운영하는 프론트엔드 화면의 개발에 상당히 유용하겠죠.Webpack은 자바스크립트 모듈 중 하나로 여러 개의 파일을 하나로 병합해서 컴파일해 주는 모듈입..