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

[1] 강의

웹 프로그래밍(풀스택)

1. 웹 프로그래밍 기초

3) 웹 Front-End 와 웹 Back-End-1

 

[2] 요약

  웹 프론트엔드에 대해서 알아보자.

  사용자에게 웹을 통해 다양한 콘텐츠를 제공한다. 온라인으로 접속하다보면 여러 문서를 보게된다.웹페이지라는 것은 하나의 문서이다. 그 외에는 동영상, 사진 그런 것들도 포함해서 웹을 통해서 볼 수 있다. 최근에는 유튜브와 같은 웹사이트에 들어가보면 많은 동영상 콘텐츠를 볼 수 있고 사용자와 소통도 할 수 있다. 이러한 것들을 웹에서는 리소스라고 하는데 웹 콘텐츠라고도 불린다.

  사용자들이 웹 콘텐츠를 보기만 하지 않는다. 사용자의 어떤 요청에 반응해서 웹은 동작이 되야 한다. 사용자들이 마우스로 어떤걸 클릭하고 키보드로 데이터를 입력한다. 또한 음성으로 텍스트를 전달해서 음성인식을 한 다음에 텍스트로 표현하기도 한다. 웹 프론트엔드 즉, 웹 브라우저에서는 이런 것들을 잘 처리할 수 있어야 한다. 웹 프론트 엔드 즉, 웹 브라우저에서는 이런 것들을 잘 처리할 수 있어야 한다. 웹 프론트엔드의 역활을 알아보자, 웹 콘텐츠를 잘 보여주기 위해서 구조를 만들어야 되는데 그걸 다시 표현 하면 일종의 신문, 책 그런 것들은 표현해야 할 가사나 그런 내용들이 잘 구분되어 있다. 보기에 좋게 되어있고 글자의 크기가 일관되어 있고 줄 간격이 보기 좋게 되어있고 헤드라인과 같은 것들은 좀 크게 표현이 되어있다. 그리고 적절하게 배치가 되어 있다. 배치가 뒤죽박죽이면 보기 어려울 것이다. 웹도 마찬가지다. 문서를 전달한다는 점에서 보면 적절한 배치 일관된 디자인 꼭 일관되지 않더라도 보기 좋고 가끔씩은 아름다운 디자인들을 제공해야 한다. 즉, 이런 것들을 이제 보기 좋게 가독성 이런것들을 중요시한 디자인들을 잘 해줘야 한다. 웹 디자인이 굉장히 중요한 영역이다. 또 하나는 사용자 요청 즉, 사용자의 키보드나 마우스 이런 것들의 어떤 요청에 잘 반영이 돼야 한다. 그래서 다시 말하면 소통하듯이 좀 반응 자체가 부드럽고 빠르게 이루어져야 되는 게 웹 프론트엔드의 어떤 역활이다.

  이런 것들을 기술적으로 가능하게 하려면 순서대로 HTML이라는 랭귀지가 있다. 그래서 Hypertext Markup Language라는게 있는데 그런 걸로 어떤 구조를 잡을 수가 있다. 그 다음에 웹의 디자인 물론 CSS가 그림을 그린다거나 예쁘게 표현을 한다거나 그런걸 다 해줄 수 있는건 아니지만 웹에 디자인적인 요소를 결정하는 것은 CSS이다. (3:21) 그래서 CSS라는 걸 통해서 웹 디자인을 할 수 있다. 영어로는 Cascading Style Sheets라고 한다.

  JavaScripts라는 언어가 있다. HTM, CSS, JavaScript 모두 언어이다. Javascript는 HTML, CSS보다는 동적인 제어를 할 수 있는 언어이다. 이 세 가지가 웹프론트의 역활을 달성시켜주는 역활을 하게 된다. 실제 브라우저 화면을 보면서 이 세가지가 어떻게 동작되는지 살펴보도록 하겠다. 아마존이라는 유명한 웹 쇼핑 페이지가 있다. 쇼핑을 할 수 있는 웹페이지이다. 11번가나 G마켓 이런것과 비슷하다. 아마존 웹 페이지를 서핑을 한번 해보겠다. 마우스를 갖다 대면 over하면 이런 효과도 있고 또 위에는 검색을 할 수 있는 기능들이 포함되어 있다. 카메라, 카메라에 대한 내용들이 이렇게 나오게 된다. 크롬 브라우저를 통해서 접속을 했는데 이제부터 크롬 브라우저로 확인을 해보면 된다. 크롬 브라우저를 보면 개발자 도구를 열어 볼 수 있다. 개발자 들이 개발 단계에서 확인을 위한 도구이다. 이걸 통해서 이 안에 소스코드를 한번 보겠다. HTML 코드가 보인다. 개발자 도구에 대해서는 계속 말할건데 Elements 탭이라는게 있다. Elements 패널이라고 한다. Elements 패널을 보면은 HTML 코드가 보인다. 코드가 길기 때문에 블록별로 영역별로 접어놓을 수 있다. 이게 HTML 코드이다. 여기를 열어보면 이 안에 다양한 내용들이 쭉 나온것을 알 수 있다. 이 영역을 클릭을 해보면 거기 해당하는 HTML 코드가 계층적으로 표현되어 있는 것을 확인 할 수 있다. HTML는 구조를 계층적인 형태로 표현을 하게 된다. 이 계층별로 화면에 문서를 쓴다. 1. 나는 누구인가, 1-1 나의 주소, 1-1-1 우리 집의 구조 이런 식으로 계층적으로 들어가게 되어있다.

  CSS는 어떻게 되어 있을까 이 부분을 표현하기 위한 CSS는 이렇게 되어 있다. 넒이 값은 얼마고 최대 크기는 얼마다. 이런 식으로 표현을 할 수 있다. 그리고 font-size, 글자 크기를 픽셀 단위로 나타낸다. 픽셀이라는 건 화면에 보이는 가장 작은 화소이다. 이런 것들이 픽셀 크기를 나타나는 것이다. font-size 이런 것들이 CSS의 역활이라고 하면된다. 이 코드가 실제 아마존에 쓰이는 코드다.

  Java Script는 동적인 부분을 담당한다. 소스 코드 역시 interactive 한 요소들을 많이 담고 있다. 정확히 어떤 건지 모르지만 서버로 보내는 코드이다. 서버로 보내서 성공했을 때 그 다음 후속처리, 화면에 어떤 것들을 추가로 표현한다던가 이런 것들을 표현해주고 있다. 어떤 루프를 돌면서 어떤 수행을 하고 반복적으로 그런 코드들도 있고 JavaScript는 동적인 부분을 이렇게 담당한다는 거를 우리가 알 수 있다. CSS 코드도 예를 들어서 이 스타일을 넣었다 뺐다. 마우스 오버하면 어떤 CSS 코드를 반영한다 이런 것들도 역시 JavaScript가 담당하게 된다. 간단한게 아마존 웹사이트로 이동해서 소스코드를 알아봤다. 개발자 도구에 대해서 알아보자 앞으로도 개발자 도구 여러 패널들을 이용하면서 우리가 쭉 학습을 이어나갈 예정이다. 다시 돌아가서 정리를 해보면 웹 프론트의 역활은 HTML, CSS, JavaScript이고 각각이 해야 될 거는 당연히 클라이언트가 해야 될 일을들 수행하기 위해서 존재한다고 이야기 할 수 있다. 본격적으로 알아보기 전에 이렇게 알아보도록 하겠다.