프로젝트는 데이터 흐름, 코드가 실행되는 순서 등에 따라 구조를 나눌 수 있다. 이렇게 구조를 나누면 해당 계층의 역할에 집중할 수 있고 각 계층의 역할을 기억하기 쉬워진다. 네트워크를 5계층으로 나눈 이유와 비슷하다.
Presentation Layer
사용자에게 시각적으로 보여지는 것(Presentation)을 관리하는 계층이다. 사용자와 상호작용한 결과나 Controller 계층으로부터 받은 데이터를 사용자에게 시각적으로 보여준다. 일반적으로 이 계층에선 컴포넌트 패턴이 자주 사용된다(React, Vue 등).
이 계층에서 작성된 코드는 주로 클라이언트의 브라우저에서 실행된다. 서버 측 렌더링 방식이면 서버에서 실행되고 그 결과(html, css 등)가 클라이언트로 전송된다.
Controller Layer
Presentation 계층과 Service 계층은 물리적으로 떨어진 경우가 많기 때문에 이 두 계층을 네트워크를 통해 연결하는 계층이 Controller 계층이다. 네트워크를 통해 통신하기 때문에 주로 인터넷의 HTTP(S)를 이용한다. 이 계층에선 GraphQL이나 HTTP에 기반한 REST 방식 등을 통해 데이터를 주고 받는다.
Service Layer
비즈니스 요구를 반영한 로직(Service, Business Logic)이 구현되어 있는 계층이다. Business Logic Layer라고도 한다. 이 계층에선 Persistence 계층과 Controller 계층에서 받은 데이터를 이용해 프로젝트의 핵심 기능을 구현한다.
데이터베이스 구조를 자주 바꾸기엔 비용이 크지만 비즈니스 로직은 사용자의 요청 등에 따라 자주 바뀌기 때문에 데이터베이스 계층으로부터 비즈니스 로직 계층을 분리한다.
Persistence Layer
Service 계층에서 생성된 데이터에 영속성(Persistence)을 부여하는 계층이다. 일반적으로 Service 계층에선 데이터를 객체로 관리하는데, 객체는 메모리에 있기 때문에 서버가 종료되면 객체도 없어진다. 그래서 이 계층은 서버가 종료돼도 이런 데이터를 보존하기 위해 데이터베이스에 저장하는 기능 등을(CRUD) 제공한다.
RDBMS는 여러 SQL을 제공하는데 실제 프로젝트에선 이 SQL 중에서 자주 사용하는 SQL 위주로 최적화해서 사용한다. 그런데 데이터베이스에 접근할 때마다 매번 SQL을 최적화해서 작성하는 것은 기억하기 힘들고 실수가 생길 수 있기 때문에, 이렇게 데이터베이스에 접근하는 과정을 추상화해서(함수로 만들어서) Service 계층에 제공한다.
일반적으로 데이터베이스 테이블에서 얻은 데이터를 객체로 만들어 Service 계층에 제공한다. 이를 ORM이라고도 한다.
Database
데이터베이스 그 자체. Oracle, Postgres 등이 아니면 이를 직접 개발하진 않는다. 프로젝트 규모가 작을 경우 데이터베이스를 파일로 직접 관리하기도 한다.
서버-클라이언트 프론트엔드-백엔드
서버-클라이언트는 물리적으로 구분된 두 기기(컴퓨터)의 관계를 표현하는 용어고, 프론트엔드-백엔드는 사용자와 상호작용하는 부분과 상호작용 이벤트 및 데이터를 처리하는 부분을 표현하는 용어다.
- 서버 : 클라이언트로부터 요청을 받아 클라이언트에게 응답을 준다.
- 클라이언트 : 서버로 요청을 보내고 서버로부터 응답을 받는다.
서버-클라이언트의 구분은 물리적으로 구분할 수 있기 때문에 객관적이다. 그리고 다계층 구조에서 한 서버는 다른 계층에 대해서 클라이언트가 될 수 있다. 즉, 어떤 계층은 서버면서 클라이언트일 수 있다.
- 프론트엔드 : 사용자와 상호작용하고 사용자의 상호작용 데이터를 관리한다. 이러한 데이터와 백엔드로부터 받은 데이터 등을 사용자에게 시각적으로 보여준다.
- 백엔드 : 데이터의 CRUD를 관리하는 비즈니스 로직을 제공한다.
프론트엔드-백엔드의 역할은 명확하지만 두 용어 사이의 경계는 모호하다. 즉, ‘어디까지를 프론트엔드로 보고 어디까지를 백엔드로 볼 것인가’가 프로젝트마다 다를 수 있다. 일반적으로 Presentation 계층은 프론트엔드에 속하고, 그 외 나머지 계층은 백엔드에 속한다.
StackExchange: Is the term 'Front-End' synonymous with 'Client-Side'?
