JUST WRITE

DOM Document Object Model HTML 문서에 접근하기 위한 Interface입니다. Browser마다 요청받은 내용을 화면을 보여주는 Rendering Engine이 존재한다. Browser Rendering Engine IE Trident Edge EdgeHTML, Blink Chrome Webkit, Blink(Version 28 later) Safari Webkit FireFox Gecko Rendering Engine 요청받은 HTML 문서를 한줄 한 줄 해석한다. 해석이 끝나면 문서를 객체화하며, 이 객체를 DOM(Document Object Model)이라고 한다. Script 언어로 HTML 요소를 제어하기 위해 DOM을 이용한다. Tree 구조 제목 안녕하세요 a b c ..

이 글은 Youtube 드림코딩 by 엘리의 '자바스크립트3. 데이터 타입'편을 정리하여 작성한 글입니다. 변수 선언에 사용되는 let과 const는 ES6에 추가되었다. ES6 이전에는 var 키워드를 사용하였다. 이 글에서 var부터 let과 const까지 살펴보려 한다. var var는 Global Scope와 Function/locally Scope를 가진다. Function 밖에서 선언하면 Global Scope를 가진다. Function 안에서 선언하면 Function/locally Scope를 가진다. var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello ..

이 글은 YouTube 드림코딩 by 엘리의 '서버사이드렌더링'편을 정리하여 작성한 글입니다. CSR Client Side Rendering Client에서 HTML 렌더링을 진행한다. 아래 처럼 기본적인 HTML을 가져온 다음, JavaScript를 파일을 Server에서 받아 동적으로 HTML 렌더링을 한다. JavaScript에는 Application 로직과 Application에 필요한 Framework, Library의 소스코드가 포함되어 있다. 그리고 Application 로직을 수행하면서 필요한 데이터를 가져온다. 해당 데이터와 JavaScirpt 로직을 실행한 것을 바탕으로 사용자에게 보여지는 최종적인 HTML 렌더링을 마친다. 장점 첫 Loading 이후에는 좋은 UX(User Exper..

이 글은 YouTube 드림코딩 by 엘리의 서버사이드렌더링편을 정리하여 작성한 글입니다. Static Sites 대부분 Web Site가 Static Sites로 구성되었다. Server에 배포된 HTML을 그대로 Web Browser에서 전달하는 방식이었다. Page내에서 Link를 클릭하면 Server에서 해당 HTML를 받아와서 Page 전체가 업데이트 되었다. iframe inline frame의 약자로 Page안에 다른 Page를 넣을 수 있게 해주는 태그이다. iframe 태그를 통해 부분적으로 업데이트가 가능하게 되었다. The iframe element : 인라인 프레임 요소 | MDN 요소는 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다. de..

Web Browser는 HTML를 Rendering할때, CSS, JavaScript를 만날 시 동기적으로 처리한다. 이 부분은 Rendering 속도에 영향을 주게 된다.(사용자 경험 측면, SEO에 영향) HTML Parsing을 멈추고 Script를 가져오고 실행까지 한다. 그 다음 남은 HTML Parsing을 진행한다. async async 속성을 true로 설정하면 CSS, JavaScript 비동기적으로 처리한다. HTML Parsing을 멈추지 않고 Script를 가져오고 실행까지 한다. // async default : true Warning!! async 속성을 설정하고 Script가 DOM에 접근해야될 경우에는 주의! 아직 HTML Parsing이 되지 않은 DOM에 접근하려고 할 수..