Web

[Web 부트캠프 2023] 1. 웹이란?

시고_ 2023. 1. 2. 17:16

강의: The Web Developer 부트캠프 2023

플랫폼: Udemy

인터넷이란?

연결된 컴퓨터들의 묶음

네트워크들의 글로벌 네트워크, 모든 것을 가능케하는 인프라 (해저 케이블, 광케이블, 와이파이 등)

 

웹이란?

월드 와이드 웹은 인터넷을 통해 문서 등을 공유할 수 있는 시스템, 그리고 그것은 url로 구분된다.

웹은 인터넷을 통해 리소스를 공유하게 하는 정보 시스템 - http를 기반으로 하며, 리소스는 url로 구분됨

프로토콜: 특정 의사소통 이루어지는 방식에 대한 일련의 표준화된 규칙

브라우저는 정보를 웹 페이지에 보기 좋게 표시하는 역할

서버와 클라이언트(서버에 요청하는 컴퓨터 또는 브라우저)가 요청과 응답으로 작동한다.

 

요청/응답 주기

브라우저 역할은 요청을 하고 서버나 http 응답이 보낸 코드(지침)를 가져와 어떤 식으로든 렌더링하는 것 - 웹 페이지 구축

브라우저의 주 작업은 지침을 받아 인간이 알아볼 수 있게 하는 것이다. - 그 지침은 html css js를 모두 포함함(브라우저가 이해할 수 있는 웹페이지 구성의 세가지 핵심 기술)

구글에서 뭔가 검색할 때 검색 버튼 누르면 http 요청, 요청을 구글 서버에 전달되고 서버중 하나가 들어오는 요청을 받아 들어오는 요청과 요청받은 url 기준으로 무엇을 요청하는지 알아냄, 그리고 html css js로 다시 http 응답 - 이후 브라우저는 그걸로 웹 페이지 구축하여 다시 표시함

 

프론트엔드와 백엔드

서버가 http 응답을 할 때 무엇을 응답할지 파악하기 위해 서버 자체에서 코드를 실행하며, 요청자가 누구인지, 원하는게 뭔지, 권한이 있는지, 알아내려면 서버 내에서 많은 로직이 필요하다. - 백엔드

이후 서버는 html css js 형태로 다시 응답한다. - 다시 보내와서 브라우저에서 실행되는 코드 = 클라이언트 혹은 프론트엔드 코드

서버 측 언어는 여러 가지 , 웹 구성 도구는 html css js 단 세가지다.

프론트 개발은 브라우저에서 실행되는 도구에 중점, 백 서버에서 실행되는 것에 초점을 둔다.

마지막 조각은 응답이 다시 전송되고 브라우저가 그걸 다시 받는 것이다.

 

HTML/CSS/JavaScript의 역할

브라우저가 이해하는 유일한 기술들

춤추는 보라색 공룡 - 춤추는(동사 - js), 보라색(형용사 - css), 공룡(명사 - html)

1. html - 페이지의 내용을 설명함

2. css - html 요소, 페이지의 내용 설명을 보조함 - 글꼴 변경, 음영 추가 등

3. js - 페이지가 작동하는 기능, 로직

 

HTML

페이지의 기본 요소, 내용 - 동작이나 상호 작용 존재하지 않음, 물건이나 콘텐츠 보여줌

페이지의 본질 -못생겼지만 기반이 되는 구조

 

CSS

해당 콘텐츠 설명 - 색상 글꼴 배경 색상, 가운데 정렬 등 설정

페이지의 구조가 어떻게 보여야 하는지를 설명

 

JavaScript

웹 콘텐츠들의 동작 - 디스플레이 업데이트, 숫자 계산, 실시간 알림 팝업, 채팅, 자동 완성,  검색... 등 상호작용

웹페이지의 실질적인 논리, 동작을 구축