깍돌이

안녕하세요 깍돌이입니다.

웹 자동화를 하기 위해서 사용되어지는 waitForNavigationAPI 랑 isIntersectingViewport API 에 대해서 간단 포스팅을 진행하려고 합니다.

상세 포스팅은 자동화 툴에서 따로 진행 하려고합니다. ( 공식 홈페이지 참조 및 관련 샘플 까지 ) 

이번 설명은 제목과 같이 Naver Cloud Platform 에 있는 웹을 샘플로 설명 드리겠습니다.

우선 간단하게 MPA와 SPA에 대해서 알고 가야 합니다.

아래 velog.io 에 있는 간단 설명 출처 입니다.

https://velog.io/@thms200/SPA-vs.-MPA

간단하게 핵심 요약 을 하자면 아래의 그림입니다.   ( 조금 수정해서 말씀드리고 싶지만 )

다른 부분은 제외하고 Page Reload 가 되는 시점을 봐야합니다.

SPA , MPA 설명함에 있어 많이 생략될수있는 점 양해 부탁드립니다.

MPA에서 보시면 유의미하게 봐야 할 부분이 렌더링 및 페인트 ( 화면 그리기 ) 는 브라우저에서 발생합니다.   하지만

MPA는 Element ( 브라우저의 syntax tree 중 HTML Element ) 를 미리 서버에서 만들어 놓은 후 클라이언트에게 던져주는 것익오 SPA의 경우 Element를 서버에서 그려주는것이 아닌 클라이언트(브라우저) 에서 JS를 실행하여 만들고 그다음에 브라우저가 렌더링을 하는 방식입니다. ( syntax tree에서 렌더링을 하는 부분은 매우 복잡하고 내용이 길어지기 때문에 생략 합니다. ) 

요약을 하자면 MPA는 밑그림을 백엔드에서 그려서 던져주고 SPA는 밑그림 부터 내가 그려야 합니다.    

(그렇기 떄문에 Performance 탭에서 확인시 JS의 사용시간이 SPA가 확연이 긴것이 확인됩니다. ) 

MPA = 다음카페

로드 후 기본적인 스크립팅 후 렌더 및 페인트가 이루어집니다.

SPA = React 공식 홈페이지 의 블로그 커뮤니티 탭 ( 홈은 Code 를 보여주는 부분이 좀더 무거움 )

두개의 차이를 느끼셨나요?

다음카페의 경우 Dotax라는 카페의 게시판이기 때문에 글에 대한 데이터 및 Pagination 등 꽤 복잡하게 이루어져있는 페이지에 비해 리액트 공식홈페이지의 블로그 커뮤니티 탭의 렌더링은 JS 의 위주로 준비 및 세팅이 되고있습니다. 

여기서 이제 유의 해야 할 점이 있습니다.

waitForNavigation API

우선 공식 puppeteer github에 있는 waitForNavigation 의 자료 설명입니다.  아래의 사용 예시까지 잘되어있습니다.

navigation 이 완료된 후  -> 이부분이 핵심인데요 navigation 이 완료되는 조건이 중요합니다.

해당 API 의 프로퍼티들을 보면 load, documentloaded ( dcl 이라고도합니다. )  이부분들이 의미하는 바는 브라우저의 Document ( 문서 ) 의 로드가 어디까지 되었느냐에 따라 체크를 할수있도록 되어있습니다. 

한창 JS , Browser , HTML , CSS등 초반에 공부하면 무조건 나오는 내용 중 하나인데요 좀더 깊어지면 

FP ( First Paint )
FCP ( First Contentful Paint ) 
DCL (DocumentContentLoad)
L (Load ) 
LCP (Largest Contentful Paint )
FMP ( First Meaningful Paint ) 

등 다 튀어나올수 있습니다 . 포스팅은 최대한 짧게 하려고 하니 내용은 생략하지만  핵심만 딱 설명이 쉽지 않네요 ㅎ;;

여튼! 위의 옵션을 보았을때 L, DCL , networkidle 0 같은걸로 보아 브라우저의 network 이벤트 타임  혹은 문서 로딩 을 기준으로 체크 하는 점을 볼수 있습니다.   

그럼 여기서 중요한 점이 뭐냐면  해당 옵션 및 이벤트 타임은 새롭게 그려질때 만 발생한다는 점입니다.

네이버 클라우드 플랫폼을 기준으로 하고 있으니 예시를 들어 드리자면

