browser 에서의 웹 개발

크롬 브라우저에서 개발자 도구를 열어 어떤 코드로 웹사이트가 제작되었는지 살펴보자.

크롬 개발자도구를 여는 단축키 : Ctrl + Shift + i

아마존 웹사이트를 연 후 다음의 단축키를 사용해 보았다.

위의 그림과 같이 Network를 선택한 다음에 새로고침을 하면

www.amazon.com 이라는 항목이 나타나는데

이 코드를 보고 처음 우리가 www.amazon.com을 Enter를 치는 순간

서버에서 응답을 준 값들을 Response 항목에서 볼 수 있다.

소스를 천천히 살펴보면 html코드, css코드, javascript코드를 모두 볼 수 있다.

여기서 볼 수 있는 몇 가지 특징들을 정리해보자.

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

 - head는 무엇을 하는걸까?

       -> 어떤 HTML 문서에 대한 추가적인 설명을 담고있다.

그래서 HTML문서안의 head태그 안에는 어떤 자세한 문서에 대한 정보들이

포함되어있다.

 - body는?

-> 화면에 표현되어야 될 div와 같은 것들이 포함되게 되어있다.

 - HTML은 계층적이다.

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

 - Java Script와 CSS가 html안에 여기저기 존재한다.

JS Bin을 통해 실습

http://www.jsbin.com

자신이 짠 코드들을 저장할 수 있고 

이 웹사이트에서 여러 개발자들끼리 서로의 코드를 공유하게된다.

다음과 같이 코드를 작성하고 저장 후 오른쪽 위에있는 ↗ 버튼을 누르면 결과를 확인할 수 있다.

위와 같이 div 태그로 감싼 후 head 안에서 style태그를 통해 색깔을 바꿔줄 수도 있다.

이런 CSS코드는 주로 head안에 존재한다.

JavaScript 코드 짜는 방법

JavaScript는 위에 넣을수도 있고 아래에 넣을 수도 있다.

html사이에도 넣지만 보통은 html 끝나는 부분에 넣어주는 것이 일반적이다.

그 이유는 위쪽에 넣으면 브라우저가 HTML을 해석하는 동안 

JavaScript 코드를 다운로드하고 해석하느라 HTML해석이 느려질 수 있기 때문.

script태그 안에서 짠 javascript 코드를 Console 에서 확인할 수 있다.

코드가 길어지는 경우

외부 파일로 링크를 달아서 다음과 같이 넣어주게 된다.

위의 link태그가 그 코드이며 link라고 입력후 tab를 눌러주면 자동으로 완성된다.

javascript 코드 역시 마찬가지이다.

<script src="./main.js">

</script>

이런 코드를 추가하여 외부에서 불러올 수 있다.

javascript는 브라우저의 렌더링을 방해할 수 있다.

렌더링이란 ? 화면에 어떻게 보여줘야 될지를 결정하는 것

예를들어 아래의 코드를 살펴보자

이렇게 alert라는 javascript 코드를 넣어주게 되면

이렇게 웹프론트엔드 라는 글자가 뜨기전에 javascript로 작성한게 먼저 실행이 된다.

이런 문제를 최소화하기 위해 javascript 코드를 아래쪽에 위치시키는 것이다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16664/