SPA.md

SPA(Single Page Application)

1. SPA란?

전통적인 웹사이트

• 사용자가 웹사이트 내 다른 페이지 이동 시 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 '페이지 전체'를 불러와야 했음

SPA

• SPA는페이지 전환 전후에 중복되는 부분은 새로 불러오지 않고, 업데이트가 필요한 부분만 새로 불러옴
• JavaScript가 업데이트에 필요한 데이터를 조작하여, HTML 요소를 생성하여 화면에 보여주는 방식으로 작동하는 웹 애플리케이션 혹은 웹 사이트를 말함.

SPA의 장점

• 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기에 사용자와의 interaction에 빠르게 반응
• 서버에서는 요청 받은 데이터만 넘겨주면 되기에 서버 과부하 문제가 감소
• 전체 페이지를 렌더링 할 필요가 없기에 더 나은 유저 경험 제공

SPA의 단점

• JavaScript 파일의 크기가 크기에, 이 파일을 기다리는 시간으로 첫 화면 로딩 시간이 길어짐
• SEO에 좋지 않음. 검색엔진은 HTML 파일에 있는 자료를 분석하는 방식으로 검색 기능을 구동하는데, SPA의 경우 HTML에 별다른 자료가 없기에 검색엔진이 적절히 동작하지 못함.

2. Wireframe과 Mockup의 차이

Wireframe

• 웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대로, 개발자가 디자인 컨셉과 사이트 기능에 대한 이해 가능

Mockup

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

3. Router

Routing

• 다른 주소에 따라 다른 뷰를 보여주는 과정, 즉 "경로에 따라 변경한다"는 의미
• React에서는 이 라우팅을 위해 React Router 라는 '라이브러리'를 가장 많이 사용

주요 컴포넌트

• router: <BrowserRouter>
• route matchers: <Routes>, <Route>
• route changers: <Link>