Chuyển tới nội dung
Trang chủ » 마이크로 프론트 엔드: 웹앱 개발의 미래

마이크로 프론트 엔드: 웹앱 개발의 미래

마이크로 프론트 엔드

마이크로 프론트 엔드란 무엇인가?

최근들어 프론트 엔드 아키텍처의 변화는 속도를 더해가고 있다. 2016년 Airbnb의 Jay Phelps와 Facebook의 Dan Abramov는 ‘마이크로 프론트 엔드’라는 개념을 소개하였다. 마이크로 프론트 엔드는 강력한 아키텍쳐와 이해하기 쉬운 코드, 더 나은 유지 보수성, 확장성 등 많은 이점을 제공한다.

마이크로 프론트 엔드는 사용자가 상호작용하는 마이크로 서비스 아키텍처를 기반으로 한 것으로, 사용자 인터페이스(UI)를 모듈별로 분리시키는 방법이다. 이 방법은 각 UI를 보유한 팀이 독립적으로 작업을 수행하고, 그것들을 병합함으로써 전체 앱을 구축하는 것을 가능하게 한다.

이전에 존재하던 모노리스 아키텍처에서는 하나의 큰 코드 베이스에서 전체 앱을 관리했다. 하지만 모노리스 아키텍처는 프로그램이 복잡해지면 복잡도가 증가하고 유지 보수성이 떨어진다는 단점이 있다. 또한 매우 큰 팀을 운영할 경우 코드 의존성 문제가 발생하는 경우가 많다.

마이크로 프론트 엔드는 역동적으로 컴포넌트들을 유지 보수할 수 있는 모듈화된 웹 애플리케이션의 형태로 존재한다. 마이크로 프론트 엔드를 위한 아키텍처는 응답성 있고 확장 가능하며, 웹의 다양한 요구에 대응할 수 있다.

마이크로 프론트 엔드의 장점

마이크로 프론트 엔드는 모노리스 아키텍처보다 여러 가지 이점을 가지고 있다. 이러한 이점으로 인해 최근에는 많은 기업에서 이를 채택하고 있다.

1. 독립적인 업데이트 용이성
마이크로 프론트 엔드를 사용하면 팀별로 독립적으로 업데이트를 진행할 수 있어, 전체 앱 구축과정에서 속도의 향상이 가능하다. 또한 거대한 코드 베이스를 가지고 있는 경우, 마이크로 프론트 엔드를 적용하여 응답성을 개선하고 유지보수의 용이성을 확보 할 수 있다.

2. 인프라 관리 비용 감소
마이크로 프론트 엔드는 분산 아키텍쳐로서 각각의 UI 프로젝트를 다른 독립적인 서버에서 호스팅할 수 있기 때문에 인프라적인 측면에서 비용 절감 효과를 가져올 수 있다.

3. 스핀업과 다운타임 단축
각각의 UI 개발이 독립적으로 이루어지기 때문에 스핀업과 다운타임이 줄어든다. 이는 사용자에게 보다 높은 가용성을 제공한다.

4. 폴리글랏 아키텍쳐
마이크로 프론트 엔드는 여러 가지 프레임워크를 선택할 수 있기 때문에 광범위한 적용 가능성이 있다.

각각의 프론트 엔드는 마이크로 프론트 엔드를 통해 다음과 같은 향상된 동작을 제공할 수 있다.

– 높은 유지 보수성
컴포넌트 간 의존성이 없기 때문에 각각의 확장성이 높아진다. 이로 인해 코드 베이스의 유지 보수성이 향상된다.

– 높은 안정성 및 신뢰성
마이크로화된 웹 페이지가 동작하는 공간이 각각 분리되어 있으므로 전체적인 안정성과 신뢰성이 높아진다.

– 높은 성능
UI가 분리되므로 각각의 UI는 작고 가볍다. 이는 응답성이 높아질 뿐만 아니라, 렌더링 시간이 단축되어 사용자 경험도 향상된다.

