[Network] Browser

in Computer Science on Network

웹 어플리케이션 구동 과정

URL Entered

  • 사용자가 웹 브라우저에서 사이트 주소를 입력

DNS Lookup

  • DNS를 이용하여 사이트 주소에 해당되는 Server IP 접근

Socket Connection

  • Client(브라우저)와 Server 간 접속을 위한 TCP 소켓 연결

HTTP Request

  • Client 에서 HTTP Header 와 데이터가 서버로 전송

Content Download

  • 해당 요청이 Server 에 도달하면 사용자가 원하는 문서를 다시 웹 브라우저에 전송

Browser Rendering

  • 웹 브라우저의 렌더링엔진에서 해당 문서를 다음과 같은 순서로 파싱

브라우저 기본 구조


출처 : https://d2.naver.com/helloworld/59361
브라우저의 주요 구성 요소


사용자 인터페이스

  • 요청한 페이지를 보여주는 창 이의외 모든 부분
  • 주소 표시줄, 이전 버튼, 다음 버튼, 새로고침, 정지 버튼, 홈 버튼

브라우저 엔진

  • 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어

렌더링 엔진

  • 요청한 콘텐츠를 표시 : HTML을 요청하면 HTML과 CSS를 파싱하여 표시
브라우저랜더링 엔진
인터넷 익스플로러 (MS)트라이던트(Trident)
파이어폭스 (Mozilla)게코 (Gecko)
크롬 (Google)Webkit (27버전 이하) / Blink (28버전 이상)
사파리 (Apple)웹킷 (Webkit)
오페라 (Opera)Webkit (14버전 이하) / Blink (15버전 이상)

통신

  • HTTP 요청과 같은 네트워크 호출에 사용됨
  • 플랫폼 독립적인 인터페이스이고 각 플랫폼 하부에서 실행됨

자바스크립트 해석기

  • 자바스크립트 코드를 해석하고 실행
  • HTML을 파싱하는 도중 <script> 태그를 만나게 되면 그 코드를 실행하기 위해 Javascript 엔진으로 제어 권한을 넘기고 기계어 컴파일까지 완료가 된 후 다시 마저 진행됨
  • DOM 트리를 생성 하는 도중 이러한 상황이 발생하게 되면 레이아웃 단계와 그리기 단계에 늦게 도달하게 되면서 화면 출력 시간도 지연됨

UI 백엔드

  • 콤보 박스와 창 같은 기본적인 장치를 그림
  • 플랫폼에서 명시하지 않은 일반적인 인터페이스로서, OS 사용자 인터페이스 체계를 사용

자료 저장소

  • 자료를 저장하는 계층
  • 쿠키를 저장하는 것과 같이 모든 종류의 자원을 하드 디스크에 저장
  • HTML5 명세에 브라우저가 지원하는 클라이언트 스토리지가 사용되도록 정의되어 있음
    • 사용자가 오프라인 상태여도 웹이 작동하도록 한 뒤, 네트워크가 다시 연결되면 데이터를 다시 동기화 할 수 있음
    • 성능 향상을 위해, 동일한 자원에 대한 중복 요청을 줄일 수 있음
    • 서버 인프라가 필요하지 않은 보다 쉬운 모델로 구성되어 있어 사용 효율성이 좋지만 데이터가 취향하고 여러 클라이언트가 엑세스 할 수 없으므로 중요하지 않은 데이터 위주로 사용을 권장

Continue reading

210924 스터디 - 전설의 시작 (아마도...?)

in Essay on Diary

2달 반

마지막 에세이를 쓰고 두달 반이라는 시간이 지났다. 게을러터져서 일기쓰는걸 미루다 미루다 결국 2달이 넘게 지나버렸다. 그 두달간 꽤나 많은 변화가 있었기에 지난 일들을 회고를 해보려 한다. 에세이를 쓰는 것은 오랜만이라 어떻게 시작해야할지 어떻게 이어가야할지 어떻게 끝을 내야할지 머리에 잡히는 감은 1도 없지만 어차피 끄적인다는 본래의 의미는 아무렇게나 쓴다는 의미니까 두서없이 써내려 가 보려 한다.

