[TIL] 20230610 - window.onresize / SPA, MPA (Single-Page App, Multi-Page App)

window.onresize는 리사이즈가 될때마다 객체에 발생하는 이벤트다.

 

팀프로젝트로 API를 받아와서 영화 정보 조회 사이트를 만드는 프로젝트였다.

영화 정보 상세페이지에 같은 장르의 영화를 추천해주는데 슬라이드 반응형으로 작업을 하기로했다.

모바일에서는 슬라이드가 2개, 태블릿은 3개, PC에서는 5개가 보여지도록 구현하기로.

불려오는 영화의 갯수가 다르기 때문에 스크립트에서 슬라이트 낱개의 너비와, 전체 슬라이드의 길이를 만들어줘야했다.

let screenWidth = window.innerWidth;
if (screenWidth < 768) {
  slides.style.width = 50 * slideCount + '%';
} else if (screenWidth < 1200) {
  slides.style.width = 33.333 * slideCount + '%';
} else {
  slides.style.width = 20 * slideCount + '%';
}

이렇게 구현해두면, 처음 로드를 받아왔을때 너비값에따라 각 슬라이드 너비가 잘 지정이되지만.

줄여가면서 확인하니 바로바로 적용이 안되서 window.onresize 를 이벤트를 넣어줬다.

사실 사용자가 브라우저 사이즈를 변경하며 이용을 하지는 않겠지만 시시때때로 구현되길 바라며

적용했는뎅 안되더라 ㅎㅎㅎㅎㅎㅎㅎㅎㅎㅎ........;;;;;;;;;

 window.onresize = function (event) {
    let screenWidth = window.innerWidth;
    if (screenWidth < 768) {
      slides.style.width = 50 * slideCount + '%';
    } else if (screenWidth < 1200) {
      slides.style.width = 33.333 * slideCount + '%';
    } else {
      slides.style.width = 20 * slideCount + '%';
    }
  };

그런데 이렇게 onresize를 적용하니 처음 로드시에 ㅋㅋㅋㅋ 적용이안됨.

resize가 발생해야만 이벤트가 실행되었당...ㅎㅎㅎ

 

분명 이 문제는 예전에도 겪은적이 있다 !!

그때의 나는... 어케 해결했지,,,?  기억을 못하면 블로그에 잘 기록해두기..........!!!!!!!!!!!!!!!!!!!!!!!!!

if (screenWidth < 768) {
    slides.style.width = 50 * slideCount + '%';
  } else if (screenWidth < 1200) {
    slides.style.width = 33.333 * slideCount + '%';
  } else {
    slides.style.width = 20 * slideCount + '%';
  }

  window.onresize = function (event) {
  	if(screenWidth < 768){
  	    slides.style.width = 50 * slideCount + '%';
      } else if (screenWidth < 1200) {
        slides.style.width = 33.333 * slideCount + '%';
      } else {
        slides.style.width = 20 * slideCount + '%';
      } 
  }

이렇게 코드를 중복으로 작성하니 해결은되었다..

하지만 최적의 방법은 아닌것같은 느낌적인 느낌이...?

 

---

SPA (Single-Page App) vs MPA(Multi-Page App)

MPA(Multi-Page Application) vs SPA(Single-Page Application) 개념

 

SPA는 

다른 페이지를 새로 불러 리로드되는게 아닌, JSON 파일을 받아와 필요부분만 새로 고쳐 넣는방법(새로고침 X)

서버한테 아무런 요청을 보내지 않음(인터넷이 끊기더라도 내용이 잘 보임)

반응도 빠르고 서버에 부담도 줄여줄 수 있음

컴포넌트별 개발이 용이(업무분담, 유지보수)

 

MPA는 

여러페이지를 불러와서 새로로드해서 보여주는 방식.

새로운 페이지를 불러올때 반짝거림이 있다.

 

CSR(client side landering) - 자바스크립트가 이미 활성화 되었기 때문에 바로 클라이언트와 상호작용이 가능

SSR(server side landering)- 파싱끝난후 바로 화면은 보이지만 js 실행 끝나야 클라이언트와 상호작용이 가능