React SPA

1. SPA

SPA의 등장 배경

• 전통적인 웹사이트는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러왔다.

• 전통적인 웹사이트는 페이지 전체를 로딩해서 Header 나 Navigation Bar 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰다.

• 1990년대 후반 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작

• 2000년대 중반 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화 이것이 지금 배우고 있는 싱글 페이지 애플리케이션, 즉 SPA(Single-Page Application)

SPA의 개념

• SPA(Single-Page Application)는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않음.

• SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트 하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트 하는 방식으로 작동하는 웹 애플리케이션, 웹 사이트를 말한다.

SPA의 장점

• 전체 페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 Interaction에 빠르게 반응함

• 서버에서는 요청 받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 현저하게 줄어든다.

• 전체 페이지를 렌더링 할 필요가 없기 때문에 더 나은 유저경험을 제공한다.

• SPA 방식으로 만들어진 대표적인 서비스로는 Youtube가 있고, facebook, Gmail, airbnb, Netflix 등 우리가 일상적으로 사용하는 다양한 서비스들이 SPA 방식으로 제작되어 있다.

SPA의 단점

• SPA 경우 JavaScript 파일의 크기가 커서 JavaScript 파일을 기다리는 시간으로 인해 첫 화면 로딩 시간이 길다.

• 검색 엔진의 최적화(SEO)가 좋지 않음. 구글이나 네이버 같은 검색 엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동한다.

• 하지만 SPA의 경우 HTML파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 않는다.

• 이 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고, 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어 났지만

• SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세이다.

2. Wireframe

• Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말한다.

• Wireframe은 웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대를

• 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말한다.

• Wireframe을 하는 이유는 페이지를 먼저 만들기보다는 어떤 컴포넌트를 만들고 이들을 조합할지부터 구상할 계획이라 할수있다.