코딩테스트

내 생에 처음으로 코딩테스트를 쳐 봤다. 이제까지 알고리즘 문제만 죽어라 풀어보았지, 기업에서 내는 시간 내에 문제를 몇 문제 이상 맞춰야하는 그런 테스트는 처음 쳐 보았다. 뭐 결론부터 말하자면 1차 광탈했지만 생각보다 하면 될 것 같다는 자신감을 붙게 해 줬기에 의미있는 하루였다. (라인 2시간, 카카오 5시간 동안 시험을 치느라 머리 터지는 줄 알았다.)
처음 시험을 치기 전 목표는 ‘내 실력에 1문제만 맞춰보자. 코테가 어떤지 경험해보는 데 의의를 두자.’로 시험에 임했는데, 막상 시험을 끝내니 내가 푼 카카오 문제가 작년 코테 커트라인 컷에 걸쳐서 조금 기대를 했었다. (솔직히 작년보다 이번이 더 쉬워서 결국엔 0.5솔 차이로 커트 당하긴 했다.) 뭐 중요한 것은 내가 생각했던 것 보다 내년에는 노려볼법하다는 자신감을 얻었다는 것에 의의를 둘 수 있는 경험이었다.

스터디

취준 스터디를 해본 적이 없어서 어떻게 스터디원을 모아야하나, 막상 모으면 어떻게 해야하나, 걱정만 하다가 그냥 질러보자는 식으로 에타에 글을 올려서 모집을 했다. 처음에는 나같은 ㅈ밥만 모일거라 생각했는데 생각보다 나보다 잘하는 친구들이 두명, 초보인 친구 한명 이렇게 나 포함 4명이서 스터디를 진행하게 되었다. 한명은 학부때 동아리 후배로 꽤나 잘 하던 친구였는데 대기업 면접까지도 가 본 경험이 있는 친구라 같이 스터디 하면서 배울 점이 많을 것 같아서 이 친구가 스터디원으로 들어와 같이 한다니 든든했다.
스터디원 전체가 당장 포트폴리오용 양산형 프로젝트를 위해 모인 사람들이 아니라 하나의 프로젝트를 하더라도 구조와 원리를 이해하며 제대로 설계 해보자는 생각이 같은 사람들이 모여서 스터디 진행에 있어 차질 없이 다들 잘 따라와 주는 것 같다. 스터디를 처음 모았다고 나름 스터디장으로서 스터디를 어떻게 굴려야할지 나와 우리 스터디원들이 이 스터디를 통해 어떤 것을 얻어갈 수 있을지에 대해서 많이 고민하고 그런 방향으로 진행하기 위해 노력하고 있다.
아직 시작한지 한달도 채 되지않은 스터디라 내가 생각한 대로 잘 흘러가 줄지는 모르겠지만 4명 모두 원하는 곳에 취직할 수 있도록 끝까지 잘 이어갔으면 좋겠다.

끝마치며

요즘 매일같이 공부하는 일상만 반복하다보니 뭐랄까 삶에 큰 낙이 없이 공부만 하고 있다. 마음은 조급해서 여유는 없고 그렇다고 매일매일 시간낭비 않고 공부에만 집중하는 것도 아니다. 제일 최악의 딜레마에 빠져 살고 있긴 한데 최근 밤하늘에 별을 보러 천문대에 다녀온 적이 있는데 가끔 아무 생각없이 그렇게 하늘을 바라보며 힐링하는 것도 나쁘지 않았다. 공부도 좋지만 마음에 여유없이 공부하는 건 적당히 공부하느니만 못하다고 생각한다. 나 뿐만 아니라 모두가 그렇지 않을까 싶다.
사실 나 스스로 그렇게 열심히 하고있다고 말하진 못하지만 나쁘지 않은 속도로 달리고 있으니 가끔은 주위의 풍경을 보며 걷는 시간도 필요하다고 나 스스로에게 말하고 싶다. 올 여름도 수고했고 가을에도 힘내보자.

Continue reading

Pagination

© 2021. by hminkim