MSA 27

[MFA] Module Federation 다른 서버 TypeScript Type 추론 Example (명시적 정의, @module-federation/typescript)

Module Federation에서 Remote App 모듈 사용 시 Type 추론이 자동으로 되지 않는다. 방법 1. 명시적으로 정의하여 타입 추론 Monorepo프로젝트 진행 중일 경우 Remote App 경로를 명시적으로 정의하여 타입 추론이 가능하다. 장점 경로 명시적으로 정의되어 있어, 어떤 컴포넌트에서 오는지 쉽게 파악 가능 실제 경로를 참조하여 오류를 최소화할 수 있음 tsconfig 설정만으로 간단하게 사용가능 단점 모노레포 구조에서만 사용 가능 { // ...생략 "compilerOptions": { // ...생략 "paths": { "gugbab_component_app/Button": ["../gugbab-component-app/src/components/Button"] } } }..

MSA 2024.01.21

[MFA] Module Federation란? Basic Example

Module Federation webpack5에 도입된 고급 모듈 통합 기능 서로 다른 애플리케이션이 런타임에 필요한 코드를 공유할 수 있게 해 준다. 각각의 애플리케이션들이 서로 독립적으로 개발되고 배포될 수 있다. 필요한 코드만 실시간으로 로드하기 때문에 애플리케이션의 성능을 최적화할 수 있다. https://webpack.kr/concepts/module-federation/ Module Federation 구성요소 Host 다른 애플리케이션(remote)으로부터 모듈을 로드하고 사용하는 주체이다. Remote Host에 로드될 수 있는 모듈을 제공한다. 독립적으로 배포 및 업데이트가 될 수 있다. Shared Host와 Remote 애플리케이션 간에 공유되는 의존성을 의미한다. 중복된 코드의 로..

MSA 2024.01.07

[MFA]Nginx Reverse Proxy Server특징 example(pnpm+turborepo+vite)

Reverse Proxy Server 클라이언트 요청을 받아 백앤드 서버로 전달하고, 서버의 응답을 클라이언트에게 다시 전달하는 중간 서버 역할 로드 밸런싱을 통하여 트래픽을 여러 서버에 분산시키고, 적절한 서버로 라우팅 한다. 캐싱을 이용하여 동일한 응답을 두에 있는 서버에 다시 요청하지 않을 수 있음 외부 사용자로부터 내부의 서버를 숨겨 보안에 도움을 준다. SSL/TLS암호화를 사용하여 안전한 데이터 전송을 보장한다. Nginx Reverse Proxy Server 특징 이벤트 기반, 비동기 아키텍처로 설계되어 높은 동시 연결을 효율적으로 처리한다. 적은 메모리와 CPU 사용으로 더 많은 트래픽을 처리할 수 있다. 효과적인 로드 밸런싱 기능과 강력한 캐싱 기능을 통해 서버 부하를 줄이고 응답 시간을..

MSA 2024.01.01

[MFA] 트랜스파일러(Transpiler), 번들러(Bundler) 특징 (Babel, SWC, webpack, Vite)

트랜스파일러(Transpiler) JS 코드를 다른 버전의 JS 코드로 변환하는 도구 주로 ES6이상의 JS를 지원하지 않는 브라우저 환경에서 ES6이상의 문법을 사용할 수 있게 해주는 도구 장점 지속적으로 업데이트되는 브라우저나, Node.js 환경에서 최신문법을 사용하더라도 이전 버전의 JS로 변환하여 여러 환경에서 코드를 실행할 수 있다. ECMAScript 표준을 사용할 수 있게 해 줘 표준화된 코드를 작성하고 유지할 수 있다. 다양한 플러그인을 지원하여 사용자가 필요한 트랜스파일 과정을 제어할 수 있다. 폴리필(Polyfill) 최신 자바스크립트의 기능을 구식 자바스크립트 코드로 똑같이 구현한 코드 대표적인 트랜스 파일러 Babel https://babeljs.io/ 최신 자바스크립트 문법을 브..

MSA 2023.12.25

[MFA] NX 특징 , NX Cache Example

https://nx.dev/ Nx: Smart, Fast and Extensible Build System Nx is a smart, fast and extensible build system which comes with first class monorepo support and powerful integrations. nx.dev NX 특징 현재 가장 많은 기능을 제공하는 모노레포 빌드 시스템 도구 개발자 생산성 향상, CI 성능 최적화, 코드 품질 유지를 위한 도구 단일 워크스페이스 혹은 전체 워크스페이스드에 대한 태스크를 수행할 수 있다. 단일 워크스페이스 태스크 실행: nx[명령어] [app이름] 전체 워크스페이스 태스크 실행 : nx run-many -t [명령어] 작업의 결과에 대한 캐싱 기..

MSA 2023.11.26

[MFA] Node 패키지 매니저, 워크스페이스 개념(soft-navigation,hard-navigation)

Npm package.json을 사용하여 프로젝트 의존성 및 구성을 관리한다. 프로젝트에 필요한 외부 라이브러리나 도구들을 손쉽게 추가하고 관리할 수 있다. 패키지들 간의 의존성을 자동으로 해결해 준다. 스크립트를 정의하여 빌드, 테스트, 시작등 작업을 간편하게 실행할 수 있다. 한 번에 하나씩 순차적으로 설치한다. (npm5부터는 병렬설치로 개선) lock파일의 도입으로 정확한 의존성 해결과 패키지 설치를 보장한다. 모든 환경에서 동일한 패키지 버전이 사용되어 일관된 동작이 가능해진다. 이전에 설치된 패키지를 캐싱하여 더 빠른 재설치가 가능하다. 패키지 버전을 명시적으로 기록하여 예상치 못한 업그레이드 방지하여 프로젝트의 안정성과, 보안 측면이 좋다. 워크스페이스 기능을 도입되었다. (npm7버전 부터..

MSA 2023.11.19

[MFA] 모노레포(Mono Repo)란? 장단점

모노레포 란? 하나의 레파지토리에서 여러 프로젝트, 모듈 또는 패키지를 관리하는 개발 방식 모든 소스 코드를 중앙화하여 관리하고 필요한 패키지를 공유하여 사용할 수어 코드의 재사용성과 개발의 협업을 용이하게 만든다. 모노레포 장점 중복 코드를 줄이고, 공통 모듈을 사용으로써 코드의 재사용서 높인다. 모든 서비스가 동일한 환경에서 작동하므로 일관성을 유지하고 호환성을 확보할 수 있다. 코드의 히스토리를 추적하기 쉽다. 다른 서비스를 수정 시 추가적인 배포 없이 테스트하고, 함께 빌드 배포를 할 수 있다. 모노레포 단점 레파지토리가 크기가 무거워질 수 있다. 여러 서비스와 모듈을 포함하여 레퍼지토리의 복잡성을 증가시킬 수 있다. 권한 관리와 보안 설정이 중요하다. 모노레포 경험하면서 느낀 점 아쉬웠던 점 다..

MSA 2023.10.28

[MFA] 마이크로 프론트엔드 아키텍처 특징 장,단점

마이크로 프론트엔드 특징 독립적으로 제공 가능한 프론트엔드 애플리케이션이 더 큰 전체로 구성되는 아키텍처 스타일 전통적인 모놀리식 웹 애플리케이션 아키텍처를 보완하기 위해 사용되는 개발 패턴 애플리케이션을 작은 독립적인 서브 애플리케이션으로 분할하고, 서브 애플리케이션을 모아 하나의 애플리케이션으로 구성하는 방법 독립된 기술 스택을 가지며, 개발, 테스트 및 배포가 독립적으로 이루어질 수 있다. 서로 다른 애플리케이션에 느슨하게 결합되어, 하나의 애플리케이션에서 변경을 할 때 다른 부분에 미치는 영향을 최소화한다. 큰 규모의 애플리케이션을 더 쉽게 관리하고 확장할 수 있다. 장점 덜 복잡하고, 적은 양의 코드를 관리하여 코드의 품질을 높일 수 있다. 배포의 범위가 줄어들어 빌드 및 배포 시간이 줄고, 장..

MSA 2023.10.22

[MSA] Prometheus, Grafana 란? Grafana연동Example

Prometheus Metrics를 수집하고 모니터링에 사용되는 오픈소스 애플리케이션 시계열 데이터베이스에 Metrics를 저장하고 조회 가능 https://prometheus.io/ Prometheus - Monitoring system & time series database An open-source monitoring system with a dimensional data model, flexible query language, efficient time series database and modern alerting approach. prometheus.io prometheus.yml target 정보 추가 job_name : 이름 설정 scrape_interval : 수집 데이터 간격 시간 설..

MSA 2023.05.16

[MSA] Spring Boot - Micrometer란? Micrometer Timer example

https://micrometer.io/ Micrometer Application Observability micrometer.io Micrometer JVM기반의 애플리케이션의 Metrics 제공, 처리 Prometheus 등 다양한 모니터링 시스템을 지원한다. Timer 지연시간, 이벤트의 사용 빈도 측정 시계열의 이벤트 시간, 호출 빈도 제공 의존성 주입 (build.gradle) dependencies { ... implementation 'io.micrometer:micrometer-registry-prometheus:1.10.5' } 설정값 변경 (application.yml) endpoint 추가 metrics prometheus management: endpoints: web: exposu..

MSA 2023.05.15