자바스크립트로 할 수 있는건 너무 한정적이다. 하지만 웹 APIs 를 이용하여 다양한 것들을 할 수 있다 ! 웹 APIs 는 브라우저에서 제공하는 API이기 때문에 브라우저의 멀티쓰레딩을 이용해서 다양한 일들을 동시에 실행할...
Continue reading...IT
[Web] Web Server와 WAS의 차이 & 웹 서비스 구조
Static Pages 와 Dynamic Pages Static Pages– Web Server는 파일 경로 이름을 받아 경로와 일치하는 file contents를 반환한다.– 항상 동일한 페이지를 반환한다.Ex) image, html, css, javascript 파일과 같이 컴퓨터에 저장되어 있는...
Continue reading...성능 보장 렌더링 순서
클라이언트가 서버로부터 웹페이지를 받아와서, 브라우저에 표기되기 까지 어떤 렌더링 순서를 가지는지 알아본다. 이는 성능을 보장을 위해 필수적이다. Rendering path 우선 클라이언트가 서버로부터 데이터를 받아와서 브라우저에 표기하는 전체적인 순서는 다음과 같다. request...
Continue reading...DOM Tree(Document Object Model)
DOM (Document Object Model) 간단한 웹페이지를 만들면, 브라우저에서는 body태그, section 태그 등 각각의 태그들을 분석해서 이것을 노드로 변환한다.즉, 브라우저가 가지고 있는 브라우저가 이해할 수 있는 자신들만의 오브젝트로 변환 시킨다. 당연히 오브젝트...
Continue reading...Window load 분석
브라우저는 웹페이지를 읽어올때 html파일을 먼저 읽은 다음에, 그에 관련된 이미지나 폰트, 필요한 리소스를 함께 다운로드 한다. 그리고 자바스크립트 파일이 있다면 그 자바스크립트 파일도 다운로드 받는데, 이 부분은 블로그 자바스크립트 defer async...
Continue reading...Browser 구조 분석 (Window Global Object)
브라우저에서 웹 페이지를 열게 되면, ‘Window’라는 전체적인 오브젝트가 존재하고, Window는 페이지 뿐만 아니라 브라우저에서 현재 열려있는 전체적인 창을 의미한다. Window 안에 페이지가 표기되는 부분이 바로 Document 오브젝트이다. 즉, Document는 HTML에 작성한...
Continue reading...JSON (JavaScript Object Notation)
HTTP 통신 (client – server) AJAX(Asynchronous JavaScript And XML)는 웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술.대표적인 예로, XHR(XMLHttpRequest 오브젝트는 브라우저 API에서 제공하는 오브젝트중 하나로, 이 오브젝트를 이용하면 간단하게 서버에게...
Continue reading...Array – (2) APIs
알아두면 유용할만한 Array API들에 대해 정리해본다. 참고로 vscode 상에서 command + click으로 함수의 정의 및 사용방법을 자세히 알 수 있으니 참고하면 좋을 듯 하다. 또, api를 가져다 쓸때 항상 command +...
Continue reading...Array – (1) grammar
JavaScript는 dynamically typed language Array에 다양한 종류의 데이터를 담을 수가 있다.(좋지 않음)
Continue reading...Javascript Object
기본적으로 primitive 타입은 변수 하나당 값을 하나만 담을 수 있다. 이 경우에 만약 이름과 나이를 출력하고 싶은 함수를 만든다면, 이름과 나이를 파라미터로 전달해주어야 한다. 그리고 함수를 정의할때도 두 가지의 파라미터를 받아서...
Continue reading...