부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 5 강의 정리

[1] 강의

웹 프로그래밍(풀스택)

1. 웹 프로그래밍 기초

5) browser의 웹 개발-1

 

[2] 강의 정리

  마이크로 소프트에서 나온 Edge 브라우저, Internet Explorer, Firefox 또 요즘에 핸드폰에서도 Safari와 같은 브라우저를 가지고 인터넷을 들어갈 수 있다. 그럼 브라우저에서 웹 개발을 위한 코드들이 어떻게 동작되는지 직접 먼저 들여다보도록 하겠다. 웹 사이트를 한번 뜯어볼 것이다. 먼저 크롬 브라우저가 없다면 pc에서 설치를 할 수가 있다. 크롬 브라우저 다운로드 이렇게 치면 쉽게 다운로드가 된다. 크롬 개발자 도구를 열 것이다. 크롬 브라우저에서 개발자들이 직접 코딩하는 것은 아니지만 우리가 만든 코드가 HTML, CSS, 자바스크립트 코드가 잘 동작 되는지 브라우저를 열고 확인을 해야한다. 그러기 위해서는 크롬 개발자 도구를 통해서 잘 동작되는지를 한번 알아봐야 한다. 어떤 문제가 있는지 또 없는지 디버깅 과정을 위해서는 개발자 도구를 필요로 한다. 대부분의 브라우저들이 그런 개발자 도구를 지원하고 있고 크롬도 또 지원을 한다. 윈도우와 같은 경우에는 이런 단축키 맥 같은 경우에는 여기 나와 있는 단축키로 쉽게 개발자 도구를 열 수 있다.

  설치가 됬으니 아마존 사이트에 접속을 해보도록 하겠다. 아마존 사이트로 간다. 단축키를 열면 이런 화면들이 나온다. 여러 가지 패털들이 나온다. 탭 모양으로 여러 가지가 나온다. Elements 탭을 열여두고 우리가 소스 코드를 한번 이렇게 볼 것이다. 이 소스 코드를 보자. Network 탭으로 가서 Network 패널을 가서 새로 고침을 해본다. 새로 고침을 하면 맨 위에 www.amazon.com이  나온다. 여기 All을 누르면 여기 화면이 나온다. 이 코드를 보고 이게 처음 우리가 www.amazon.com을   Enter를 치는 순간. 서버로 요청이 간다. 그때 서버에서 응답 값을 준 값들을 Response 항목에서 볼 수가 있다. 다시 말하면 Response가 바로 서버에서 첫 번째로 보내준 소스 코드라고 할 수 있다.

  이 소스 코드가 이렇게 나오면 우리가 한번 이 부분을 살펴보도록 하겠다. 왼쪽에 라인 수가 나온다. 1번 라인부터 얼마나 긴지 한번 살펴보겠따. 5700 라인이다. 이런 화면들이 이렇게 보이고 있다. 이렇게 <로 열고 html 이런 코드들이 나온다. HTML 시작을 알리는 코드이다. 그 다음에 HTML 사이사이에는 이렇게 CSS 링크들도 포함이 되어 있다. CSS 링크들도 중간에 보면 나와있고 조금 뒤쪽에 나와있다. 자바 스크립트 코드가 보기 굉장히 어렵다. 원래는 개발자들이 이렇게 짜지 않았다. 용량을 줄이기 위해서 압축을 해놓은 상태이다. 이런 것들은 도구들의 지원을 받아서 할 수가 있다. 쭉 내리다 보면 script 태그다. 이 사이에 있는 것은 자바 스크립트 코드를 말하는 것이다. 자바 스크립트 문법이 보인다. 그 다음에 쭉 내려와봤더니 meta 태그 이런 것들이 보인다. 이런 것들은 이 문서가 어떤 것인지 브라우저한테 알려주는 것이다. UTF-8라는 인코딩 방식으로 됬다. 이런 것들을 알려주는 코드이기도 한다.

  자바 스크립트 코드가 보인다. 아무래도 복잡한 웹 사이트다 보니까 코드들이 쉽게 읽혀지지는 않는다. 가끔 이렇게 < 열고 style type, ypye은 뭐야? CSS야라는 것들을 표시해주는 것도 있다. 이 코드들은 뭐냐면 CSS 코드라고 하는 것이다. CSS 코드가 이렇게 HTML 사이사이에 중간에 끼이기도 한다. script 코드가 나와서 자바 스크립트 코드가 또 나온다. 이렇게 보면 HTML 안에 자바 스크립트 코드와 CSS 코드가 예상할 수 없는 곳에 불규칙적으로 계속 존재한다는 것을 알 수 있다.

  이제 HTML 코드가 좀 나온다. HTML 코드, 즉 문서의 형태를 표현하기 위해서 태그들이라고 하는데 div 태그 아래에 나오고 또 div 태그는 어떤 id, 유니크한 어떤 이름을 가지고 있고 또 얘가 여러가지 CSS를 표현하기 위한 클래스라고 하는 것들도 이렇게 존재하고 있다. 그 아래 쭉 내려다보면 이제 HTML 태그들이 본격적으로 많이 나오는 부분들이 있다. 중간쯤에 왔더니 비어져 있는 것도 있는데 이렇게 HTML 태그들이 쭉 많이 나오고 있다. 어떤 리스트를 알려주는 li 태그 이런 것들은 이제 HTML 하면서 우리가 하나씩 볼 것이다. div 링크를 알려주는 태그들 이런 것들이 쭉 나온다. 또 중간중간에 script 태그도 나온다. 자바 스크립트 코드가 또 이렇게 나온다. 복잡한 웹 사이트를 들여다봤지만 어떤가. HTML 안에 자바 스크립트, CSS가 굉장히 복잡하게 다뤄져 있다는 걸 알 수가 있다. 우리가 그 다음에 한번 몇가지를 알아보도록 할것이다.

  우리가 알게 된 몇가지 특징이 있다. HTML 문서는 html이라는 태그로 시작해서 html 태그로 끝난다는게 끝나는 부분은 확인 못 했지만 그게 나와있다. head는 무엇을 하는 것일까 head는 어떤 HTML의 추가적인 내용을 HTML 문서에 대한 추가적인 설명을 담고 있다. 그래서 HTML 안에 head라는 태그 안에는 어떤 자세한 문서에 대한 정보들이 포함되어 있다. 눈에 보이는 걸 정의하는 건 아니고 그런 것들을 문서에 대한 추가적인 정보다는 걸 알 수가 있다. body에는 이제 화면에 표현되야 할 div나 이런 것들이 포함되게 되어있고 HTML은 굉장히 계층적으로 존재한다. HTML은 태그를 사용해서 표현한다는 것이다. 어떤 임의의 태그가 있고 클래스가 있고 타이틀이 있고 이런 식으로 나와있다. 그래서 HTML은 태그를 사용해서 표현한다. 그리고 자바스크립트와 CSS가 HTML 안에 여기저기 존재한다. 라는 것을 알 수 있다. 이번 영상은 여기까지 마무리를 하고 HTML에 대해서 간단히 한번 우리가 어떤 모습인지 여러분들도 개발자 도구를 열어서 한번 소스 코드를 저와 같이 들여다보면서 이렇게 HTML 안에 CSS, 자바스크립트 또 HTML 태그라는 것들이 존재하는구나 라는 것들 이해하시면 좋겠다.