웹 브라우저
-
HTML - 시맨틱 태그는 뭐고, 왜 사용해야 할까 ?웹 브라우저 2023. 4. 5. 17:10
첫 웹 팀프로젝트를 할 때, 나는 컴포넌트를 만들 때 모든 요소를 다 div 로 만들었다. html 태그에 뭐가 있는지 잘 모르기도 했고, 그렇게 만들어도 동작하고 보여지는 데에 아무 문제가 없었기 때문이다. 하지만 중간에 팀원에게 시맨틱 태그를 이용하라는 말을 들었고, 그 이유를 물어봤을 때 단순히 가시성이 좋기 때문이라는 대답이 돌아왔다. 그래서 div 대신에 시맨틱 태그를 쓰려고 해봤지만, 사실 잘 와닿지 않아서 대충 한 감이 있다. 하지만 프로젝트가 끝나고 혼자 HTML 과 CSS 를 공부하면서, 시맨틱 태그라는 것이 생각보다 중요하다는 것을 깨달았다. 개념은 어렵지 않기에, 간단히 시맨틱 태그를 왜 사용하는지에 대해 알아보고, 어떻게 사용하는 지 알아보자. 출처: Do it! HTML5 + CS..
-
브라우저가 이벤트를 처리하는 방법웹 브라우저 2023. 3. 17. 13:46
웹 페이지를 (특히 동적 웹 페이지) 만들 때 이벤트는 매우 중요한 요소이다. 단순히 내 첫 팀프로젝트로 만든 웹 페이지만 해도 처리할 이벤트가 굉장히 많았다. 이런 식으로 프로그램의 흐름을 이벤트 중심으로 제어하는 방식을 event-driven programming 이라고 한다는데, 그게 중요한 건 아니고, 나는 수많은 이벤트 핸들러를 만들면서 이 이벤트들이 정확히 어떻게 동작하는 지 생각해보지 않았다. 여태까지는 문제가 없었지만, 내가 이벤트 핸들러를 만들었을 때 이게 어디로 가서 어떻게 동작하는 지 원리를 알고 있으면 확실히 문제 해결능력에 도움이 될 것이다. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 이벤트 드리븐 프로그래밍 이벤트가 발생하..
-
DOM 을 좀 더 깊게 공부하자 !웹 브라우저 2023. 3. 7. 22:08
브라우저의 렌더링 과정에서 브라우저가 html 통짜 텍스트 문서를 어떻게 DOM 트리로 파싱하는 지 알아보았다. 이 DOM 이라는 자료구조에 대해 좀 더 자세히 이해하면 매우 좋다 ! 왜 ? 지금까지 이해한 것을 바탕으로 감히 생각해 보건데, 프론트엔드의 대부분의 작업은 이 DOM 트리를 조작하는 일이다. 바로 자바스크립트를 이용해서 ! (자바스크립트의 DOM API 를 이용해서) 그렇다는 것은 DOM 트리를 얼마나 잘 이해하고 있냐는 프론트엔드의 실력과도 상관관계가 많이 있을 것이라 예측한다. 자바스크립트 Deep Dive (나는 어느샌가 이것을 성경이라고 부르기 시작했다) 에는 DOM 을 거의 100페이지에 걸쳐서 길게 설명하는데, 나는 이것을 완벽하게 이해해서 최대한 압축한 글을 쓰려고 한다. 할 ..
-
브라우저의 렌더링 과정웹 브라우저 2023. 3. 7. 21:17
웹 브라우저에서 실행할 수 있는 것은 html, css, JavaScript 셋 뿐이다 ! (모든 브라우저는 내부에 자바스크립트 엔진이 내장되어 있다) 따라서 우리가 브라우저에 접속해서 도메인 주소를 입력하고 난 뒤 보이는 모든 화면은, html, css, JavaScript 로 작성된 텍스트 문서를 브라우저가 파싱하여 렌더링해서 보여주는 것이다. 출처 : 모던 자바스크립트 Deep Dive: 자바스크립트의 기본 개념과 동작 원리 / 이웅모 지음 브라우저의 렌더링 과정 요약 브라우저의 렌더링 과정은 내가 이해한 대로 작성하자면, 아주 간단한 흐름은 이렇다.아래의 일련의 과정은 HTTP 프로토콜에 의해 이뤄진다. 1. 기본적으로 브라우저는 URL 을 입력받는 주소창을 제공한다. 2. 그 URL 에 원하는 ..
-
브라우저의 렌더링 과정에 대해 제대로 공부하자웹 브라우저 2023. 3. 5. 15:20
첫 팀 프로젝트인 트랜센던스를 끝낼 때 까지, 브라우저에 대해 거의 아는 게 없는 상태였다. 프로젝트의 마감기한이 빠듯하기도 했고, 처음 들어갈 때 아무것도 몰랐기에 우선 프론트엔드 코드를 짜기 위한 자바스크립트, 타입스크립트, 리액트의 실용적인 지식만을 채우기에도 벅찼기 때문이다. (거의 일주일만에 전부 학습했다) 하지만 프로젝트를 끝낸 후, 회의감과 함께 내가 너무 아는 게 없다는 생각이 들었고, 대체 내가 여태까지 한 게 뭔지에 대해 공부해야겠다는 생각이 간절했다. 일단 브라우저를 알고, html 과 css 를 알고, 자바스크립트를 알아야, 내가 프로젝트를 하면서도 TS 와 React 로 짠 코드가 어떻게 트랜스컴파일 되어 브라우저에서 어떻게 동작하는 지 파악할 것 아닌가 ? 그래야 디버깅도 수월하..