[웹 프로그래밍(풀스택)] Web 개발의 이해- FE/BE(3)

5)browser에서의 웹 개발 - 1

크롬에서 amazon.com을 들어가고 개발자 도구(윈도우면 ctrl shift i)를 들어가보자. 네트워크에 들어가고 새로고침을 하면 waterfall이 엄청나게 요동치는게 보이는데, 맨 위에 보면 www.amazon.com  이라는 html 문서가 보인다. 이것이 서버가 보낸 첫 번째 응답이다. response칸을 들어가면 html css javascript 코드가 보이는데 자바 스크립트 코드는 압축이 되어 있다. html코드는 meta, script, 등등의 태그가 보인다. meta 태그는 이 문서가 어떤 것인지 브라우저에 알려주는 것이다. html코드 사이에 CSS와 Javascript코드가 많이 섞여 있다.

살펴보고 깨달은 점:

-HTML문서는 html이라는 태그로 시작하여 html태그로 끝난다.

-head는 문서에 대한 자세한 정보(눈에 보이지 않음)이 들어있다.

-body는 화면에 표현해야할 내용이 나와있다.

-html은 계층적으로 존재한다.

-HTML은 태그를 사용해서 표현한다.

-JavaScript와 CSS가 html 안에 존재한다.

5)browser에서의 웹 개발 - 2

Js-bin을 이용하여 html을 써보자. css코드는 헤더에 적는게 일반적이다. 왜냐하면 랜더링 처리 시에 브라우저가 더 빨리 참고할 수 있게 하는 것이 좋기 때문이다. 또한 JS코드는 body태그 닫히기 전에 위치하는 것이 랜더링을 방해하지 않아 좋다. 만약 css가 한줄이 아니라 많이 필요해 파일을 import해야 한다면, link태그를 사용하여 파일을 불러올 수 있다. 자바스크립트 코드 또한 마찬가지다. <script src='파일 주소'>를 이용하면 서버로부터 파일을 받아와 혹시 바로 실행해야 될 코드가 있다면 그거를 먼저 보여주게 되어 있다. 기본적으로 HTML 코드는 한줄씩 실행한다. 자바스크립트 코드가 body의 위에 있다면 랜더링을 방해할 수 있으므로 가급적 html코드의 밑에다가 배치한다.