--- title: '새로 바뀐 네이버 메인 훔쳐보기' tags: - frontend - react - web-performance published: true date: 2023-05-30 14:51:26 description: '사실 나도 잘 몰라요' --- ## Table Of Contents ## 들어가며 [이번에 새롭게 네이버 PC 메인이 바뀌면서](https://campaign.naver.com/naverdetails/newpc/?pcode=naver_pcanniversary) 많은 것이 바뀌었다고 한다. 내부에서 무슨 일이 일어나는지는 잘 모르지만🤔이번에 리액트 17로 새롭게 개편하면서 내부적으로도 변경된 것이 많을 것 같은데, 새롭게 개편된 네이버는 어떤 스펙으로 어떻게 만들어졌는지 직접 크롬 소스보기로 까보면서 알아보고자 한다. > 네이버 메인 개발자가 아니기 때문에 진짜 그냥 웹사이트만 보고 배운 것들만 적어둔다. 실제 개발 내용과는 다를 수 있다는 점을 미리 경고한다. ## 기술 스택 ### react@17.0.2 ![naver-01](./images/naver-01.png) 가장 먼저 눈에 띄는 점은 react@17.0.2 를 사용하고 있다는 것이다. 최신 버전인 react@18을 사용하지 못하는 이유는 아마도 추측 컨데 [18버전에서 internet explorer 11 지원을 중단](https://github.com/facebook/react/blob/main/CHANGELOG.md#react-1) 했기 때문으로 보인다. `Promise` `Symbol` `Object.assgin` 폴리필을 넣어주면 될 것 같은 뉘앙스로 쓰여있긴 하지만, 아무래도 리스크가 있을 것으로 판단하여 17 만 사용하는 것으로 보인다. 대한민국에서 internet explorer 11 이 관짝으로 가지 않는 이상, 이 버전이 올라갈일은 없어보인다. ### nextjs? 한 가지 흥미로운 사실은 크롬 성능 도구로 분석한 결과, `nextjs`의 hydration 과정을 확인할 수 있다는 것이다. ![naver-02](./images/naver-02.png) 오우 매우 신기하다라고 생각하던 차에, 조금 더 알아보니, naver.com이 nextjs로 만들어진 건 아니었다. (그럼 그렇지) ![naver-03](./images/naver-03.png) nextjs로 만들어진 것으로 추정되는 영역은 쇼핑블록 https://shopsquare.naver.com/ 으로, `iframe` 형태로 이 쇼핑 블록을 naver.com 페이지에 삽입하는 것으로 확인되었다. 이 페이지를 몇번 사용해보니, 내가 어떤 페이지에 방문했건간에 새로고침하면 무조건 1페이지로 돌아가는 것을 확인할 수 있었는데, 그에 반해 nextjs의 `pageProps`는 18페이지의 모든 정보를 다 들고 있는 것으로 확인되었다. 사용자의 방문이 예상되는 1, 2 그리고 마지막 페이지 (18)의 정보만 `getServerSideProps`로 들고 왔으면 조금 더 다운로드 해야 하는 페이지의 크기를 줄일 수 있을 것으로 보인다. ### jquery 네이버 어딘가에는 아직 jquery를 사용하는 코드가 존재하는 것으로 보인다. ![naver-04](./images/naver-04.png) ### corejs corejs 사용도 확인할 수 있었다. ![naver-05](./images/naver-05.png) ### 스타일 소스보기로 naver.com 을 살펴보면, 단 두개의 css 파일만 존재하는 것을 볼 수 있다. - https://ssl.pstatic.net/sstatic/search/pc/css/sp_autocomplete_220526.css - https://pm.pstatic.net/resources/css/main.f6c8441d.css 이 두 파일의 존재로 추정해 본 게 하나 있는데, 홈페이지가 최 상단의 네이버 검색바 부터 렌더링 되지 않을 까 하는 것이다. 이 를 크롬 개발자 도구로 확인해보자. ![naver-06](./images/naver-06.png) First Contentful Painting 시점을 확인해 본 결과, 네이버 검색바 부터 스타일이 입혀진 채로 렌더링 된 이후에 이후에 모든 내용이 그려지는 것을 볼 수 있었다. `sp_autocomplete`는 내용이나 파일명 등으로 미루어 보아 소스 코드 내부가 아닌, 외부에서 정적으로 관리되는 파일로 보인다. 그렇게 추정하는 이유는 - 파일명에 날짜로 추정되는 버전이 존재하고 - 내부 클래스명이 module.scss 등을 사용했을 때와 다르게 난독화되어 있지 않고 정제되어 있기 때문이다. 그리고 이 두 리소스는 네트워크 차단 요청으로 선언되어 있기 때문에 최대한 다이어트를 하는 것이 좋아 보인다. `main.css`의 경우 특히 그 크기가 큰데 비해 above the fold 영역에서 사용하지 않는 스타일도 함께 존재하는 것으로 보인다. ![naver-07-1](./images/naver-07-1.png) ![naver-07-2](./images/naver-07-2.png) `main.css`에 존재하는 스타일 중 하나는, 최근 검색어가 존재하며 사용자가 클릭을 했을 때만 필요한 스타일인 것으로 확인된다. 이런 스타일은 별도 스타일 파일로 분리한다음 `aysnc`나 `defer`를 사용하여 lazy 하게 불러오는 것이 좋다. 이러한 미사용 자바스크립트나 css 를 확인할 수 있는 좋은 방법 중 하나는 크롬 개발자 도구의 범위 (coverage)를 사용하는 것이다. ![naver-08](./images/naver-08.png) 이렇게 빨간색으로 표신된 부분이 로딩은 되었으나 실제로 사용되지 않은 영역이다. 물론 크롬 시크릿 탭으로 들어간 경우에만 해당되므로, 로그인된 사용자 등 다양한 시나리오에 따라서 미사용 스타일과 자바스크립트의 크기는 달라질 수 있으므로 이는 어디까지나 참고용으로만 사용하는 것이 좋다. ## 줄 단위로 살펴보기 트위터인가 어디선가 면접 문제로 트위터의 html을 보고 한 줄 씩 해석하라고 하는 낸다고 들었다.🤔 ~~네이버에 합격하기 위해 그런 것은 아니다.~~ > 정말로 그냥 소스보기에서 라인바인 라인으로 복사해왔기 때문에, close tag 등이 안맞을 수 있다. ### 1. `` ```html NAVER ``` 이는 아마도 nextjs의 pageProps 처럼 서버사이드에서 가져온 데이터를 html에 바로 삽입하여 즉시 자바스크립트 단에서 사용하기 위한 목적으로 추정된다. 이렇게 페이지 내부에 `window['EAGER-DATA']`로 삽입 해두면, 자바스크립트에서는 `window['EAGER-DATA']`를 사용해 손쉽게 데이터를 가져올 수 있다. 실제로 소스코드에서도 이렇게 접근해서 가져오는 것을 확인할 수 있었다. ![naver-09](./images/naver-09.png) 정확한 분석은 아니지만, 아마도 사용자에게 정적 페이지를 제공하기 위해 다음과 같은 과정을 거칠 것으로 예상해볼 수 있다. 1. 미리 빌드해둔 head 영역 html을 가져온다. 2. 1번의 파일엔 ` ... `로 닫는다. 6. 광고나 지표 수집같이 우선순위가 떨어지는 내용을 마지막 스크립트로 붙인다. ```html ``` 이렇게 추측한 이유는 첫번째 줄에서 ` ``` 이렇게 처리한 이유는 아마도 내부에서 스크립트로 인한 fetch 요청을 최소화 하기 위함일 것이다. 서버에서 클라이언트 렌더링에 필요한 모든 데이터를 다 fetch 해온 다음에, 이를 클라이언트에 제공하여 마치 서버사이드 렌더링을 하는 것과 같은 효과를 누릴 수 있게 된다. 이러한 노력 덕분에 네이버 메인의 네트워크 요청을 보면 xhr 요청이 없는 것을 확인할 수 있다. 그러나 서버사이드 렌더링과는 다른 점은, 미리 만들어진 html을 내려주는 방식이 아니라는 것이다. 이는 소스보기로 부터 만들어진 html을 보면 알 수 있다. ```html
``` html은 검색영역, 그리고 리액트의 루트 영역으로 추정되는 `div#container` 를 확인할 수 있었다. 요약하자면 서버의 데이터를 hydration 해서 내려주는 것은 nextjs와 비슷하지만, 이를 클라이언트에서만 가지고 렌더링 한다는 점은 서버사이드 렌더링 애플리케이션과 SPA 어딘가쯤에 있는 것 같은 느낌을 준다. > 정확히는 네이버의 스크립트로 인한 xhr 요청이 없다는 뜻이다. 제3자 스크립트로 인한 요청은 확인할 수 있었다. ### 3. 각종 스크립트 이제 부터 본격적으로 스크립트 영역이다. 주요한 내용만 몇가지 살펴본다. - `