Angular, React, Vue가 뭔가요?

Angular, React, Vue가 뭔가요?

오늘 아침에 본 영상 중 하나는 유튜브 채널 얄팍한 코딩사전에서 올라온 Angular, React, Vue가 뭔가요 라는 영상이다.

기존 MVC 모델은 아래 두 가지 치명적인 단점이 있다.

  1. 웹사이트 화면 내 일부 데이터가 업데이트 되었는데 전체 페이지를 다시 로딩한다.
  2. 디바이스별로 웹페이지를 별도로 랜더링해야 한다.

물론 위의 단점 중 1번은 AJAX를 통해 이 문제를 해결했지만 코드가 장황하고(verbose) 지저분하다. 물론 2번도 서버에서 디바이스 관계 없이 가로화면 크기에 따라 최적화하여 내용을 보여주는 반응형(responsive) 웹을 적용하면 해결이 가능하다. 그러나, 만약 화면이 변경되어야 하면 어떻게 해야할까? 서버에 있는 코드를 변경해야 한다. 불편하다. 서버 개발자만 죽어난다. 데이터는 그대로인데 화면이 바꼈다고 서버 프로그램을 변경해야 한다고?

그래서 접근 방법을 바꿨다. 백엔드는 서버가 해야 할 일을, 프론트엔드는 클라이언트가 해야 할 일을 철저히 분리하면 좋지 않을까? 다시 말해서 서버는 클라이언트로부터 데이터를 요청받고, 요청받은 데이터를 전송하는 본질적인 일만 하고, 클라이언트는 서버로부터 전송받은 데이터를 받아서 예쁘게 처리하는 역할로 관심의 영역을 분리(Separation of Concerns, SoC)하는 게 핵심이다.

컴퓨터 과학(Computer Science)에서 관심사의 분리란 각 부문이 각자의 관심사를 갖도록 컴퓨터 프로그램을 여러 부문으로 나누는 설계 원칙입니다.

출처: 관심사의 분리(Separation of Concerns, SoC) – 이현석 Hyunseok Lee @ Medium.com

바로 이게 Single Page Application(SPA)이며 이를 위해 나온 프레임워크가 바로 Google의 Angular, Facebook의 React, 그리고 중국의 Evan You라는 개인이 만든 Vue가 있다. 기본적으로 이 프레임워크는 같은 철학(philosophy)을 공유하고 있다고 보면 된다. 즉, “데이터를 주시오. 그러면 내가 그리겠소.” 라는 구조로 동작한다.

어떻게 보면 SPA는 프론트엔드 개발자에 대한 백엔드 개발자의 반격이다. 다시는 백엔드 개발자를 탓하지마라. (부들부들)

지금 설명한 내용은 아래 영상을 보고 작성했다. 설명 참 잘한당. (박수박수)

얄팍한 코딩사전 – 앵규러, 리액트, 뷰가 뭔가요?

Hits: 4

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다