SPA란 무엇이고 왜 쓰는걸까?

SPA는 무엇일까?

⇒ 말 그대로, 페이지가 하나인 어플리케이션입니다.

SPA는 왜 쓰는걸까?

기존 방식은 페이지를 이동할 때마다 서버에서 필요한 html 파일을 받아와서 해석한 뒤에 화면에 보여줬다. 하지만, 요즘의 경우 웹에서 보여줘야 될 정보가 많아 규모가 점점 커졌기 때문에 서버에서 모든 뷰를 준비한다면 성능 상 문제가 발생할 수 있다. 그렇기 때문에, 요즘에는 뷰를 렌더링을 서버가 아닌 웹 브라우저에서 하게 끔 만들어 속도를 개선함으로써 해결했다.

SPA는 웹 브라우저에서 뷰를 담당하기 때문에, 서버에서 정적인 부분이 포함된 HTML 파일을 받아와서 그 위에 동적으로 렌더링을 해준다. 그렇기 때문에 위의 방식을 통한 구현이 가능했고 사용성과 반응성도 좋아서 현재는 인기있는 웹 개발 방식이라고 볼 수 있다.

=> 기존 방식과 SPA 방식의 동작 차이를 보여주는 사진

현재, 가장 인기있는 React에서도 아래의 세 가지를 통해 SPA로 구현 가능하다!

1. 리액트 라우터(react-router)
2. 리치 라우터(reach-router)
3. Next.js ㅤ ㅤ ㅤ

?? : 좋은 점만 있는건 아닐텐데 단점이 있나요?

1. 앱 규모가 커지면 Js 파일이 커지는 현상이 발생한다.

2. 페이지 로딩 시 사용자가 방문하지 않을 페이지의 스크립트도 불러와짐… => 초기 구동 속도가 느려지게 되어버리는 현상이 발생.

3. 데이터를 별도로 요청하고 받아와서 화면을 구성하므로 설계에 따라 화면이 변하는 모습이 사용자에게 노출될 수 있음.

ㅤ ㅤ 찾아보니, 이 세가지 정도의 단점이 존재하는 것 같았음.

1번의 경우 어쩔 수 없다고 해도, 2번과 3번의 경우…

• 2번은 lazy loading(지연 로딩)을 통해 특정 URL을 진입할 때 그에 해당하는 데이터들만 받아오는 것으로 해결이 가능하다.
• 3번은 Pre-rendering을 함으로써 어느정도 해결이 가능하다.

ㅤ ㅤ lazy loading의 경우, 위의 사례처럼 URL을 통해 적용이 될 수도 있지만 사용자의 View port를 통해 보이는 이미지만 request 해온다던지… 하는 방법으로도 적용이 가능합니다.

=> Intersection Observer를 활용한 매우 허접한 이미지 슬라이더(주소예정)

Pre-rendering의 경우, 고양이 사진첩에서 경험해볼 수 있어서 혹시, 궁금하신 분들은 요걸 공부해보셔도 참 좋습니다.

=> 프로그래머스 프론트엔드 과제 - 고양이 사진첩 해설