윤태영블로그

"Web Browser"는 HTML 문서를 해석하고, 화면을 통해 해석된 결과를 보여주게 된다. 이걸 가능하게 하는 건 "Rendering"이라는 것이다.

브라우저를 통해 HTML 코드가 해석되고 어떤 식으로 화면을 보여줘야겠다 판단이 끝나면 나타나게 되는 것 => 렌더링

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(데이터)를 생성한다. 이를 DOM이라

하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링 한다.

이해가 안 간다고..? 그럼 일상생활로 예를 들어서 이해를 시켜보겠다.. 저만 믿고 따라오시오!!

자... 예를 들어보자.. 음식을 만들어주는 회사가 있다고 머릿속에 그림을 한번 그려 보시겠는가..?

 "Web Browser"라는 음식을 만들어주고 제공하는 회사가 있다.(IT 회사 같지만 암튼 음식 회사임)

거기에는 Rendering이라는 엄청난 초 고급 기계가 있다.  그 기계는 도착한 음식 재료(코드 조각)들을 분석해서  HTML, CSS, Javascript 등으로 분류해서, 이건 저기 보내야겠군 이건 저기로 보내야겠군! 판단을 엄청 빨리 한 다음에.. HTML코드들은  DOM(Document object Model) 트리, CSS코드들은 CSSOM(CSS Object Model) 트리로!!  ,,.  하나의 (생산레일=트리) 같은 곳에 보내지게 된다.(생산직에서 알바 해보 신분이라면 더욱 쉽게 이해가 가실 듯하다.)
그렇게 두 개의 레일이 갈라지면서, 이제 하나의 레일로 합쳐지는 구간이 발생한다.   DOM 트리와 CSSOM트리의 두 개였던  레일이 하나의 레일로  합쳐지면서 결합이 된다! 그 구간을  "렌더 트리"라고 하겠다. 하나로 합쳐지면서 화면에 표시될 노드들과 스타일 정보들이 생겨났다. 즉 어엿한 음식이 되어버렸다.

이제 렌더트리를 통해 어엿한 음식이 만들어졌으니, 고객에게 음식을 제공.. 하기 전에!  각 음식들의 크기, 위치, 레이어 순서(layer order ex) 'z-index))등을 결정해서 음식을 제공할 위치를 결정하게 된다. 이걸 Layout이라고 하자!

이제 드디어 서빙을 통해 고객에게 음식이 제공된다. (Serving = 그리기(Painting)) 실제로 픽셀로 화면에 그린다. 이 과정에서 텍스트, 이미지, 배경색 등 시각적 요소가 화면에 표시된다.) 

이제 고객은 맛있게 볼 수 있게 된다..!!

밑의 사진은 레일에서 작업하는 것을 세부적으로 확인할 수 있다.

html이 body의 부모이고 body는 또 div의 부모이다.

 사진 출처 : 유노코딩

일상에서 글을 쓸 때는 .을 찍음으로써 그 문장이 끝났다는 걸 표현한다. (또 . 썼음 ..? < 또?  이렇게 자주 쓰인다..╰(*°▽°*)╯)

Javascript에서는  우리 언어의 "." 을 ";" 으로 대체한다고 생각하면 된다. (Javascript도, 표현 방법이 다를 뿐 하나의 언어라고 생각 해보자!)

console.log (10 + 3)
console.log (1 + 3)

이렇게 입력할 시, Javascript에서는 굳이 세미콜론(;)을 붙이지 않아도, 

값이 제대로 출력되지만

console.log (10 + 3) console.log (15 + 3)

위에 처럼, 입력 시  "Error"가 발생 한다. 

즉, 상황에 따라 자바스크립트가 알아서 세미콜론(;)을 추가해주지만,

문장 끝에  반드시 세미콜론(;)을 사용하는 습관을 가져 Error를 줄이는 것이 좋다.

내가 태어나기도 전의 웹사이트...👍 지금 봐도 깔끔하고 잘 만들어 졌다.

1991년 8월 6일 세계 최초의 웹사이트가 만들어지면서,

그 이후 초창기에 글 밖에 없었던 웹사이트들이 수많은 발전을 거듭하면서 웹사이트를 통해 이미지, 영상, 채팅 등 다양한 것들을 할 수 있게 된다.

여기서 가장 큰 기여를 한 것이 바로 'Javascript' 이다! (정말 Javacscript는 대단하지 않은가? 아직도 웹 개발자들에게는 필수적으로 쓰이고 있으면서, 역사의 전통까지 가지고 있다. 나 역시 Javascript를 너무 사랑한다.😍)

Javascript는 웹브라우저가 가진 기능을 실행시키거나 HTML/CSS를 통해 렌더링 된 화면을 조작할 수 있는 힘이 있는

웹사이트를 조작 할 수 있으면서도 기초적인 "나무의 뿌리"가 되는 강력한 언어이다.

즉, 웹사이트를 만들고 싶다면 반드시 배워야 하는'기초 언어'인 것이다...!!!!

기초 언어를 배울 때, 많이 하는 실수가 있는데 단순히 그 언어에 초점을 두고 문법만 학습한다는 것이다...

그렇게 되면 따라 하기 식이나 외우기 식 코딩이 되는 것이다.. 배운 걸 활용할 수 있는 상황이 올 때 멍하니 모니터만 쳐다보는 경우가 생기거나 , 많이 헤매거나 원리를 이해하지 못해 포기하게 될 수도 있다.

프로그래밍의 기본 개념을 이해하고 언어의 문법들을 활용하는 학습을 해야 다른 프로그래밍 언어를 접할 때 훨씬 수월하게 학습을 할 수 있고 응용하는 힘을 기를 수 있다.