SPA는 Single Page Application의 약자입니다.
SPA의 등장 배경
전통적인 웹 사이트는 페이지를 보여주기 위해서 매번 HTML 파일 전체를 불러와야 했습니다.
하지만 SPA를 통해 변경 된 부분만 새로 불러오기 때문에 깜빡임이 사라졌습니다.
전체 페이지를 계속해서 새로 고침하는 것은 서버와의 불필요한 트래픽을 발생시키고 사용자 입장에서도 느린 반응 때문에 UX 경험 제공이 어려워지게 됩니다.
SPA의 개념
SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아닙니다. 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 해당하는 부분만 업데이트 하는 방식입니다.
SPA의 장점
사용사와 수시로 상호작용이 발생할 때 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트 하기 때문에 사용자의 행동에 빠르게 반응합니다.
(결론은 빠르다.)
서버 입장에서도 요청받은 데이터만 넘겨주기 때문에 과부하 문제를 줄일 수 있습니다.
또한 화면 전체를 렌더링 할 필요가 없기 때문에 보다 나은 UX 제공이 가능합니다.
SPA의 단점
브라우저 첫 로딩시 HTML 파일을 읽고, script tag안에 있는 JavaScript 파일을 다시 받아와야 합니다. 이때 무거운 JavaScript파일의 경우 첫 로딩 시간을 길게 만듭니다.
또한 검색 엔진 최적화가 좋지 않습니다.
검색 엔진의 Robots는 HTML 문서 내 각종 태그와 링크를 분석합니다. 하지만 SPA의 경우 HTML이 비어있는 상태에 가깝기 때문에 Robots이 자료를 수집하지 못합니다.
Wireframe
wire를 통해 frame을 잡는 것을 얘기합니다. 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다.
모든 과정은 설계부터가 중요합니다.
컴포넌트 기반 개발 방법을 학습하기 때문에 페이지를 만들기 전 어떤 컴포넌트를 만들고, 어떤 방식으로 조합할지를 구상해야 합니다.
예를들면
Header라는 컴포넌트가 있고 그의 자식에는 Search와 Setting이 존재할 수 있습니다.
작은 컴포넌트 안에도 다양한 컴포넌트가 존재하게 됩니다.
이렇게 작은 컴포넌트 안에
Thumbnail, Avatar, Title, Name, Views, Date
라는 더 작은 컴포넌트가 들어갈 수 있습니다.
컴포넌트는 UI의 필수 요소
각자 고유의 기능을 가지고 있다는 정의도 맞습니다. 하지만 React 개발자라면 데이터를 컴포넌트 끼리 유기적으로 주고 받을 수 있도록 설계해야 합니다.
(React Router를 사용해서..)