로그인창에서 -> 콘솔창으로 넘어갈때는 사용하여도 오류가 나지 않습니다. 콘솔창으로 넘어가기 때문 (새롭게 렌더링 )

하지만 서버를 생성 하는 부분

여기 페이지인 server/create 페이지부터는 서버 생성을 하기 위해 이미지를 선택하고 다음> 버튼을 눌러도 위에 navigation API 를 사용시 무조건 timeout이 발생합니다.     

이유를 다시 말씀드리면 위의 서버 페이지의 주소는 아래와 같습니다.

https://console.ncloud.com/vpc-compute/server/create

그리고 이미지를 선택하여 다음을 선택시 나오는 화면 및 링크는 아래와 같습니다.

링크 : https://console.ncloud.com/vpc-compute/server/create

화면 :

그렇습니다. 화면은 변경되었지만 ?  URL은 변경되지않았습니다.  리액트 홈페이지의 경우 React의 Router를 사용하여서 화면을 렌더링 해주기때문에  URL 이 변화가 생기면서 렌더링을 하고있지만 해당 홈페이지도 아마 확인시 새로운 networkidle을 받아 오지는 않을것으로 보입니다. ( 하지만 SSR을 적용하였다면 받아 올수 있습니다. ) 

그렇기 때문에 새로운 DCL 이나 L, FMP  ( 아주 대중적으로 jquery 쓰시는 분들은 jquery.ready 도 있습니다. ) 등이 새롭게 이벤트가 캐치 되지 않기 때문에 waitForNavigation 는 매우 높은 확률로 timeout이 나고 이부분을 모르는 puppeteer 사용자는 의문을 표하게 되며 무조건 timeout을 스택오버플로우에 검색하게 될수 있습니다.

그럼 UI 자동화 툴을 이용하여서 페이지를 넘기거나 다른 작업이 시작전 정상적으로 로드 됨을 체크하기위해서 해당 API 를 썻던 경우 위의 화면과 같은 CSR의 경우 어떻게 확인을 하는것이 좋을까 에 대한 값은 아래의 API 가 있습니다.

isIntersectingViewport API

공식 홈페이지부터 보고 가시겠습니다~!

returns : 요소가 뷰 포트에 표시되면 true를 반환합니다. 

여기서 뷰 포트는 현재 브라우저의 뷰 라고 할수 있습니다.

그럼 이걸로 페이지 가 정상 렌더 됐는지 어떻게 확인할까에 대해서 위의 서버 생성 페이지를 한번 보겠습니다.

상단 UL 부분

하단 페이지 렌더 부분

여기서 특이점을 찾으셨나요?

4개의 DIV가 있고 현재 보여주는 1개 제외하곤 display :none을 통해서 처리하고있습니다.

? 위에 5개가있던데 1개는 어디있을까 하고 확인해보니

마지막 생성시에 붙는점이 확인되었습니다. (의도는 잘 모르겠습니다.)

그럼 이제 이 페이지에서 내가 서버를 선택하고 -> 서버 생성 페이지로 정상적으로 들어왔는지를 체크해야합니다.

일단 2가지가 있는데 isIntersectingViewport 를 먼저 실행하진않습니다.  이유가 뭐냐면 저기 위에있는 html , div, ul 등을 HTML 태그라고 하면서 Element라고 표현하기도합니다. 그리고 이 요소들이 붙는 부분이 DOM 인데 이 Element들이 DOM 에 붙지 않았다면 당연히 브라우저는 렌더링을 해주지 않기 때문에 

우선적으로 DOM 에 Element가 붙었는지를 체크합니다. 체크를 하는 Element를 선택하는 기준은 모두가 다르지만 저는 다음에 액션을 진행할 Element를 기준으로 잡습니다.  DOM 체크는 간단합니다.

Puppeteer는 단일 요소는 $ 다중 요소는 $$ 로 찾게 되는데 해당으로 체크할시 null 이 아니라면 Element가 DOM 에 는 붙어있다는 의미가 됩니다. 

그리고 그다음 isIntersectingViewport 를 호출하면 현재 보여지는 화면에 제가 선택한 Element 가 보여지는지 안보여지는지 확인이 가능합니다.

모든 페이지가 MPA로 구성되어있다고 해도 현재 브라우저의 뷰 포트에서 노출이 되고있느냐 아니냐로도 체크 되기도 하기 때문에 해당 API 는 지금 보여지는가 에 대한 사용으로 가능할거 같습니다.

감사합니다.