마이크로 프론트 엔드의 단점

하지만 마이크로 프론트 엔드는 단점 또한 가지고 있다. 이러한 단점으로 뽑아내는 것이 중요하다.

1. 추가적인 복잡함
호스팅 환경, 배포하는 곳, 서버 API, 백엔드 서버 과의 연동 등 다양한 추가 요소들을 신경써야 하기 때문에 프론트 엔드를 단순화시키는 것과 같이 적용할 수 없다.

2. 구현 비용 증가
전체 웹 애플리케이션의 구조를 변경해서 사이트를 마이크로화 시키기 위해서 필요한 추가적인 개발/운영/보안 비용이 발생한다.

3. 테스트 및 디버깅의 복잡함
각각의 UI는 다른 웹 애플리케이션과 함께 작동해야하므로 종속성 및 서로 다른 기술스택을 가질 가능성이 크다. 이는 테스트 및 디버깅을 할 때 복잡성을 증가시킨다.

FAQ

Q. 마이크로 프론트 엔드를 사용해야 할 때는 어떤 경우인가요?

A. 마이크로 프론트 엔드는 대형 혹은 중형 규모의 애플리케이션에서 자주 사용된다. 애플리케이션이 커지면, 코드 복잡도가 증가하여 복잡한 문제들이 발생할 수 있다. 이와 같은 문제들을 해결하기 위해서 다수의 팀이 협업하여 개발해야 한다. 이러한 상황에서 마이크로 프론트 엔드가 적합할 수 있다.

Q. 마이크로 프론트 엔드 아키텍처는 어떻게 구현하나요?

A. 마이크로 프론트 엔드 아키텍처는 여러 개의 독립적인 UI로 이루어져 있다. 각각의 UI는 독립적인 링크로 배포되거나 격리된 공간 내에서 호스팅된다. 이는 고객에게 더 나은 사용자 경험을 제공하기 위한 것이다.

Q. 마이크로 프론트 엔드를 구현하기 위해서는 어떤 기술을 사용해야 하나요?

A. 프론트 엔드에서 사용되는 프레임워크 종류에 따라 다양한 기술들이 사용될 수 있다. 예를 들어, Angular를 사용하는 경우 Angular Elements를 사용하면 된다. React를 사용하는 경우 Parcel과 Webpack을 사용하여 독립적으로 모듈화된 웹 앱을 구현할 수 있다. Vue.js를 사용하는 경우, 이를 위한 특별한 라이브러리를 구현할 수 있다.

Q. 마이크로 프론트 엔드 아키텍처가 적합한 모듈 유형은 무엇인가요?

A. 마이크로 프론트 엔드 아키텍처는 다음과 같은 모듈 타입이 적합하다.

– 서로 다른 팀에 대한 분리
– 상호작용이 거의 없는 UI (예: 정보 나열, 제품 크롤링)
– 로그인 및 사용자 참여 UI와 같은 중요한 UI에 대한 분할

Q. 마이크로 프론트 엔드 아키텍처를 적용할 때 어떤 운용 메트릭을 설정해야 할까요?

A. 마이크로 프론트 엔드 아키텍쳐의 경우, 단일 애플리케이션과 비교하여 여러 개의 독립적인 서비스로 구성되어 있기 때문에 이를 적용하기 위해서는 다른 운영 메트릭을 설정해야 한다. 이것은 다음과 같은 형태가 될 수 있다.

– 서비스의 수정 버전
– 각각의 서비스 URL의 가용성
– 코드 리뷰 필요한 PR
– 승인된 PR(배포 완료)

이러한 운영 메트릭들은 확인해야 할 사항에 대한 필요한 정보를 제공해주기 때문에 중요하다.
Q. 마이크로 프론트 엔드를 통해 어떤 어려움이 해결되나요?

