항해99 12기 - 230203 TIL

오늘 한 일

• SPA vs MPA 찾아보기
• 코딩애플 React 강의 듣기
• React 적응하기!!
• 더 공부해 볼 것:
  - SSR vs CSR, Flux, 렌더링, DOM, Virtual DOM, Component와 Props

오늘은 리액트 첫날@ 드디어 알고리즘이 끝나고 리액트 공부를 시작!! 생각보다 더 재밌다. 우리팀원들 다 엄청 열심히 해서 나도 열심히 하게 된다!!

오늘 배운 것

• SPA
  • Single Page Application, Single Page(한 개의 페이지)로 구성됨
  • 말 그대로 페이지가 하나인 어플리케이션(.html 파일이 1개)
  • react는 SPA 개발에 최적화, 사용자가 웹 사이트에 접속하면 접속 당시 단 한번만 페이지에 필요한 리소스(html, css, js)를 전부 전달
  • 장점:
    • 웹페이지가 부드럽게 작동
    • 필요한 리소스만 부분적으로 로딩 : 서버에서 static resource를 한 번만 요청, 그리고 받은 데이터는 전부 저장해놓는다(cache)
  • 단점:
    • 완성된 형태의 HTML을 가져오는 것이 아니기때문에 검색엔진최적화(SEO, Search Engine Optimization)가 어려움
• MPA
  • SPA와 반대로 페이지가 여러개인 애플리케이션(.html 파일 여러개)
  • spa는 한번에 페이지 랜더링에 필요한 리소스를 받아오는 것이고 mpa는 요청마다 페이지에 필요한 리소스를 전달 받는 것으로 이해
  • 매번 전체 페이지가 다시 렌더링 된다.
  • 장점
    • SEO(Search Engine Optimization) 관점에서 유리 : 완성된 형태의 HTML 파일을 서버로부터 전달 받는다. 따라서 검색엔진이 페이지를 크롤링하기에 적합
    • 첫 로딩이 짧다: SSR(Server Side Rendering) 방식을 사용해 서버에서 이미 렌더링해서 가져온다. 그러나 클라이언트가 JS파일을 모두 다운로드하고 적용하기전 까지 각각의 기능은 동작하지않음
  • 단점
    • 매번 전체페이지를 다시 렌더링하기 때문에 매 페이지 요청마다 리로딩(새로고침) 발생
    • 불필요한 템플릿 중복해서 로딩

참고한 웹사이트

• spa & mpa : https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/