한 입 크기로 잘라먹는 리액트 1-2장

예전 Legacy 시스템

기존의 레거시 시스템에서는 MVC(Model-View-Controller) 아키텍처가 주로 사용되었습니다. 이 아키텍처는 다음과 같은 특징을 가지고 있습니다.

• MVC 아키텍처: 애플리케이션을 모델, 뷰, 컨트롤러로 분리하여 각각의 역할을 명확히 하고 유지보수를 용이하게 합니다.
• 모노리식 아키텍처: 하나의 코드베이스에서 모든 기능을 처리합니다. 이는 초기 개발 및 배포는 간편하지만, 시간이 지남에 따라 유지보수가 어려워지고 확장성이 떨어지는 문제가 있습니다.

모바일 애플리케이션 개발의 문제점

기존 MVC 구조에서 모바일 애플리케이션(Android, iOS)을 개발할 때 다음과 같은 문제가 발생했습니다.

• 플랫폼 별 코드 관리: 안드로이드(AOS)와 iOS 각각의 플랫폼에 맞게 별도의 코드베이스를 관리해야 했습니다.
• DB 접근 제한: 모바일 애플리케이션이 직접 DB에 접근할 수 없기 때문에 백엔드 API를 통해 데이터를 주고받아야 했습니다.
• 중복 작업 발생: 동일한 기능을 두 번 구현해야 하는 비효율성이 존재했습니다.

 

리액트와 스프링부트의 도입

이러한 문제를 해결하기 위해 프론트엔드에서는 리액트를, 백엔드에서는 스프링부트를 도입하는 것이 대세가 되었습니다.

리액트의 장점:

1. 컴포넌트 기반 구조: 재사용 가능한 컴포넌트를 작성하여 코드의 중복을 줄이고 유지보수를 쉽게 할 수 있습니다.
2. 단방향 데이터 흐름: 데이터의 흐름이 한 방향으로만 진행되어 애플리케이션의 상태 관리가 용이합니다.
3. 가상 DOM: 실제 DOM의 변경 사항을 최소화하여 성능을 향상시킵니다.
4. 풍부한 생태계: 다양한 라이브러리와 도구가 존재하여 개발 생산성을 높입니다.

 

현대적인 시스템 아키텍처

현대적인 시스템 아키텍처에서는 클라우드와 마이크로서비스 아키텍처(MSA)를 적극 활용합니다.

AWS 기반 아키텍처:

• EC2(Nginx, React): Nginx와 React 애플리케이션을 EC2 인스턴스에서 호스팅하여 프론트엔드를 처리합니다.
• EC2(Java, SpringBoot): Java와 SpringBoot를 사용하여 백엔드 API를 처리합니다.
• EC2/RDS(DB): 데이터베이스는 Amazon RDS를 사용하여 관리합니다.

CI/CD 파이프라인:

• 젠킨스(Jenkins): 지속적 통합 및 배포(CI/CD) 도구인 젠킨스를 사용하여 코드를 자동으로 빌드, 테스트, 배포합니다.

MSA 도입:

• 마이크로서비스 아키텍처(MSA): 애플리케이션을 작은 서비스 단위로 분리하여 각각 독립적으로 배포 및 확장할 수 있습니다. 이는 서비스 간의 결합도를 낮추고 장애 발생 시 영향 범위를 최소화합니다.

 

 

---

결론

리액트를 도입함으로써 얻을 수 있는 장점은 다음과 같습니다:

• 코드의 재사용성과 유지보수성 향상
• 성능 최적화
• 다양한 라이브러리와 도구의 활용

또한, AWS와 같은 클라우드 서비스를 활용하고 MSA를 도입함으로써 시스템의 확장성과 유연성을 극대화할 수 있습니다. 이는 빠르게 변화하는 비즈니스 요구사항에 대응하고 더 나은 사용자 경험을 제공하는 데 중요한 역할을 합니다.

이러한 변화는 개발 생산성을 높이고, 서비스의 안정성과 확장성을 확보하는 데 큰 도움이 됩니다.