2022. 8. 8. 14:33ㆍEvery moment/Daily
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
(아래 슬라이드를 참고해주세요. 클릭하시면 크게 보실 수 있습니다.)
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)를 뜻함)
'Every moment > Daily' 카테고리의 다른 글
[코드스테이츠 13기] 다음 우편번호 서비스 API 살펴보기 (0) | 2022.08.10 |
---|---|
[코드스테이츠 13기] 네이티브 앱, 모바일 웹, 웹 앱, 하이브리드 앱의 특징과 장단점 (0) | 2022.08.09 |
[코드스테이츠 13기] 인스타그램 인플루언서를 태블로로 분석해보기 (0) | 2022.08.07 |
[코드스테이츠 13기] 알툴즈의 현재 사업단계는? (0) | 2022.08.03 |
[코드스테이츠 13기] GA로 내 블로그 지표 확인하기 (0) | 2022.08.02 |