[React] 기초#2

💡SPA

등장배경

---

• 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를
  보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야했다.
• 전통적인 웹사이트는 페이지 전체를 로딩하고, SPA는 Menu와 Footer와 같이 페이지 전환 전후에
  중복되는 부분은 새로 불러오지 않으며, 이와 같이 " 페이지 전체를 불러오는 행위"를
  보통 깜빡인다고 표현한다.
• 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱
  많은 상호작용이 일어나게 되었다, 하지만 이때마다 Header나 Navigation Bar등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와 불필요한 트래픽을 발생시켰다.
  따라서 더 느린 반응성을 갖게되고 이는 애플리케이션 같은 사용자 경험을 제공하기 어렵게 만들었다.
• 1990년대 후반에 와서야 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아
  JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작
• 2000년대 중반부터는 이러한 개발 방식을 이용한 웹 애플리케이션이 보편화되었으며, 이것을 싱글 페이지 애플리케이션, 즉 SPA라고 한다.

개념

---

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

SPA의 장단점

장점

---

1. 사용자와의 Interaction에 빠르게 반응한다.

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

2. 서버 과부화의 문제가 현저하게 줄어든다.

• 서버에서 요청받은 데이터만 넘겨주면 되기때문에, 과부하 문제가 생길 확률이 적다.

3. 불필요한 랜더링

• 화면 전체를 새로 랜더링할 필요가 없기 때문에 보다 나은 사용자 경험을 제공한다.
• SPA 방식으로 만들어진 대표적인 서비스 Youtube, Facebook, Gmail, airbnb, Netflix등이
  있다.

단점

---

1. 첫 화면 로딩 시간이 길어진다.

• 브라우저는 첫 화면을 로딩할 때 HTML 파일을 읽어들인 후 그 안에 script tag안에 있는
  JavaScript 파일을 다시 받아오는 과정을 거친다.
• 이 때, HTML 파일은 거의 비어있고, 대부분의 코드는 JavaScript 파일안에 들어있다보니
  JavaScript 파일의 크기가 크기 때문에 JavaScript 파일을 기다리는 시간으로 인해 첫 화면의
  로딩 시간이 길어진다.

2. 검색 엔진 최적화(SEO)에 좋지 않다.

• 구글이나 네이버같은 검색엔진은 검색 로봇이 웹 페이지에 있는 정보를 수집하고 분석해서 그 결과값에 인덱스를 만들어 보관하고 있다가 사용자가 검색어를 입력하면 보관하고 있던
  인덱스에서 검색어과 가장 연관성이 높은 웹 페이지들을 순서대로 보여주는 방식으로 작동한다.
• 그러나 SPA의 경우 HTML 파일은 별다른 자료가 없기 때문에 검색 엔진이 적절히 동작하지 못한다.
• 이 때문에 검색 노출이 중요한 웹 애플리케이셔은 검색 엔진 최적화에 대한 대응책을 따로
  마련해야 하고, 더불어 앱 안에서 다양한 상태 관리도 해야하기 때문에 개발의 복잡도가
  더욱 늘어난다.

💡 Wireframe

개념

---

• 웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대
• 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말한다.

Mockup 과의 차이점

---

• 데모 시연, 평가를 위한 최소한의 기능만 담은 도형이다.
• 데스크톱, 스마트폰의 프레임을 덧씌워 직곽적으로 이해하기 쉽게 디자인한 것을 말한다.