오늘 공부

알고리즘 문제 풀기(프로그래머스)
https://github.com/hoinlee-moi/Algorithm

JS기본문법 다시 공부
https://github.com/hoinlee-moi/ModernJS

React 강의 듣기
https://github.com/hoinlee-moi/React_prac

밀린 TIL을 쓰게 될 줄은 몰랐는데 그동안 저녁에 너무 힘들긴 했다.
지금 한 3주정도 쉬는 날 없이 계속해서 일하는 중이여서 그런가 빡세긴 하다.
현재의 알고리즘 문제는 거의 다 풀어지는데 테스트 케이스를 전부 예상하지 못하고 틀리는 경우가 있긴 하다.
조금 더 깊이 생각해보고 풀어보도록 고민 해보자.

SPA

단일 페이지 애플리케이션으로 모던 웹의 패러다임이다. SPA는 기본적으로 단일 페이지로 구성되며
기존의 서버 사이드 렌더링과 비교할 때, 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

link tag를 사용하는 전통적인 화면 전환 방식은 새로운 페이지 요청시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링 하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다.
또 변경이 필요없는 부분까지 포함하여 전체 페이지를 갱신하므로 비효율적이다.

SPA는 기본적으로 웹 애플리케이션에 필요한 정적 리소스를 최초 접근시 단 한번만 다운로드한다.
이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.

모바일 사용이 데스크톱을 넘어선 현재, 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈다. SPA의 핵심 가치는 사용자 경험(UX) 향상에 있으며 부가적으로 애플리케이션 속도의 향상도 기대할 수 있어서 모바일 퍼스트 전략에 부합한다.

모든 소프트 웨어 아키텍처에는 트레이드오프가 존재하며 모든 애플리 케이션에 적합한 건 없듯 SPA또한 구조적인 단점이 있다

• 초기 구동속도
  SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번 다운로드하기 때문에 초기 구동속도가 상대적으로 느리다.
  하지만 SPA는 웹페이지보다는 애플리케이션에 적합한 기술이므로 트래픽 감소와 속도, 사용성, 반응성의 향상 등의 장점을 생각한다면 결정적인 단점이라고 할 수는 없다.

• SEO(검색엔진 최적화) 이슈
  SPA는 일반적으로 SSR 방식이 아닌 JS 기반 비동기 모델의 CSR 방식으로 동작한다.
  CSR은 일반적으로 데이터 패치 요청을 통해 서버로부터 데이터를 응답받아 뷰를 동적으로 생성하는데 이때 브라우저 주소창의 URL이 변경되지 않는다.
  이는 사용자 방문 history를 관리할 수 없음을 의미하며 SEO 이슈의 발생 원인이기도 하다.
  SPA의 SEO이슈는 언제나 단점으로 부각되어 왔다.
  SPA는 정보 제공을 위한 웹페이지보단 애플리케이션에 적합한 기술이므로 SEO 이슈는 심각한 문제로 취급할 수 없다고 생각할 수도 있지만 블로그와 같이 애플리케이션의 경우 SEO는 무시할 수 없는 중요한 의미를 갖는다.
  Angular나 React 등의 SPA 프레임워크는 SSR을 지원하는 기능이 이미 존재하고 있고 크롬 등의 모든 브라우저는 SPA의 SEO 문제를 해결하고 있다!
  갓구글