삼성브라우저 페이지 리다이렉팅 렌더링 이슈

업무 중에 해결하기 위해 골머리를 앓았던 일을 회고하고자 합니다.

 

먼저 어떤 이슈였냐면 모바일기기에서 PC URL 접속 시 모바일 URL로 보내주고 있는데,
삼성 브라우저에서 모바일 URL로 리다이렉팅 되었을 때 뷰포트가 깨지는 현상이 있었습니다. 

문제 해결과정 

1. 삼성 브라우저 조사 
삼성 브라우저에서만 발생했기 때문에 별도의 설정이 필요한지 찾아보았습니다.
이 과정에서 찾은 결과는 삼성 브라우저와 크롬 브라우저는 개발자가 설정한 확대 방지 옵션을 무시할 수 있는 기능이 있는데 삼성에서는 기본값으로 설정되어있고 크롬에서는 선택 값으로 설정이 되어 있었습니다.

삼성 브라우저에서도 해당 옵션을 끄면 이슈가 재현되지 않았지만 코드로 브라우저의 해당 기능을 끄거나 할 수 있는 방법을 찾지 못했고 작성 된 코드 쪽으로 눈길을 돌렸습니다.

2. Location replace ,href
기존에 작성된 코드는 App.tsx에서 useEffect를 통해 모바일인지 판별하여 모바일 일 경우 replace 메서드를 통해
모바일 페이지로 변경하게 되어 있습니다.

 

이 과정에서 기존에 사용한 replace 메소드는 기존 페이지에서 변경을 하는 것이었고, href 메서드는 해당 페이지로 이동을 시키는 것임을 알게 되어 href 메서드로 수정했습니다.

href 프로퍼티를 이용해 새로운 페이지로 이동을 시켜 뷰포트가 깨지지 않는지 확인을 해본 결과 간헐적으로 해당 현상이 반복되었습니다.

간헐적인 문제는 실행 순서에 있는것으로 추측하였고 페이지 이동 코드를 App.tsx가 아닌 index.html 헤드 태그로 위치를 변경했습니다.

코드 위치 이동 후에는 해당 이슈가 재현되지 않았습니다.

결과적으로는 브라우저 렌더링 과정에 문제가 있었던것인데,

기존 코드에서는 레이아웃이 모두 그려진 뒤에 페이지 이동이 이루어져 뷰포트가 깨지는 현상이 일어났었고
HTML 파서는 스크립트 태그를 만나면  DOM 생성을 중지하고 자바스크립트 엔진이 제어권한을 가지게 되는데
이때 url변경 코드가 먼저 실행되어 레이아웃이 그려지기 전에 페이지가 이동되어 해당 현상을 수정할 수 있었습니다.

 

리액트에서 이 방법이 최선인지는 모르겠지만.. 해결되었습니다.