A. 대규모 애플리케이션에서는 마이크로 프론트 엔드를 이용하여 UI를 모듈 단위로 분리할 수 있다. 이를 통해 복잡한 코드 운영을 간소화 시킬 수 있어 유연성 및 유지 보수성이 높아진다는 장점이 있다. 또한 개발자들은 UI 모듈의 독립적인 개발과 배포를 가능하게 하여 더 높은 진행 속도와 안정성을 보장할 수 있다.

사용자가 검색하는 키워드: 토스 마이크로프론트엔드, 리액트 마이크로 프론트엔드, 마이크로 프론트엔드 책, 마이크로 프론트엔드 아키텍처, 마이크로 프론트엔드 모노레포, 마이크로 프론트엔드 구현, Micro frontend React, Micro frontend framework

“마이크로 프론트 엔드” 관련 동영상 보기

[NHN FORWARD 22] 거대한 서비스 쪼개서 마이크로 프런트엔드 만들기

더보기: tapchicuoihoi.com

토스 마이크로프론트엔드

토스 마이크로프론트엔드

토스는 최근엔 업무 프로세스를 최적화하고 각종 서비스를 제공하는 금융 IT 회사로 성장하고 있다. 높은 기술력과 참신한 아이디어를 갖춘 인재들이 모여 있어 지금까지도 끊임 없이 새로운 기술적 발전을 추구하고 이를 이용해 새로운 제품 및 서비스를 만들어내고 있으며, 그 중 하나가 바로 “토스 마이크로프론트엔드” 이다.

프론트엔드란?

와이어프레임이나 디자인과 같은 외관적인 요소와 클라이언트와의 인터페이스 연결 등, 웹페이지의 코드 부분 중에서 사용자가 직접적으로 상호작용하는 부분을 프론트엔드라고 부른다. 현재 대부분의 프론트엔드는 JavaScript, HTML 및 CSS와 같은 표준 웹 플랫폼 언어를 사용해 작성된다.

그러나 대부분의 사람들이 알고 있는 대로, 더 매끄러운 사용자 경험을 위해서는 실제로 필수적인 개발 작업 직전에 프론트엔드와 백엔드 간의 작업과정과 비즈니스 로직, 데이터 구조 구축과 같은 내용들도 필수적으로 변경되어야 하며, 또한 프론트엔드 작업이 쉽게 바뀔 수 있으므로 이러한 작업을 담당하는 설계, 구성, 유지보수 단계를 담당하는 마이크로프론트엔드 아키텍쳐가 등장하게 된다.

첫 출시

토스 마이크로프론트엔드는 2019년 초반에 최초로 출시되었다. 이성규 당시 회장은 “UI/UX 기술 중심의 Toss 금전관리 서비스는 현재 전부 Desktop 웹 어플리케이션 형태로 존재했고, Mobile Application 형태로도 대부분 서비스를 제공하지만 Mobile Web Browser를 통해 접속하는 경우 크기처리가 곤란하다는 불편함이 존재하였습니다. 토스 마이크로프론트엔드는 이러한 문제점들을 개선시킬 수 있는 새로운 기술을 적용한 개발 방법이다.” 라고 언급하며 출시에 이르렀다.

토스 마이크로프론트엔드의 구조

토스 마이크로프론트엔드는 Vue.js를 사용한 독자적인 아키텍쳐로 구성되어 있다. 기존 프론트엔드 개발과 다르게 UI 렌더링에 대한 작업이 프론트앤드에서만 하지 않고, 백엔드 개발자들과도 직접적인 협업을 함으로써 좀 더 체계적이고 독립적인 설계가 가능하다. 프론트엔드와 백엔드 개발자 모두가 각자의 책임을 지고 서비스를 개발하며, 프론트앤드와 백엔드의 내부 API를 맞추고 데이터와 비즈니스로직을 공유할 수 있다.

Vue.js는 라이브러리로, JavaScript 개발에 참조될 수 있으며, 리액트나 앵귤러와 같은 기술과 엮을 수 있습니다. 토스 마이크로프론트엔드는 Vue.js의 기반 기술을 사용해 프론트엔드 앱 개발을 시작합니다. Vue.js는 유연하고 금방 배우고 사용하기 쉬우며, 확장성과 성능도 뛰어납니다. 여기에 TypeScript, Webpack, jest, Eslint, Pug 등의 기술들이 조합되어 유연하고 안정적인 프로그램 개발에 좋은 기반이 세워졌다.

