강의노트(2) - 웹 표준과 브라우저,동작원리

김희목·2024년 4월 4일
0

패스트캠퍼스

목록 보기
2/54
post-custom-banner

웹 앱의 동작 원리

  1. 사용자는 자신의 컴퓨터에서 주로 사용하는 브라우저를 오픈을 합니다.

브라우저에는 크롬,파이어폭스,엣지같은 여러가지 브라우저가 있습니다.

  1. 그 중에 하나에서 주소창에 HTTP 혹은 뒤에 S를 붙이는 형태로 앞단에 프로토콜을 작성한 다음에 뒤쪽에다가 naver.com처럼 접속하고자 하는 그 사이트의 주소를 입력하게 됩니다.

ex) https://naver.com

통신 프로토콜(통신규약)은 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계를 의미합니다. 대표적으로 HTTP,HTTPS,FTP,SSL등이 있습니다.

  1. 그러면 그 해당하는 사이트의 주소에 맞는 서버로 최초의 요청(Request)이 들어가게 됩니다.

  2. 서버에서는 요청이 들어온 사용자의 브라우저로 최초의 응답(Response)을 내어줍니다.

  3. 이 응답을 통해서 나가는 파일은 기본적인 웹사이트의 구조를 담고 있는 HTML이 사용자에게 응답이 되게 됩니다.

  4. 화면에 보여질 기본적인 구조를 브라우저가 확인합니다.

  5. 구조에는 추가적으로 작성되어져 있는 여러가지 CSS파일이나 JS파일 혹은 이미지 파일 같은 것들이 명시되어 있습니다.

  6. 그런 파일들을 추가적으로 서버에 요청합니다.

  7. 이후 서버는 다시 요청에 맞게 추가로 응답하여 CSS,JS,JPG같은 것들을 보내줍니다.

웹 사이트를 개발할 우리의 컴퓨터 환경을로컬(Local) 개발 환경 이라고 부릅니다.

우리의 컴퓨터에서 만들어 놓은 그 웹페이지를 실제로 사용자들이 접속 할 수 있는 구조로 만들려면 우리의 프로젝트는 사용자 접속 할 수 있는 서버에 있어야합니다.

정리

즉, 기본적인 원리는 우리의 컴퓨터에서 열심히 페이지를 만들어서 그 결과를 서버에다가 업로드를 해놓을 거고, 그 서버의 주소를 설정하고, 그 이후부터 그 주소로 접근하는 모든 사람들에게 위의 작성된 순서대로 진행되어 사용자에게 보여지게 됩니다.


웹 표준

웹 표준란 '웹에서 사용되는 표준 기술이나 규칙'을 의미합니다.

표준기술은 HTML,CSS,JS를 말합니다.

크로스 브라우징

크로스 브라우징(Cross Browsing)이란 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술 방법.

ex)크롬,엣지,파이어폭스,오페라,스윙등

즉 웹표준이라는 것이 있고, 그 표준을 해석해서 브라우저를 만드는 공급업체가 각각 다르기 때문에 브라우저에서 동작하는 내용들도 다룰 수 있기 때문에 이를 방지하기 위해 나온 방법이나 기술들을 크로스 브라우징이라고 합니다.


브라우저의 기본 구조

브라우저을 열었을때 테두리를 창(Window)이라고 하고, 브라우저 창이라고 하면 브라우저 윈도우라고 합니다.

브라우저 상단에 구글이라고 명시되어 있는 부분을 탭(Tap)이라고 합니다.

브라우저의 주소가 적혀있는 부분을 주소창이라고 합니다.

다음 브라우저의 웹페이지가 출력되는(렌더링) 전체 영역을 뷰포트(Viewport)라고 합니다.

렌더링(Rendering)이란 브라우저의 뷰포트에 웹 사이틀르 출력하는 행위를 말합니다.

post-custom-banner

0개의 댓글