# SPA(Single Page Application)

## 1. What is SPA?

### Traditional Websites

* When users moved to different pages within a website, the browser had to load the 'entire page' as an HTML file every time to show the page

### SPA

* SPA doesn't reload overlapping parts before and after page transitions, but only reloads parts that need updates
* Refers to web applications or websites that work by manipulating data needed for updates with JavaScript and generating HTML elements to display on screen

### Benefits of SPA

* Only needs to receive data for necessary parts and update the screen, so it responds quickly to user interactions
* Server only needs to pass requested data, reducing server overload problems
* Provides better user experience since there's no need to render the entire page

### Disadvantages of SPA

* JavaScript file size is large, so first screen loading time becomes longer due to waiting time for this file
* Not good for SEO. Search engines operate search functions by analyzing data in HTML files, but SPA has no special data in HTML, so search engines don't work properly

\


## 2. Difference Between Wireframe and Mockup

### Wireframe

* Skeleton for web page layout and UI elements, allowing developers to understand design concepts and site functionality

### Mockup

* A model with minimal functionality for demo presentation and evaluation, designed with smartphone or desktop frames overlaid for intuitive understanding

\


## 3. Router

### Routing

* Process of showing different views according to different addresses, meaning "change according to path"
* In React, 'React Router' library is most commonly used for this routing

### Main Components

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