안녕하세요. beingfree79입니다. 오늘은 블로그를 공부하면서 같이 공부하려고 패스트캠퍼스의 무료강의를 신청했는데요. 하나씩 배워가면서 중요한 내용을 이 블로그에 정리하는 후기를 공유하려고 합니다. 저는 패스트캠퍼스에 여러 가지 강의를 수강했었는데요. 이번 강의는 무료강의라서 누구나 신청하면 들을 수 있습니다.
박영웅 강사님은 질링스 B2G 개발팀의 프런트엔드 리더님이세요.
웹사이트 동작원리
처음 시간으로 웹사이트의 동작원리에 대해서 간단히 살펴보도록 하겠습니다.
웹 브라우저
브라우저에서 원하는 사이트의 주소(tistory.com)를 입력하면 클라이언트의 입력정보가 서버로 전송됩니다. 전송된 입력의 응답은 다시 웹브라우저로 돌아오면서, 웹브라우저와 서버 간 통신이 이루어집니다.
서버
서버는 클라이언트가 브라우저로 요청한 정보에 대한 처리를 담당하고, 응답을 주거나 정보의 저장이 필요한 경우 DB에 저장하는 역할을 합니다.
DB
DB는 클라이언트의 요청에 따라 서버가 저장하고자 하는 정보들, 혹은 서버가 서비스하고자 하는 데이터를 저장하는 역할을 합니다.
프런트엔드 개발에 필요한 언어
프런트엔드는 말 그대로, 사용자(유저)와 웹 브라우저 사이에 필요한 요소들을 개발한다는 것입니다. 즉, 사용자가 보는 웹 브라우저의 화면을 만든다고 생각하시면 편해요.
이때 프론트엔드 개발자는 사용자 인터페이스도 개발하지만 서버와의 통신도 어느 정도 알아야 하기 때문에, 일정 부분 서버에 대한 기술기초가 필요합니다.
" 그렇다면 프론트엔드 개발에 필요한 언어의 역할에 대해서 알아볼게요.
HTML (Hyper Text Markup Language)
홈페이지가 사람의 얼굴이라고 한다면 HTML은 얼굴의 구성 요소인 머리, 이마, 눈, 코, 입, 귀 등 큰 틀을 정의
Hyper Text Markup Language(HTML)은 우리가 보는 웹페이지의 제목, 문단, 표, 이미지 등을 표현하는 구조를 담당해요. 전체적인 템플릿으로 이해하면 편할 것 같습니다. 홈페이지의 큰 뼈대를 만들어 주는 것입니다.
Hyper Text는 특정 글자를 클릭했을 때 다른 페이지로 이동해 주는 링크와 같은 역할을 하는 것이고 Markup 언어로 이를 구현합니다.
CSS (Cascading Style Sheets)
CSS는 눈, 코, 입의 모양을 꾸미는 역할
그렇다면 눈, 코, 입과 같은 세부적인 모양은 어떻게 만들 수 있을까요? 이것은 Cascading Style Sheets(CSS)가 담당한다고 생각하시면 됩니다.
즉, CSS가 화면에 보이는 색상, 크기, 폰트 등을 지정해서 시각적으로 콘텐츠를 꾸며주는 역할을 담당하는 것입니다.
티스토리 블로그를 하다 보면 구글 애드센스, 구글 서치콘솔 등과 같은 것은 HTML에서 편집을 해주고, 홈페이지 꾸미기는 CSS를 편집해 주는 것도 이와 같은 원리입니다.
JS (JavaScript)
자바 스크립트는 눈, 코, 입을 움직이는 역할
자바 스크립트는 왜 필요할까요? CSS가 눈, 코, 입 등과 같은 정적인 콘텐츠의 모양을 꾸밀 수 있게 해 주었다면 자바 스크립트는 콘텐츠를 바꾸고, 움직이도록 하는 동적인 처리를 담당합니다.
정리하면, HTML과 CSS로 만든 얼굴의 눈, 코, 입 등이 '움직이도록' 해주는 것이 바로 자바 스크립트입니다.
개발자 도구를 통한 간단한 실습: MBTI 테스트 페이지
다음은 패스트캠퍼스의 이 강의와 연계한 실습페이지인데요. 이제 브라우저의 F12를 누르면 아래 웹사이트에서 HTML과 CSS로 이루어진 코드를 아래와 같이 볼 수 있게 됩니다.
내용을 보기만 해도 뭐 부터 해야 할지 모르겠는데요. 어떤 게 HTML이고 어떤 게 CSS인지 알아보고 어떤 효과가 있는지 알아보겠습니다.
CSS 찾아서 지우기
일단 뭐가 뭔지 모르겠으니 '찾기' 기능을 이용해서 'css'를 찾아보겠습니다. 총 4개가 찾아졌습니다.
css는 홈페이지의 눈, 코, 입의 모양 같은 것이라고 했으니 아무거나 하나 지워볼게요. 저는 마지막에 찾아진 css가 포함된 라인을 지워보겠습니다. 지운 결과 배경이 사라진 것을 볼 수 있습니다. (원상복구 하시려면 ctrl+z)
구조만 남고 모양은 사라지는 것을 확인했습니다.
링크된 페이지로 가보기: 자바 스크립트
웹 사이트의 구조는 어떨까요? 개발자 도구를 켜 놓은 상태로 화면의 '본캐 찾으러 GO!' 버튼을 눌러 다음 페이지로 가보겠습니다.
이번에는 질문과 답변 화면으로 변하고 Elements의 구성도 해당 화면에 맞게 변화하는 것을 볼 수 있습니다. 이제 JavaScript가 활약을 할 차례입니다.
사용자가 이와 같이 웹사이트의 질문에 답하게 되면, 자바 스크립트는 다음 질문으로 넘어가면서 질문과 답변을 선택할 수 있도록 해주는 '동적'인 역할을 합니다.
마무리
오늘은 간단한 웹사이트의 동작원리를 개발자 모드를 통해서 알아봤습니다. 웹 사이트에서 주어진 질문을 던지고 질문에 대한 답변을 기억하고, 다음 질문을 던지고, 답변을 기억하는 등의 행동을 반복하는데 HTML, CSS, JS가 모두 있어야 가능한 것입니다.
그럼 다음 시간에 공부를 더해서 공유하도록 할게요.