시운전

토스 마이크로프론트앤드는 이슈트래커, 유저그룹 매니징 시스템, 추적 시스템, 게시글, 실시간 채팅 등 지금까지 보았던 다양한 토스 서비스들이 한 개의 통일된 UI&UX 시스템을 공유하기 때문에 여러 서비스들이 하나의 페이지 안에서 혼재되지 않아 UI&UX적으로도 매우 일관성 있게 구성되어 있다.

추가로, 토스 마이크로프론트엔드를 도입함으로써, 모바일 브라우저 상에서도 토스 모바일 앱을 사용하는 것과 유사한 경험을 제공할 수 있습니다. 물론 푸시알림, 모바일 지문인식 등의 추가 기능은 제공하지 않습니다.

FAQ

Q: 토스 마이크로프론트엔드의 장점은 무엇인가요?

A: 토스 마이크로프론트엔드는 개발자가 프론트엔드와 백엔드 간의 작업과정, 비즈니스로직과 데이터 구조 구축 등을 보다 체계적으로 할 수 있도록 도와주며, 높은 성능과 안정성을 제공합니다. 또한 다양한 토스 서비스들이 하나의 UI&UX 시스템을 공유하며, 매우 일관성 있게 구성되어있기 때문에, 모바일 브라우저 상에서도 토스 모바일 앱을 사용하는 것과 유사한 사용자 경험을 제공할 수 있습니다.

Q: 토스 마이크로프론트엔드의 사용 대상은 누구인가요?

A: 프론트엔드 및 백엔드 개발자, 디자이너 및 프로덕트 매니저 등 웹 서비스를 개발한다면 누구나 사용할 수 있습니다.

Q: 토스 마이크로프론트엔드와 리액트, 앵귤러 등의 기술들의 차이점은?

A: 토스 마이크로프론트엔드는 Vue.js를 기반 기술로 사용하며, TypeScript, Webpack, jest, Eslint, Pug 등의 기술들이 조합되어 좀 더 체계적이고 독립적인 설계가 가능합니다. 반면, 리액트는 사용하기 쉽고 구조가 단순합니다. 앵귤러는 코딩 요소와 구조적으로 복잡합니다.

Q: 누구에게 토스 마이크로프론트엔드를 추천하나요?

A: 이번에 새로 웹앱을 만들려는 개발자가 웹 페이지, 모바일 웹, 백오피스 등 다양한 플랫폼에서 일관성 있게 UI와 UX를 제공하는 웹앱 개발을 위해서, 혁신적인 UI와 UX 설계를 원하는 회사나 개인들에게 추천합니다.

리액트 마이크로 프론트엔드

리액트 마이크로 프론트엔드 – 새로운 개발 경험

마이크로 프론트엔드는 일반적으로 개발자가 쉽게 파악할 수 있는 모델에서 여러 마이크로 프론트엔드 서비스를 조합하여 하나의 애플리케이션을 구축하는 방식입니다. 이것을 위해 애플리케이션은 거대한 모놀리틱 서비스에서 부터 미세한 마이크로 프론트엔드 단위까지 다양한 규모로 나뉘어지게 됩니다. 이러한 아키텍처로 개발자들은 애플리케이션을 더 이상 큰 연못으로 생각하지 않고 가벼워진 여러 작은 기능 단위들로 생각하게 되고, 모듈 단위로 쉽게 작업할 수 있습니다.

그리고 이 마이크로 프론트엔드를 구축할 때 앞서 언급한 것 처럼 리액트는 미친 듯이 인기가 있고 매우 융통성이 있기 때문에 선택의 우선순위가 높아지게 됩니다. 이러한 이유로 리액트를 이용하여 마이크로 프론트엔드 서비스를 구축하는 것이 개발자들의 최우선이 됩니다.

