현대 앱 아키텍쳐 설명 (Backend/Frontend/MVC/Flux/Redux/MSA)

심재훈 23.01.16

8,770 29 1

facebook twitter kakao link

29 1

facebook twitter kakao link

개요

이번 포스팅에서는 현대 앱 개발에 쓰이는 주요 아키텍쳐를 설명해보고자 합니다.

저희 팀에서 올해부터 FastAPI, React 스택으로 평가 모니터링 시스템을 맡게 되었는데요.

관련 입문 서적은 많지만, 전반적인 아키텍쳐를 설명해주는 자료는 없어서 직접 정리해봤습니다.

아래 키워드 목록 봐보시고, 궁금하다 싶으면 읽어주세요~

#Backend #Frontend #Model # View #Controller #MVC #Flux #Redux #Microservices #MSA

Service

하나의 서비스는 백엔드 / 프론트엔드로 나눌 수 있습니다.

예시: 날씨 정보를 제공해주는 서비스

날씨 서비스를 만든다고 합시다. 이 서비스는 UI와 날씨 데이터, DB로 구성되어 있습니다.

화면을 구성하는 UI 부분이 프론트엔드, 날씨 데이터는 백엔드가 담당합니다. 날씨 데이터를 데이터베이스에 쌓을 수 있습니다.

전체서비스구조 small.jpg

데이터베이스는 간단히 엑셀시트를 떠올리면 됩니다. 기본적으로 테이블 형식입니다.

백엔드에서는 프론트엔드에서 쓸 데이터를 만들어줍니다. 사용자 요청에 따라 DB에서 데이터를 찾고 프론트엔드에서 쓰기 쉽게 가공해 응답합니다. 주로 json 포맷으로 주고 받습니다. (Read)

사용자 요청에 따라 데이터를 DB에 생성하고, 기존 데이터를 수정하거나 삭제도 가능합니다. (Create, Update, Delete)

CRUD : Create Read Update Delete

프론트엔드에서는 백엔드에서 받은 데이터를 가지고 화면(*UI)을 꾸며줍니다. 주로 웹 (HTML, CSS)으로 결과물을 만듭니다. 이외에도 MFC 나 QT, ATOM 등 다양한 UI를 활용해 만들 수 있습니다.

UI : User Interface

오늘의_날씨_5도_전체 small.jpg

Backend

백엔드에서는 주로 복잡한 로직을 처리하고, 프론트엔드에서 쓸 데이터를 관리합니다.

날씨와 외출 관련된 서비스를 만들어 본다고 합시다. (외출몬 🌞☔👕 )

외출몬 서비스를 예시로 들면, 백엔드에서는 아래 역할을 할 수 있습니다.

1. 날씨와 의류 데이터를 이용해 날씨에 맞는 의류 추천하는 로직

2. 이번 주 날씨를 바탕으로 세차 지수를 계산

3. 이번주 날씨 데이터 기상청에서 파싱

데이터와 관련된 작업을 하고, DB와 연결되어 CRUD 작업도 진행합니다.

DB와 연결하는 방식은 SQL문을 직접 작성하거나, 각종 라이브러리에서 제공하는 ORM을 이용하면 됩니다.

ORM은 프로그래밍 언어의 변수와 DB 데이터를 연결해주는 문법으로 이해할 수 있습니다.

ORM : Object Relational Mapping

백엔드를 구현할 수 있는 프레임워크로는 Spring Boot, Django REST Framework, FastAPI가 있습니다.

백엔드구조 small.jpg

Backend 구조는 MVC 패턴을 많이 이용합니다. MVC 개념을 이해하면 비슷한 패턴도 이해하기 좋습니다.

Model

현대 앱 개발에서는 데이터가 중심입니다. 모델은 이 데이터를 정의하는 부분입니다.

엑셀 테이블을 만들 때, 첫번째 행에 열 정보를 입력하죠. Model은 축약하면 열 정보로 이해할 수 있습니다ㅎㅎ

외출몬의 models.py 장고 코드를 예시로 살펴보겠습니다.

from django.db import models


class Weather(models.Model):
    class Summary(models.TextChoices):
        SUNNY = "sunny", "sunny"
        CLOUD = "cloud", "cloud"
        RAIN = "rain", "rain"
        SNOW = "snow", "snow"

    location = models.CharField(max_length=500)
    temperature = models.IntegerField()
    summary = models.CharField(max_length=100, choices=Summary.choices)
    time = models.DateTimeField()

location, temperature, summary, time 열을 정의했습니다.

summary 열의 경우처럼 모델에 제약사항을 걸어둘 수 도 있습니다. (SUNNY, CLOUD, RAIN, SNOW 4가지 중 하나)

이렇게 모델을 정의하면 이 정보를 바탕으로 프레임워크가 DB에 테이블을 만듭니다. (ORM이나 SQL 이용)

View

백엔드에서는 프론트엔드에 데이터를 보내게 되는데요. 뷰에서는 데이터를 어떻게 보낼지 작성할 수 있습니다. 주로 json 형식으로 보내게 됩니다.

먼저 model을 통해 사용자 요청에 맞는 데이터를 DB에서 받고, 이를 json 포멧으로 가공해 응답합니다.

왼쪽 그림에서는 json 형태로 입력을 하여 instance를 생성하고 있습니다. (POST)

오른쪽 그림을 보면 Weather 테이블에서 2번째 instance를 읽었습니다. (GET)

사용자가 이에 대해 삭제나 수정을 할 수 있습니다. (DELETE, PUT)

백엔드와 프론트엔드는 이 4가지 HTTP Method을 통해 데이터를 주고 받습니다.

여기서 200 OK, 404 Not Found, 500 Error 같은 HTTP status code도 확인할 수 있습니다.

Backend Interface small.jpg

(json 형태의 데이터를 주고 받음)

Controller

컨트롤러는 복잡한 로직을 처리하고 이를 뷰에 전달합니다.

사용자 요청에 따라 모델, 뷰 업데이트가 필요하면 컨트롤러에 해당 코드를 작성합니다.

외출몬의 장고 코드를 예시로 살펴보겠습니다.

from rest_framework import viewsets

from weather.serializers import WeatherSerializer
from weather.models import Weather


def get_fahrenheit(celsius):
    return (celsius - 32) / 1.8


class WeatherViewSet(viewsets.ModelViewSet):
    serializer_class = WeatherSerializer

    def get_queryset(self):
        queryset = Weather.objects.all()
        temperature_format = self.request.query_params.get('temperature_format')
        if temperature_format is not None and temperature_format.startswith('F'):
            for query in queryset:
                celsius = query.temperature
                query.temperature = get_fahrenheit(celsius)
        return queryset