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

[1] 강의

웹 프로그래밍(풀스택)

1. 웹 프로그래밍 기초

5) browser의 웹 개발-2

 

[2] 강의 정리

  브라우저에서 HTML, CSS, JavaScript 코드를 어떻게 짜는지 아주 간단한 데모를 한번 살펴보도록 하겠다. HTML 코드는 이런 식으로 짜여 있다. 화면을 보면 알지만 저 문서의 타입이 뭐냐, html이라 나와있다. 이걸 DOCTYPE이라 하는데 아주 간단하게 이렇게 표현을 하면 HTML 시작을 알리는 것이다. 브라우저가 이것들을 당연히 해석을 한다. 그 다음에 HTML 코드가 이렇게 나와있고 그 다음에 head 태그가 이렇게 여기까지 나와있다. 보기 좋기 위해서 들여 쓰기를 했고 head 태그가 끝나면 body 태그가 이렇게 나와 있다. 지금 head 태그에는 meta 그래서 어떤 문서에 대한 정보, 이 문서가 utf-8인지 charset. 이런 것들이 나오는데. 결과에는 아무것도 안 나온다. 이 Run에 아무것도 안 나온다.

  지금 보고 있는 사이트는 JS Bin이라는 웹사이트이다. 여러분들 들어가셔서 회원가입하셔도 좋고 안 하셔도 좋은데 가급적 회원가입을 하고 그럼 여러분들이 개발한 코드들이 여기서 주소가 쭉 남게 된다. 그래서 나중에 확인을 할 수가 있다. 여러 개발자들끼리 서로 공유하기 좋은 웹사이트이다. 내가 이런 코드를 짯든데 어때? 아니면 어던 문제가 있어, 나 잘 모르겠어 이런 것들을 공유하기 위함이다, 이 사이트는. 다시돌아와서 title, title 부분. head 안에 title이 있다. boostcourse라고 해서 이 버튼을 눌려준다. 이건 title에 대한 정보고 오른쪽 위의 버튼을 한번 눌려보자. 그러면 결과 화면이 이렇게 해석이 돼서 화면에 나온다. 지금은 아무것도 안나온다. 왜냐하면 아무 내용이 없기 때문이다. 즉 내용을 채우려면 이 바디 영역에다가 채우면 된다. 웹프론트엔드 이렇게 쳤다. 화면을 조금 확대한다. 그 다음에 다시 Output에서 오른쪽 위의 화살표를 눌렸더니 새로 고침을 하고 저장이 제대로 안 된 것 같다. 다시 한번 여기는 화면이 나온다. 다시 한번 오른쪽 눌렸더니 이제서야 나왔다. 웹프론트엔드라고. 이 JS Bin에서 저장이 좀 늦어질 수 있다. 이걸 참고를 하고 위 쪽을 탭도 설명을 하자면 HTML, CSS, JavaScript 탭들을 껐다 켰다 이렇게 토글로 할 수 있다. CSS를 없앤다. 또 보여줬다 이렇게 할 수 있다. 지금은 CSS, JavaScript를 짜지 않으니까 우리가 이걸 닫고 이렇게 했다. 지금은 CSS, JavaScript를 짜지 않으니까 우리가 이걸 닫고 이렇게 했다. 그 다음에 head 안에 CSS를 바로 넣을 여기 안에 태그를 한번 보자. HTML은 태그라는 게 존재한다. 제가 div 태그로 이렇게 어떤 항목을 추가할 수 있다. 추가를 해서 넣고 그 다음에 CSS로 style 태그를 넣어서 이 문서에 필요한 CSS를 만들 수가 있다. 여기서 div 태그는 color를 blue로 해줘라고 할 수 있다. 그럼 바로 blue가 적용이 된다. 이게 기본적인 내용이다. 그 다음에 Javascript 코드는 어떻게 짜는가 JavaScript는 위에도 넣을 수 있고 아래에도 넣을 수도 있다. html 사이에도 넣지만 보통은 JavaScript 코드는 이렇게 html 끝나는 부분에 넣어주는 게 좀 더 일반적인 방법이다. 왜냐면 위쪽에 넎으면 브라우저가 HTML을 해석하는 동안 Javascript 코드를 다운로드하고 해석하느라고 좀 HTML 해석이 늦어질 수 있다. 그래서 Javascript 코드는 아래쪽으로 이렇게 올려준다. 그래서 Javascript 코드를 여기다가 뭐라고 뭐라고 막 짤 수가 있다. 이런 식으로 짜서 뭔가를 추가할 수 있다. 이 부분은 이제 console을 찍어서 Console에 아마 나올 것이다. 여기에 지금은 이렇게 해야 나온다.

  JavaScript 코드가 Console이라 하는 데. Console은 이제 개발자들 콘솔에 찍히는 건데. 지금 JS Bin에서는 웹 화면에 임시로 보여주고 있다. 이런 식으로 짤 수 있다. JavaScript 코드는 또 여기 말고도 보통 이런 데다가 head 아래에다가도 넣어서도 많이 짠다. html 아래에는 특별한 경우가 아니면 짜질 않는다. 넣은 경우도 있다. 한번 출력을 해보자. 이렇게 넣기도 하지만 아까처럼 body 태그 뒷부분에 넣는게 일반적이다. 그리고 body 안에 이제 여러분들이 마음껏 HTML 코드를 넣을 수 있고. CSS 코드는 주로 head 안에 이렇게 존재한다고 한다. 하지만 이제 문제가 CSS 코드가 많아지거나 Javascript 코드가 많아진다. 그럴 때는 이제 CSS 코드도 이렇게 짜지 않고 외부 파일로 링크를 달아서 이런 식으로 넣어줄 수 있다. 지금 탭을 눌렸다. 자동완성이 된다. 탭을 누르면 이렇게 외부 파일, 같은 디렉토리다 그러면 main.css 이런 식으로 넣어줄 수 있다. 지금은 main.css 파일을 실제 존재하지 않는다. 그런 것들을 넣어서 CSS 외부 파일을 포함 시킬 수가 있다. JavaScript 코드도 마찬가지이다. script 하고 그 다음에 src에서 예를 들어서 main, 현재 디렉토리에 main.js를 불러와 그러면은 외부의 main.js의 JavaScript 코드를 만들고 그 다음에 불려와서 JavaScript 코드를 실행시킬 수가 있다.

  어떻게 브라우저를 해석을 하는가. 브라우저는 한 라인씩 해석한다고 생각하면 된다. HTML 코드를 이렇게 해석을 하고 이게 구조다. 이 HTML은 utf 파일을 쓰고 있네 이 부분은 이제 이 뷰는 모바일인 경우에는 어떻게 보여줘야 된다고 정의되어 있네, 타이틀을 이거구나. 여기서 정의한 타이틀은 위쪽에 이런 탭 부분에 나오게 되어있다. 지금은 이제 JS Bin 사이트라 나오지 않는 것 같다.JavaScript 코드가 만약에 있다 그러면 이 파일을 어떻게 할까? 브라우저에서 서버로 요청을 보내서 받게 되어있다. 그러면 다시 서버에서 이 파일만 요청하고 받아온 다음에 이 파일은 다시 해석을 한다. 해석을 해서 혹시 바로 실행되어야 할 JavaScript 코드가 있다면 그걸 먼저 보여주게 돼있다. 그걸 먼저 실행을 해서 뭔가 실행을 해주는 것이다. 바로 실행을 하게 되어있고 그 실행이 다 끝났다 그러면 이제 쭉 이어서 다시 한번 head 태그가 닫혔구나 그 다음에 웹프론트엔드와 화면을 찍고 그 다음 내용이 나오고 그러한 과정이 좀 나온다. 이런 순서대로 된다.

  실제로 JavaScript 코드를 우리가 이렇게 alert이라고 화면을 띄우는 게 있다. alert(3)이라는 걸 한번 제가 넣어봤다. 넣어봤고 확인을 누르고 Run 딱 누르면 이 3이 나오고 그 다음에 사실 이 내용을 출력되는 걸 우리가 알 수 있다. 지금은 이제 이미 있어서 나오는 것이다. 그러면 이 부분을 우리가 이제 한번 JS Bin 말고 복사를 해서 로컬 파일에 한번 추가를 해볼 예정이다. 여기다가 해줬고, 이 다음에 여기다가 1. 이번엔 진짜 브라우저에서 로컬 파일에 있는 코드를 alert을 띄우고 한번 여기다가도 해볼까. 2라고 했다. 이 파일을 Desktop에 test.html 이라고 저장을 하고 이 파일을 한번 실행을 해보겠다. test.html을 찾아서 자, 1이 나왔다. test.html 파일이다. 1이 나왔다. 하지만 웹프론트엔드라는 화면은 실제 보이지 않는다. 확인을 눌렸는데도 웹 프론트엔드 화면이 안 나온다. 웹 프론트엔드가 이제 나왔다. JavaScript 코드가 이처럼 브라우저 렌더링을 조금 방해하고 있다. 즉 렌더링이란 화면에 어떻게 보여줘야 될지를 결정하는 건데 JavaScript는 좀 방해가 된 걸 알 수 있다. 이런 것들을 최소화시키려면 가급적 JavaScript 코드를 어쨋든 html 아래쪽에 위치시켜주는게 그나마 조금 낫다. 그래서 우리가 코딩을 앞으로 이런 식으로 많이 할 것이다. 이런 식으로 많이 할 것이고

  script 코드도 한번 넣어보자 script 해서 src=해서 외부 파일이다. main.js라는 것을 만들었다. 이번에는 이 JavaScript를 지우고 main.js를 한번 실행해볼것이다. 지금은 개발자 도구를 열어서 하면 main.js가 없다고 오류가 나오고 있다. 이 Console 창에 보면 오류 내용을 알 수 있다. main.js가 없으니까 이번에는 main.js를 여기다가 만들고 이쪽에다가 우리가 alert 말고 코드를 해본다. main.js 소스코드 이다. 저장을 했다. 그 다음에 main.js를 다시 한번 불러본다. main.js 소스코드이다라고 나와있다. 이렇게 나왔다. 이번에는 alert을 한번 띄우고 테스트를 해본다. alert를 띄워서 한 번 해보겠다. 자 소스코드입니다. 라고 된 것이다. 다시 한번 제가 불려보겠다. 웹 프론트엔드 글자가 보이고 그 다음에 소스코드가 나온 걸 확인했다. 만약 이 코드를 헤드에 옮기면 어떻게 될까. 소스코드이다. 화면에 내용이 보이지 않는다. 이렇게 렌더링을 방해하고 있다. 확인을 눌려야 웹프론트엔드가 나온다. 그래서 이 위치가 상당히 중요한데 JavaScript 코드는 어디에도 존재할 수 있지만 보통은 body 태그가 닫히기 직전 여기나 아니면 body 태그 이후에 이렇게 존재한느게 일반적으로 가장 적절한 위치이다. 여러분들도 CSS 파일도 한번 위치시켜서 테스트를 해보고. main.css 이런 식으로 CSS를 짜서 한번 넣어보고 이런 것들을 간단하게 테스트를 해보기 바란다.

  간단하게 HTML, CSS, JavaScript가 브라우저에서 어떻게 실제 동작되는지를 알아봤다. 그런 것들을 들여다보면서 Elements 탭에 또는 Network 탭을 보면서 개발자 도구에 어떻게 실행이 되고 어떤 코드들이 존재하는지 한번 들여다보면 앞으로 개발하는데 조금 더 이해가 될 것이다.