리액트로 마이크로 프론트엔드 서비스를 구축할 때, 마이크로 서비스의 단일 페이지 애플리케이션(SPA) 방식을 사용하게 됩니다. SPA 방식은 서버로부터 모든 콘텐츠를 수신하지 않고 사용자가 페이지를 이동할 때 필요한 데이터만 수신하는 것을 말합니다. 이러한 방식은 사용자에게 빠르고 최신 정보를 제공할 수 있으며, 서버자원이 절약됩니다.

한 마이크로 프론트엔드 서비스에 대해 React를 사용하여 구축하면 다음과 같은 이점이 있습니다:

1. 손쉽고 빠른 개발

React는 만들기 쉽고 놀랍도록 성능이 뛰어난 UI를 만들 수 있습니다. 개발자는 빠른 프로토타이핑, 컴포넌트 재사용 등을 위해 도구 상자에서 여러 코드 스 니펫을 사용할 수 있습니다. 모든 것이 모듈화되어 있으며 다른 컴포넌트 모듈에 의존성이 높으므로 개발자는 코드를 쉽게 유지할 수 있습니다.

2. 컴포넌트화와 재사용성

React는 컴포넌트 중심적인 프론트엔드 구축을 가능하게 합니다. 모든 UI 구성 요소는 컴포넌트로 만들어지며 실제로 대부분의 React 개발은 다른 컴포넌트를 조합하여 새로운 컴포넌트를 만드는 과정입니다.

이러한 컴포넌트화 작업으로 인해 필요한 기능들을 단순히 조립함으로써 여러 마이크로서비스에 쉽게 재사용할 수 있습니다. 이렇게 해서 코드양을 줄일 수 있다는 것은 매우 중요합니다.

3. 높은 생산성

React는 간단한 최적화 및 다른 라이브러리와 통합하기 쉽습니다. 이는 개발과 유지보수 작업을 단순화하고 애플리케이션의 성능을 향상시키기 때문입니다. 다양한 플랫폼 및 기술 스택과 쉽게 통합할 수 있습니다. 또한 React를 사용하는 개발자는 개별 마이크로서비스를 쉽게 테스트 할 수 있습니다.

FAQ

Q1: 마이크로 프론트엔드의 부산물 중 어떤 것을 사용하여 특정 마이크로 서비스를 사용자에게 노출시키나요?

A1: 마이크로서비스의 규모가 작고 일반적으로 단일 JS 파일로 구성된 경우, 이를 사용자에게 제공하는 방법으로 Iframe을 사용할 수 있습니다.

Q2: 마이크로 프론트엔드에서 React를 사용할 때, 어떻게 코드를 관리하나요?

A2: React 기반의 마이크로서비스와 관련된 코드는 모두 작은 라이브러리처럼 관리됩니다. 각각의 마이크로서비스는 자체 Git 저장소를 가진 별도의 프로젝트로 유지됩니다.

Q3. 마이크로 프론트엔드를 사용했을 때 어떤 문제가 발생할 수 있나요?

A3. 마이크로 프론트엔드에서 가장 큰 문제는 마이크로서비스 간 협업 부재입니다. 결합도가 낮아지면, 결과적으로 모든 서비스를 쿼리하는 서버 측 API를 추적하고 고도로 유지 관리가 필요합니다. 따라서 고민하지 않고 구현하지 않으면, 초기 구성에서 코드의 디자인 및 공유 방법을 결정하는 것이 중요합니다.

여기에서 마이크로 프론트 엔드와 관련된 추가 정보를 볼 수 있습니다.

더보기: 당신을 위한 최고의 기사 448개

따라서 마이크로 프론트 엔드 주제에 대한 기사 읽기를 마쳤습니다. 이 기사가 유용하다고 생각되면 다른 사람들과 공유하십시오. 매우 감사합니다.

원천: Top 59 마이크로 프론트 엔드

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *