3계층형 시스템 아키텍처

흔히들 개발 시스템을 구성할 때 3계층형을 사용하게 됩니다. 

프레젠테이션, 애플리케이션, 데이터 계층을 의미하는 데, 각각을 살펴보겠습니다.

 

🧾 목차

1. 3계층 개념

2. 정적 콘텐츠 Vs 동적 콘텐츠

3. 그림으로 살펴보는 시스템 구성도 예제

4. NGINX

---

1. 3계층 개념 (3-tier)

1-1. 프레젠테이션 계층

- 사용자가 마주하는 UI를 제공

- 정적 컨텐츠(Html, Css, Javascript)를 NGINX를 통해 제공

 

1-2. 애플리케이션 계층

- 비지니스 로직 수행

- 동적 컨텐츠를 제공

- 자신이 계산할 수 있는지, 아니면 DB 접속이 필요한지를 판단하여 DB 서버로 요청 전달

 

1-3. 데이터 계층

- 데이터베이스, 파일 저장소

- 애플리케이션의 요청을 받아 데이터 입출력 수행

 

2. 정적 콘텐츠 Vs 동적 콘텐츠

앞서 정적 콘텐츠는 프레젠테이션 계층에서 처리하고, 동적 콘텐츠는 애플리케이션 계층으로 요청을 전달한다고 하였습니다.

정적 콘텐츠와 동적 컨텐츠는 각각 무엇일까요?

 

구별하는 기준은 누가, 언제, 어디든 요청할 때마다 같다면 정적, 달라진다면 동적입니다.

누가? 👉 같은 질의더라도 철수든 미애든 같은 데이터를 제공하면 정적, 사용자에 따라 달라지면 동적입니다. (+언제, 어떤 디바이스든 마찬가지!)

 

따라서 Html, Css, Javascript를 정적인 컨텐츠(정적 파일)이라고 부르는 것입니다.

 

cf) Javscript도 정적 콘텐츠

애니메이션은 움직이는 요소이기 때문에 동적이라고 생각할 수 있지만, 여기서 얘기하는 기준으로는 정적 컨텐츠입니다.
왜냐하면 요청에 대한 응답은 누가, 언제, 어디든 같다는 것을 알 수 있습니다. 

ex "토글 열어주세요" 요청은 누그든, 언제, 어디든 같이 동작함

 

따라서 정적 컨텐츠는 React 프레젠테이션 계층에서 처리하고, 동적 컨텐츠는 Express와 같은 애플리케이션 계층에서 처리하도록 서버를 나눠서 구성한다는 것입니다!

 

3. 그림으로 살펴보는 시스템 구성도 예제

pogakco/api => Express 서버 요청
pogakco => React 서버 요청

 

1-1. 프레젠테이션 계층

- 구성요소 : React, NGINX

- 역할

  - React는 UI를 제공

  - 정적 컨텐츠(Html, Css, Javascript)를 NGINX를 통해 제공

  - 동적 컨텐츠는 NGINX를 통해 Express.js로 전달

 

1-2. 애플리케이션 계층

- 구성요소 : Express.js

- 역할

  - 클라이언트의 요청을 처리하고 비지니스 로직 수행

  - AWS RDS 및 AWS S3와 통신하여 필요한 데이터를 제공

 

1-3. 데이터 계층

- 구성요소: AWS RDS, AWS S3

- 역할

 - AWS RDS는 데이터 저장 및 관리(DB)

 - AWS S3는 이미지와 같은 정적 파일을 저장 및 제공

 

4. NGINX

NGINX는 이 아키텍처에서 중앙 허브 역할을 수행합니다.

1. 리버스 프록시 (Reverse Proxy) : 클라이언트 요청을 받아 해당 요청을 Express.js로 전달합니다.

2. 정적 파일 서빙 : React에서 빌드된 정적 파일(Html, Css, Javascript)를 클라이언트로 전달합니다.

3. CORS 해결 : 같은 도메인 내에서 중앙 허브 역할을 수행하며 CORS 문제를 해결하였습니다.