0424-Browser

Author Avatar
John Doe Apr 24, 2018

브라우저 Chrome???

브라우저를 파헤쳐봅시다.

웹 자판기 공부를 하다 보니 브라우저 관련 내용이 많아서 오늘의 매인은 브라우저 파헤치기
브라우저_동작

엄청나다 10번은 읽어봐야 할 듯 !

브라우저_하이레벨_구조
Data-presistance
유아이-브라우저엔진-렌더링엔진
렌더링 엔진-(네트워킹, 자바스크립트해석기, 유아이 백그라운드)

렌더링 엔진
파이어폭스 개코, 크롬 오페라 블링크 등등 …

  • 파싱 문자단위의 의미들을 파악

html Token -> DomTree
Css CssSom -> CssSomTree
각 트리 합쳐서 렌더트리를 바탕으로 레이아웃을 결정하고 이제 화면에 그려줍니다 (돔 파싱 - 렌더트리 -화면에 그려줌)

  • 파싱 토근단위로 짤라서 + + 같은 부분 나오면 더하기를 실행 의미들을 파악 -> 실행

  • HTML 파서

브라우저 요청 응답

요청 URI를 해석하고 해당 웹서버로 프로토콜을 따라 요청 데이터를 보냅니다 서버로 htttp프로토콜에 따라 요청 데이터를 보냅니다.

응답처리

서버에서 받은 응답 데이터에 컨텐츠 타입에 따라서 데이터를 처리합니다.

보통은 스크립트 태그는 바디 바로 위에 위치하는 것이 일반적
why? 그 위에 있으면 html태그를 해석하는 중간에 자바스크립트를 다운 받을 동안은 html해석 작업이 멈춰있기 때문에
더 나은 사용자 경험을 위해서는 마지막에 스크립트 태그를 놓는 것이 일반적 !

Q 근데 왜 body 바로 위일까? body가 끝나고는? 상관 없는 듯 한데 …

http_칸아카데미

크롱 html 강의 다시 들으면서 복습 + PoiemWeb html 로 정리 시작 !

CH1. 웹과 네트워크의 기본에 대해 알아보자
HTTP, TCP/IP 뿐아니라 Resource나 URI 와 같은 용어 중심으로 이해한다. 우리가 흔히 웹브라우저를 통해 인터넷을 하면서 경험한 것들인 것들이 많다. 동시에 크롬브라우저의 개발자도구를 살짝 학습하고, 네트워크 항목을 열어서 인터넷을 하면서 쌓이는 정보를 같이 살펴본다. 책에 나오는 개념을 같이 살펴보면 좋다.

CH2. 웹과 네트워크의 기본에 대해 알아보자
HTTP에 대해서 꼭 알아야 할 개념들이다. 어떻게 클라이언트와 서버간에 데이터 통신이 가능한지 자세히 알아야 한다. 이부분도 역시 네트워크 탭을 통해서 눈으로 실제 내용을 확인하면 더 이해하기 쉽다.

CH3. HTTP정보는 HTTP메시지에 있다
소개된 몇몇 헤더필드를 이해하면 좋다. 효율적인 전송을 위해 압축과 같은 압축인코딩도 있다는 것을 기억하자. 멀티파트라는 것이 무엇인이 알아야 한다.

CH4. 결과를 전달하는 HTTP 상태 코드
어떠한 상태코드가 있는지 알아보자.
특히 비정상적인 경우 다양한 상황에 맞는 오류 코드가 존재한다.

CH5. HTTP와 연계하는 웹서버
백엔드 측면에 가까운 기술이긴하지만, 웹을 이해하는 측면에서는 잘 이해하는 게 좋다. 캐쉬, 프록시와 같은 기술은 웹을 더 빠르게 동작하게 해준다.

CH6. HTTP 헤더

HTTP 헤더필드에는 여러가지 항목이 있다. 모든 header항목을 다 기억할 필요는 없지만, 적어도 절반이상은 어떤 의미인지 이해하려는 노력이 중요하다. 여기서 나온 헤드항목들은 위 그림처럼 ‘개발자도구’에서 Request header 와 Response header 항목을 보면 실제 웹브라우저에 주고받는 내용이 보인다. 실제 웹사이트에 접속해서 이런식으로 눈으로 보면서 header를 이해하는 게 좋다.

피드

  • 오늘의 목표

  • 브라우저 공부

  • 알고리즘
  • 운동
  • 우선 성실성을 목표로… 제일 중요함이 꾸준함 + 생활 습관인 것 같다. 이를 바탕으로 뭐든지 나아가는데 밑바탕이므로

배그

배드올 굿

  1. 아쉬운 점

오늘도 역시 새벽에 애매하게 일어난 점이 미치는 영향 … =_= 차라리 다시 자지 말껄… 이거 말고는 음..
ArrayParser 딱 리뷰 한 부분만 고친 점… 아쉽다 사실 testCase나 기능 refactoring 더 수정할 부분 많기는 할 텐데 잠깐 새로운게 하고 싶어졌다. 조금 후에 조금씩 점진적 개선을 더 해볼 생각
그리고 다른 사람처럼 다시 객체형식으로 구현도 한 번 해보고 싶고 다른 사람들 어떻게 구현했는지 답습도 좀 더 많이

  1. 굿

친구랑 오랜만에 통화, 서로 갈 길 응원해 준다는 점이 의지도 되고 더 열심히 해야 겠다는 동기부여 !