[HTML] 시맨틱 웹
위키백과 : ‘의미론적인 웹’이란 뜻으로 인터넷에서 정보를 컴퓨터가 처리하도록 하는 기술
이 "검색엔진" 은 현 시대의 가장 강력한 권력 중 하나라고 말할 수 있다.
SEO(검색엔진 최적화, Search Engine Optimization)같은 마케팅 도구를 이용, 검색엔진이 검색하기 쉬운 구조로 사이트를 조정하는 것을 말한다.
검색엔진은 로봇이라는 프로그램을 사용하여 웹사이트의 정보를 수집(크롤링)하고 이용자가 검색할 만한 키워드를 예상하여 검색 키워드에 대응하는 인덱스를 만들어(인덱싱) 둔다.
이때 인덱스를 생성할때 사용되는 정보는 이 “검색 로봇이” 수집한 정보이고 이 정보가 웹사이트의 HTML코드이다.
이 HTML코드만으로 의미를 인지해야 하기에 이때 “시맨틱 요소”를 해석하게 된다.
<font size="6"><b>Hello</b></font>
<h1>Hello</h1>위 코드를 참고한다면 1행의 코드는 의미를 가지고 있지 않는 코드이고 폰트 크기와 블드체를 지정하는 “메타데이터”만을 브라우저에게 알리고있다.
2행의 코드는 header라는 뜻을 가지고 있기에 개발자가 의도한 의미를 명확히 드러내고 있다. 이러한 코드는 가독성을 높여주고 향후 유지보수를 쉽게 만든다.
이런 h1요소는 검색엔진이 중요한 제목이라고 인식하고 인덱스에 포함시킬 가능성이 높고, 코드를 읽는 사람에게도 제목이라는 인식을 심어줄 수 있다.
“시맨틱 태그”란 이런 요소처럼 브라우저, 검색엔진, 개발자, 등 모두에게 컨텐츠의 의미를 명확히설명 하는 역할이다.
한마디로 정리한다면,
시맥틱 웹이란 수많은 웹페이지들에 메타데이터를 부여하여, 잡다한 데이터 집합이였던 웹페이지를 “의미”와 “관련성”을 가진 데이터베이스로 구축하고자 하는 발상이다.
[JS] javascript의 동작원리
chrome V8 엔진으로 빌드된 JavaScript 런타임 환경인 Node.js의 등장으로 웹 브라우저를 벗어나 서버 사이드 앱개발에서도 사용되는 범용 개발언어가 된 javascript이지만 현재 가장 많이 사용되는 분야는 웹 브라우저에서 동작하는 웹 페이지 / 애플리케이션 이다.
이 브라우저에서의 핵심 기능은 사용자가 참조하고자 하는 웹페이지를 **서버에 “요청” 하고 “응답” 받아 브라우저에 표시하는 것이다.
이때 브라우저로 부터 “응답”받는 것은 HTML, CSS, JavaScript, 이미지 등을 받고
HTML, CSS 파일은 HTML, CSS파서에 의해서 파싱되어 DOM, CSSOM트리로 변환되어 렌더 트리로 결합된다.
이렇게 생성된 렌더 트리를 기반으로 브라우저는 웹페이지를 표시한다.
브라우저가 서버에 파일을 요청 → 서버가 응답 → 응답된 내용 (HTML, CSS, javascript, 이미지파일 등)을 브라우저에게 넘겨줌 → 받은 파일을 HTML, CSS파일은 각각 파서에 의해서 파싱됨 → DOM, CSSOM트리로 변환됨 → 렌더 트리로 결함됨 → 이 렌더 트리를 기반으로 브라우저는 웹페이지를 표시함
이때 받은 JavaScript파일은 렌더링 엔진이 아닌 자바스크립트 엔진이 처리.
HTML파서가 html파일을 파싱중 script태그를 만나면 javascript코드를 실행하기 위해 DOM프로세스를 중지, 자바스크립트 엔진으로 제어 권한을 넘긴다.
권한을 위임받은 자바스크립트 엔진은 script태그 안의 javascript코드나 파일을 로드하고 파싱하여 실행시킨다.
실행이 완료되면 자바스크립트엔진은 HTML파서에게 제어권한을 넘겨 DOM프로세스를 중지시킨 시점부터 DOM생성을 시작한다.
이처럼 브라우저는 동기적으로 HTML, CSS, JavaScript를 처리한다.
실행 권한 넘어가는 순서
HTML파서가 파싱 -> script를 만나고 DOM생성 중지, 자바스크립트 엔진으로 권한넘김 -> 자바스크립트엔진은 파일을 로드, 파싱 -> 스크립트를 파싱, 실행 후 HTML 파서로 권한 넘김 -> DOM생성 재개
참고사이트
