[코드스테이츠 13기] 당근마켓 랜딩페이지 html/css/js 분석

 

1. 당근마켓 html - head

 

head에는 크게 link 연동, meta tag, script 연동이 있다.

 

(1) link 연동

- rel="alternate", hreflang="언어코드": 당근마켓은 한국, 영국, 미국, 캐나다, 일본 사이트를 제공하고 있다. 이에 맞춰 각 국가별 대체 페이지로 이동할 수 있도록 한다.

- 스타일시트(css), 아이콘 이미지 연동

- author: "당근마켓" (그런데 "당근마켓"이 href로 되어있지만 막상 클릭하면 아무 페이지가 뜨지는 않는다)

 

(2) meta tag

- SEO를 위한 메타태그: 홈페이지 기본 정보, 페이스북, 트위터용 태그

- charset="utf-8": html파일을 웹브라우저에서 표시할 수 있도록 변환 처리

- viewport: 반응형 웹디자인을 설정하기 위해 viewport를 설정

- 렌더링 엔진 설정: 당근마켓은 IE8이상 버전에서 항상 최신 표준 모드로 렌더링 하도록 설정한다. (IE=edge)

- CSRF공격에 대비한 태그

- 도메인 소유권 인증: 네이버 서치어드바이저

 

(3) script

- SEO 분석도구: 구글 태그매니저/애널리틱스, 페이스북 픽셀, 앱스플라이어

 

 

2. 당근마켓 html - body

 

(아래 슬라이드를 참고해주세요. 클릭하시면 크게 보실 수 있습니다.)

 

012345678

 

 

3. 당근마켓에 적용된 js

 

 

 

총 세 군데에서 확인해볼 수 있었다. 

  (1) html tag

  (2) div#gnb-root

  (3) div#footer-root

 

다만 위 스크린숏처럼 event로 여러 개가 삽입되어있어서 모든 것을 분석하기는 어렵고, 간략히 분류하면 다음과 같다.

 

요소명	의미
click, mousedown, toggle 등	유저 인터렉션 요소
submit	페이지 이동과 관련된 요소로, "검색하기" 영역과 관련된 것으로 추측
ajax:complete, ajax:send	비동기통신관련 요소. "채팅하기" 버튼과 관련이 있을것으로 추측

(ajax: AJAX란 비동기 자바스크립트와 XML(Asynchronous JavaScript And XML)를 뜻함)