웹개발 아키텍쳐

웹 개발 아키텍쳐

어떠한 종류의 웹 애플리케이션을 구축하더라도 서버에서 실행되는 코드는 항상 필요합니다. 또한 이 외에도 사용자와 상호작용하기 위한 클라이언트에서 실행되는 코드 또한 필요합니다.

애플리케이션을 어떻게 구축할 것인지에 대한 아키텍쳐는 코드를 어디에 위치시킬 것인가에 대한 차이가 시간에 지남에 따라 다양한 아키텍처로 발전해왔습니다. 이러한 아키텍처들에 대해서 한번 자세하게 알아보겠습니다.

각각의 아키텍처에서 구분되는 요소

지속성 어디에서 데이터베이스에서 데이터를 저장 및 읽어 올 것인가?
라우팅 - URL에 기반한 트래픽 전달 URL에 기반한 트래픽을 전달하는 것을 어디서 할 것인가?
데이터 가져오기 - 지속성에서 데이터 가져오기 지속성에서 데이터를 어디에서 가져올 것인가?
데이터 변경 지속성에서의 데이터 변경을 어디에서 실행할 것인가?
렌더링 로직 - 사용자에게 데이터 표시 렌더를 서버에서 하여 사용자에게 전달할 것인가? 클라이언트에서 렌더하여 전달할 것인가?
UI 피드백 사용자의 상호 작용에 대한 응답에 대한 결과를 어디에서 처리할 것인가?

Single Page Apps(SPAs)

이미지

단일 페이지 애플리케이션은 Data feching, 주로 페이지 내의 <form> <a> 태그등을 이용하여 새로운 데이터가 요구될 경우 전체 페이지를 다시 로드하는 방식을 개선하기 위하여 전체 페이지를 로드하는 방식 대신 페이지를 동적으로 다시 작성하여 사용자와 상호작용하는 웹 사이트를 만드는 방법입니다.

위와 같이 전체 페이지를 다시 로드하지 않는 방법을 이용하기 위해서 한 번에 페에지 로딩으로 필요한 모든 HTML, Javascript, CSS 코드를 로드하고 사용자가 UI Feedback 시의 모든 동작에 동적으로 대응이 가능하게 하는 것입니다.

사용자가 URL을 통해 사이트로 들어온다 -> 정적인 파일을 서버에서 클라이언트로 전달한다 -> 브라우저가 HTML파일로 렌더링한다 -> 클라이언트에서 자바스크립트를 불러오고 -> 이를 기반으로 UI Feedback과 Routing

하지만 이러한 SPA 방법은 문서 요청의 방법에서는 이전에 있었던 방식들 보다 더 좋다고 말할 수는 없었습니다.

그럼에도 React, Remix, Vue.js등의 다양한 프레임 워크들은 SPA 방법을 기반으로 만들어지고 있습니다. 이러한 이유는 무엇일 까요?

이유는 단 하나입니다. DX(Develop Experience)가 이전의 방법들 보다 좋기 때문입니다.