본문 바로가기
반응형
개발자가 왜 되고 싶을까? 면접에서 의미있는 질문을 하고 있나요? 개발자 마광휘님의 블로그에서 발견한 글입니다. 개발자 취준생으로서 면접에 대한 글이 있어서 보게 되었는데요. 읽는 내내 생각에 잠기게 하는 글이었습니다. 라이브러리를 사용하는 이유, 이 언어를 사용하는 이유, 더 나아가 내가 개발자가 '왜' 되고 싶은지까지 생각하게 되어 글로 정리하려고 합니다. 나는 개발자가 왜 되고 싶을까? 돌이켜보면 처음 개발자가 되고 싶은 이유는 단순했습니다. 제가 본 책에 나온 성공한 사람들은 현재 익숙한 서비스를 만들어낸 사람들이었습니다. 그곳엔 코딩이라는 주제가 심심치 않게 나왔고 자연스럽게 접하게 되면서 그것에 대한 영상과 책들을 찾게 되었습니다. 일하는 시간은 점점 길어지고 힘겨워졌다. 40시간을 일한 주는 오히려 휴가에 가까웠다. .. 2020. 11. 2.
렌더 트리(Render Tree), CRP(Critical Rendering Path) 렌더 트리(Render Tree)란? DOM과 CSSOM은 독립적인 개체입니다. 하나는 콘텐츠를, 다른 하나는 문서의 스타일 규칙을 설명합니다. 브라우저가 이 두가지를 병합하여 화면에 픽셀을 렌더링 하기 위한 마지막 단계, 최종 보스인 렌더 트리(render tree)에 대해 알아보겠습니다. 렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 됩니다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리가 됩니다. 최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요합니다. 브라우저가 렌더 트리를 생성하기 위해 하는 작업은 대략 다음과 같습니.. 2020. 10. 31.
CSSOM(CSS Object Model) 웹 브라우저가 페이지를 렌더링 할 때 HTML은 DOM을 생성한다는 것을 알게 됐습니다. CSS가 서운해 할까봐 CSSOM을 공부한 내용을 정리 했습니다. CSSOM(CSS Object Model)이란? HTML과 마찬가지로 CSS도 브라우저가 이해할 수 있는 형식으로 변환해야 합니다. 예제를 통해 살펴보겠습니다. 먼저 HTML은 다음과 같습니다. 브라우저는 DOM을 생성하는 동안 외부 CSS 스타일시트인 style.css를 참조하는 섹션의 를 접합니다. 브라우저는 이 리소스에 대한 요청을 즉시 발송하고 요청합니다. HTML 마크업 내에 직접(인라인) 스타일을 선언하지 않고 CSS와 HTML을 별도로 유지하면 콘텐츠와 디자인을 별도의 항목으로 처리할 수 있습니다. CSS 객체 모델은 브라우저가 DOM을 .. 2020. 10. 30.
HTTP란? HTTP가 무엇일까? 웹 개발자에게 필수인 통신 프로토콜 HTTP는 HyperText Transfer Protocol의 두문자어입니다. HTTP는 HTML 문서와 같은 리소스들을 주고받을 수 있도록 해주는 프로토콜이며 웹에서 이루어지는 모든 데이터 교환의 기초입니다. HTTP의 특징은 다음과 같습니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다. HTTP 프로토콜은 상태를 저장하지 않는(stateless) 프로토콜입니다. 즉, 데이터를 주고받기 위한 각각의 데이터 요청이 서로 독립적으로 관리가 되기 때문에 이전 데이터 요청과 다음 데이터 요청이 서로 관련이 없습니다. 이러한 특징 덕분에 서버는 세션과 같은 별도의 추가 정.. 2020. 10. 28.
Window 객체(DOM, BOM, JavaScript) 이번 글에선 웹 브라우저의 Window 객체와 브라우저 범위에 대해 공부한 내용을 정리했습니다. 도움이 되었으면 좋겠습니다. 브라우저 범위(Window, Document, Navigator) Window - 현재 열려있는 전체적인 창을 의미합니다. Document - 웹 브라우저가 웹 문서를 읽고 페이지가 렌더링 되는 부분을 의미합니다. Navigator - 사용자 눈에는 보이지 않지만 브라우저와 관련된 정보를 가져옵니다. 브라우저에 대한 버전, 정보, 종류 등을 제공합니다. Window 객체란? 전역객체이며 JavaScript의 최상위객체이기도 합니다. DOM, BOM, JavaScript 모두 window 객체의 프로퍼티가 됩니다. DOM(Document Object Model) : 문서 객체 모델 .. 2020. 10. 27.
면접에 대해 생각을 해봤다. 국비지원 학원을 수료한 지 벌써 세 달이 되어간다. 백엔드 개발자가 되고자 들어갔다가 프론트엔드 개발자가 되기로 마음 먹었다. 그렇게 프론트쪽으로 취준생이 된지도 세 달이 되어간다. 그동안 많은 생각이 들었다. '백엔드로 갔으면 지금 취업이 되었을까', '내가 배우고 있는게 퍼블리싱인가 프론트인가'라는 생각을 하면서 머릿속이 복잡했다. 현재 프론트엔드로 취준생인 사람들 중 나같은 고민이 있는 사람이 있을까 궁금하다. 백엔드를 공부하다 프론트엔드를 해서 그런지 애매한 위치에 서 있는 느낌이고 백은 필수고 프론트는 옵션인 것 같은 느낌이다. 그리고 항상 실력이 부족한 것 같다. 그러다 오늘 강사님을 뵙기로 했다. 점심에 맛있는 음식을 먹기로 하고 이것저것 물어보고 싶은게 많았고 존경하는 강사님이기에 한걸음에.. 2020. 10. 26.
DOM(Document Object Model) DOM이란? 문서 객체 모델(DOM)은 HTML 문서의 요소(element)를 제어하기 위해 웹 브라우저에서 처음 지원되었고 HTML, XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있게 함으로써 동적으로 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. DOM은 웹 페이지의 객체지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있습니다. 즉, 자바스크립트에서 Object 형태로 변환되어 접근, 제어를 할수 있게 만든 모델을 DOM이라 합니다. 브라우저마다 그들만의 방법으로 DOM을 구현하여서 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었습니다. 많은 브라우저들이 표.. 2020. 10. 24.
반응형

티스토리툴바