웹 아키텍처로 이해하는 웹 서비스

Jihu Kim·2024년 1월 13일

Developer, 이건 알고 가

목록 보기

6/6

프론트엔드 개발을 맡고 프로젝트를 진행해보며, 백엔드와 프론트엔드의 경계를 나누는 것에 문제점이 있다고 느꼈다. 만들고자 하는 서비스 자체에 초점을 맞추고 서비스 전체주기를 생각하며 개발을 진행해야만 완성도 있는 서비스가 만들어질 수 있다는 생각을 했다.

물론 프론트엔드와 백엔드를 나누어 역할을 분담하는 것에 있어서는 크게 이의가 없다. 하지만 프론트엔드 개발자와 백엔드 개발자 모두 웹 서비스가 어떻게 만들어지고 운영되는지에 대한 서비스 전체 주기를 이해하고 자신들이 만드는 것이 서비스 자체라는 것을 분명히 알아야만 한다고 생각한다.

백과 프론트의 차이에 매몰되지 않고 진짜 봐야할 것(서비스)이 무엇인지 알아야할 것이다.

본격적으로 웹에 대해서 살표보기에 앞서 프론트엔드와 백엔드의 차이에 대해서 짚고 넘어가도록 하겠다.

프론트엔드 개발자 - UI를 짠다.
백엔드 개발자 - API를 짠다.

UI, API 둘 다 Interface이다. UI와 API 둘 다 사용자가 있다.

UI 사용자는 모든이가 될 수 있기 때문에 .. 수많은 훈수를 견뎌야한다.
API의 사용자는 개발자로 한정되기 때문에 .. 이러한 문제는 적을 수 있다.

프론트엔드가 백엔드 보다 하등하다는 위계가 잡히면 안된다. 어느 하나가 하등하다는 인식을 하면 안된다. 웹 개발자라면 웹 개발자로 오롯이 존재해야한다. 백엔드나 프론트엔드 개발자로 남아서는 안된다.

백엔드나 프론트엔드 개발자로 남아서는 안된다. 웹 개발자라면 오롯이 웹 개발자로 존재해야만 한다.

이제 웹 아키텍처와 함께 살펴보며 웹 서비스가 어떻게 만들어지는지 확실하게 이해해보자.

웹 아키텍처

구성요소

백엔드 (서버) - 사용자 정보, 데이터, 주요 로직들이 들어있다.

프론트엔드 (브라우저) - 보통 브라우저를 가르킨다. 크롬, 사파리와 같은 브라우저들을 클라이언트라고 부르기도 한다.

서버와 프론트엔드는 인터넷으로 연결되어있다.

프론트엔드에서 필요한 데이터를 서버에 요청(request), 서버로 부터 필요한 데이터를 응답(response) 받는다. 해당 데이터를 사용자에게 보여준다.

웹 아키텍처

웹 아키텍처(서버 관점)

서버 아키텍처

html(structure), css(presentation), javacript(behavior) 

  + 프레임워크 (JAVA의 SPRING, Node.js의 Express.js, NestJS)
  + 라이브러리 (React)
  + REST API (HTTP 통신)

자, 이제 웹 아키텍처에 대해서 전체적으로 간단하게 알아보았고, 다음으로는 구체적으로 살펴보도록하겠다.