Facts
DOM 을 깨우치다 - 비동기적 스크립트 다운로드 및 실행
일반적으로 HTML 태그는 동기적으로 해석된다. 즉, HTML 태그를 읽다가 중간에 script 태그를 만나면, HTML 해석을 멈추고, 스크립트 해석을 시작하게 된다. 이 때문에, 만약 head 부분에 body 의 DOM element 를 조작하는 스크립트를 포함시켜 놓았다면 오류가 발생할 수 있다. HTML 이 아직 해석되지 않아서, DOM 이 구성되지 않았는데, DOM 의 조작을 수행했기 때문이다.
그래서 보통 DOM 구성이 끝나고 해석을 해주기 위해서 body 본문 끝부분에 script 를 배치한다. 스크립트의 해석 및 실행 시기를 변경하는 다른 방법도 있다.
script 태그에 defer 와 async 옵션을 주어서 script 의 해석 및 실행 시기를 변경하는 방법도 있다. 브라우저는 일단, 문서내의 스크립트를 전부 조사해서 병렬로 다운로드를 시작한다. 그 이후에, 만약 특정 스크립트에 defer 옵션이 붙어있다면, 스크립트의 실행을 HTML 본문의 해석 이후로 미룬다. 만약 async 옵션이 붙어있다면, 실행시기를 다운로드가 끝난 이후로 미룬다.
그림으로 배우는 HTTP - SPDY, WebSocket 의 등장 이유
HTTP 1.1 의 단점.
- 커넥션 당 요청을 한번밖에 수행하지 않는다.
- 한쪽에서 요청하면 다른 한 쪽에서 응답하는 방식이다.
- 헤더가 장황하다.
- 헤더의 압축이 기본적으로 이루어지지 않는다.
HTTP 1.1 문제점의 해결
- ajax, comet
ajax 는 리소스의 일부만을 요청하기 위해 고안되었다. 특정 부분에 대한 갱신이 필요한 경우에도, 리소스의 다른 부분까지 모두 요청하여 데이터가 커지는 것을 피하기 위함이었다. 클라이언트는 ajax 를 통해서 꼭 요청이 필요한 부분만을 따로 잘라서 일부분 요청이 가능하게 된다. 단, 서버 푸시가 되는건 아니라서, 갱신이 되지않은 상태에서 요청이 된다는 단점은 그대로다.
comet 은 갱신이 되는 경우에만 응답을 보내자는 아이디어를 활용했다. comet 에서 서버는 클라이언트에서 요청이 들어오면 해당 자료의 갱신여부를 먼저 검토한다. 갱신이 된 경우에는 바로 응답한다. 만약 갱신이 되지 않았다면, 응답을 보류하고 갱신이 되었을때, 응답한다. 서버 푸시를 구현하려 했지만, 이렇게 하기 위해서는 커넥션을 오래 유지시켜야 한다는 단점이 있다.
HTTP 1.1 문제점의 근본적 해결
- 단방향 -> 양방향, 서버 푸시 -> 멀티플렉스
- 헤더압축
- 커넥션 당 여러개 -> 스트림
WebRTC, WebSocket 의 차이는? p to p, 서버와 클라이언트의 구분이 나눠지지 않음.
기존에 HTTP 1.0, 1.1 상에서도 keep-alive 와 pipe line 옵션이 사용되는데 그것을 사용하지 않는 이유도 알아보아야 한다.
- 의문점 - 서버 힌트란 어떤 기술인가?
웹 콘텐츠에 사용되는 기술
- HTML
- XML
- RSS / ATOM
- JSON
HTML - 문자를 수식하는 태그를 이용는 언어, 태그를 이용해서 문자의 의미나 스타일을 수식한다. 이를 해석하고 그리는 과정을 렌더링이라고 한다.
XML - 태그등을 활용하여, 구조화된 데이터를 해석하기 쉽게 만든다.
JSON - 자바스크립트를 활용하여 가공하기 쉬운 데이터 구조.
RSS - XML 을 기반으로 하지만, 세부 태그 등의 내용에서 매우 읽기 쉽게 처리한 것(Really Simple)
DOM - HTML 을 해석하여 요소단위로 바꾸어주어서, 각 요소마다 스타일을 변화시키는 처리등을 쉽게 해준다.
실용주의 프로그래머
- 분할 정복 알고리즘이 일반적으로 n logn 의 값을 가지는 이유.
- 매일 조금씩 가꾸기 -> 통제 가능한 작은 부분을 쌓아 올리는 방법.
코딩인터뷰 완전 분석 스터디
프로그래머스의 보석 쇼핑 문제를 풀었다. 투 포인터로 풀려나 했었는데, 다른 풀이를 가져오셔서, Map 자료구조를 활용했다. 자바스크립트의 Map 이 Python 의 OrderedDict 와 같은 성질을 갖는 다는 것을 알았다. 즉, 하나의 엔트리를 지워주고 같은 키의 엔트리를 삽입하면, 맨 끝으로 삽입된다.
탐색방법을 어떤 자료구조로 대응 시킬수 있지 않을까? 이진 탐색은 이진 탐색 트리를 구축해서 찾는 것과 대응된다. 투포인터라고 하는 것은 사실 입력과 출력이 있는 자료구조를 뜻하는데, 이것은 큐 를 사용하면 되지 않을까? 한번 해보자.
Feelings
공부에 리듬을 주려고 노력하고 있다. 일단은 다음 두가지를 철저하게 지키려 한다.
- 가급적 뽀모도로 사이클을 유지한다.
- 배운것은 바로 정리한다. 시간을 두고 다듬는다.
Findings
Affirmation
- 나는 철저하게 연습하는 사람이다.
