윤똘이의 웹 이모저모 윤똘이의 웹 이모저모

비전공 국비 수업을 5개월 가량 받고 21.5.12일날 끝나고 그 이후부터 쭉 포폴 수저 보완 수정 보완 하면서 준비를 했던거 같다. 사실 학원 끝나고 일주일은 쉬었다. 아무것도 안하고 먹고 싶은거 먹고, 놀고 싶은거 놀고 영화보고.... 이제 이 여유를 즐길날이 없다는걸 알기에... 그리고 나서, 최소 1달이상은 걸릴거라 예상하면서, 약간은 압박감을 줄이고 천천히 가자 라는 마인드로 준비 했던거 같다. 그러면서 면접도 좀 보고, 이력서는 한 80개가량 넣은것 같다. 나이도 어리지도 않고, 비전공, 고졸 이란 타이틀 때문에 많은 연락이 없엇고 감사하게도 4곳에서 연락을 주셔서 면접을 보고, 사원수, 복지, 면접관님들의 설명등등을 종합했을때 나한테 가장 잘 맞겠다 라고 생각한 곳에 덜컥... 취업이 되버렸..

dom... 분노의 질주 애청자인 나에게 dom은 친숙한 이름입니다. 도미닉 토레토, 이번에 시리즈 마지막 편을 극장에서 보고 참.... 시원섭섭한 기분을 많이 느꼈습니다... ㅠㅠ 왠지 그래도 나중에 또 번외 시리즈가 나올것같긴 하지만요 ㅎㅎ DOM... 객체.... 이런 단어들이 웹을 입문하는 저에겐 항상 어려웠던 단어였습니다. 아직 익숙하지 않아서, 많이 접해보지 않아서 일 수도 있지만 여전히... 조금 헷갈리는 개념입니다. 그래서 이번에 DOM과 DOM트리, 객체에 대해서 조금 저 자신이 이해하기 쉽게 정리를 해보겠습니다. 정리를 하는김에 NODE와 객체라는 개념을 먼저 짚고 넘어 가보겠습니다. 객체(Object) 간단히 풀어서 말씀드리면, 붕어빵, 고양이, 강아지, 핸드폰, 이어폰, 물, 이 모..

렌더트리 DOM + CSSOM이 더해저 Render Tree가 완성이 됩니다. 최종적으로 브라우저에 표기 될 것들만 렌더 트리에 선별이 되서 생성되고, 렌더트리를 이용해 각 요소의 레이아웃계산, 픽셀을 화면에 렌더링 하는 페인트 프로세스에 대한 입력으로 처리가 됩니다. 조금 더 자세히 순서를 보면, 1. DOM 트리의 루트에서 시작해서 노드 각각을 읽으며 표시. 1-1 메타태그, 스크립트 태그 등의 노드는 표시되지않습니다 (사용자에게 보여주지 않아도 되는 내용은 출력에 반영이 되지 않습니다) 1-2 일부 노드는 CSS를 통해 숨겨지며 렌더트리에서도 생략이 됩니다. (display:none;속성이 들어가면 렌더트리에서 누락이 됩니다.) (visibility:hidden은 레이아웃의 공간을 가지고 있고 내용..

렌더링 엔진 렌더링 엔진의 사전적 의미는 'HTML 문서와 기타 자원의 웹 페이지를 사용자의 장치에 상호작용적인 시각 표현으로 변환시키는 것' 이라고 설명이 되어있다. 쉽게 말해 우리가 문서로 작성된 코드들을 브라우저에서 이해하는 코드로 재구성하여 우리의 디바이스로 보여주는 프로그램이라고 생각하면 될 것 같다. 렌더링 엔진 종류 파이어 폭스는 모질라에서 직접 만든 게코(Gecko) 엔진을 사용하며, 사파리, 크롬은 웹킷(Webkit) 엔진을 사용합니다. + 크롬은 '블링크'엔진으로 넘어갔다고 함. 그리고 삼성 인터넷도 '블링크'엔진을 사용한다고 합니다. 렌더링 엔진 동작 과정 모든 과정은 비동기적으로 진행이, HTML을 파싱이 다 될 때까지 기다리지 않으며 렌더 트리 배치와 그리기 과정을 시작합니다. 보..

파싱, 파서란 단어도 얼핏 들으면서 문맥상, 무언갈 가져오는것 어떤 처리를 하는것 까지만 두루뭉실 하게 알고 있었습니다. 그래서 이번에 개념 정리를 한번 해보려고 합니다. Parsing(파싱) 데이터의 언어를 어휘분석 + 구문 분석 을 통해, 일련의 문자열을 의미있는 토큰 으로 분해하고, 원하는 형태로 조립하여 Parse Tree로 만드는 과정. '아래는 지금 설명하는 글과는 전혀다른 컴파일의 과정의 예시입니다.' 보통 프로그래밍 고급언어(C언어,자바스크립트 등)이 컴퓨터에서 동작 하기 위해 최종적으로 2진수로 이루어진 기계어로 컴파일 된다는걸 대충은 알고 있으실 겁니다. 이때, 컴파일이 되기전 기존의 데이터를 분해해서 각각의 토큰(의미 있는 데이터)로 만든뒤 컴파일을 진행 되는걸 위에 그림에서 보실 수..

공부를 하다보면 문득문득, 파싱, DOM, BOM, 렌더링, 엔진 등등의 단어를 접하게 되는데 정확한 뜻과 함께 브라우저의 원리를 다시금 복습해 보려고 합니다. 브라우저의 주요 기능. - 사용자가 선택한 자원을 서버에 요청 하고 브라우저에 표시. - 자원의 주소는 URL에 의해 정해집니다. - 자원은 HTML, PDF 이미지 혹은 다른 형태 일 수도 있습니다. - 브라우저는 HTML,CSS 명세에 따라 HTML 파일을 해석 해서 표시하는데 이 명세는 W3C에서 정합니다. 과거에는 브라우저들이 일부 명세만 따라서 호환성 문제가 따랐지만, 최근에는 대부분의 브라우저가 표준 명세를 따릅니다. 브라우저의 기본 구성. - 사용자 인터페이스: 요청한 페이지를 보여주는창을 제외한 나머지 부분입니다.(주소창, 뒤로가기..

1. URL 주소를 입력. 2. 입력된 URL주소중 도메인 부분만 DNS서버에서 검색. 3. DNS서버에서 해당 도메인 네임에 해당하는 IP주소를 찾아, 사용자가 입력한 URL 정보와 전달. 4. 전달 할 IP주소 + 사용자가 입력한 URL은 HTTP 프로토콜을 이용해 HTTP 요청 메시지를 생성. 5. 이 메시지는 TCP프로토콜을 사용해서 인터넷을 거처 해당 IP주소의 컴퓨터로 전송 6. 도착한 HTTP 요청메시지는 다시 HTTP 프로토콜을 사용하여 웹 페이지 URL 정보로 변경됨. 7. 웹 서버는 도착한 웹 페이지의 URL을 검색. 8. 그리고, 검색된 웹 페이지는 다시 HTTP프로토콜을 사용하여 HTTP 응답메시지 생성. 9. TCP 프로토콜을 사용해 인터넷을 통해 사용자에게 메시지를 전달 10. ..

기존에 올리려고, 노드js 공부한 내용 비공개로 해놓고 정리해서 한번에 올리려 했는데 컨트롤... v를 눌러야 되는데 c를 눌러서.. 클립보드에서 날라감... ㅎㅎ 다시 해야지...