본문 바로가기
타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js)/TIL

웹 풀사이클 데브코스 TIL 6일차 - 웹의 이해,구조,직무

by 슈크림 붕어빵 2023. 11. 21.

인터넷과 웹의 정의

인터넷: 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 international network의 약자이다.

인터넷

웹(www, w3,web): world wide web이라는 뜻으로, 인터넷에 연결된 컴퓨터를 통해서 사람들이 정보를 공유할 수 있는 공간을 의미한다.

 

웹의 시작

1980년대 어느 날, 스위스의 한 유럽 입자 물리연구소의 컴퓨터 과학자 팀 버너스-리에 의해 탄생했다.

연구원들 간 신속한 정보 교환을 위해 고안되었다.

 

 

정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트를 따라 이동하며 다양한 정보/문서들을 연결 제공합니다.

하이퍼텍스트: 단순히 글자가 아닌 그 이상의 기능을 가진 텍스트(주로 링크, 참조)

 

웹페이지vs 웹사이트

웹페이지가 여러개 모인 것을 웹사이트라고 할 수 있다. 

웹 페이지 링크를 타고 다른 웹 페이지로 이동하는 것을 웹서핑을 한다. 또는 웹 브라우징을 한다고 한다.

 

웹 브라우저란?

어떤 것을 찾거나 읽을 때 사용하는 것 ex) chrome, 인터넷 익스플로어

 

웹의 구조

클라이언트와 서버로 구성된다. 

말 그대로 클라이언트는 고객이고 서버에게 요청을 한다고 보면 된다. 

 

클라이언트: 서비스를 이용하는 컴퓨터
서버: 서비스를 제공하는 컴퓨터

 

서버와 웹 브라우저는 어떻게 통신할까? 프로토콜을 통해 통신한다.

프로토콜은 서로 정보를 주고 받을 때 지켜야할 약속이며 서로 약속을 지며 통신해야한다.

 

인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP를 사용하여 데이터를 주고받는다.

 

웹 개발 직무

 

인터넷이라는 통신망보다는, 양쪽에서 개발을 하는 직무이다.

 

클라이언트에서 개발하는 직무-> 프론트엔트

웹 서비스에서 사용자 측면의 그래픽 사용자 인터페이스(화면)을 구현한다. 이 화면에서 상호작용(글자입력, 버튼클릭, 화면 출력 등)을 담당한다.

 

서버측에서 개발하는 직무 -> 백엔드

웹 서비스에서 사용자의 눈에 보이지 않는 서버측에서 프론트엔드에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 프론트엔드에 결과를 전달한다. 즉, 인터넷이 전해준 요청을 처리하고 대응해주는 것 

 

예시) 로그인

프론트엔드
id와 pw를 받아 백엔드로 넘겨줌



백엔드
id와 pw검사
-> 존재하지 로그인 실패 반환
-> 존재하면 로그인 성공 반환



프론트엔드
반환된 내용을 화면으로 보여줌

 

 

HTML(Hyper Text Markup Language)

  • 웹페이지 구성 요소들의 구조
  • 하이퍼텍스트 즉, 웹 페이지를 연결하는 기능을 가진 텍스트이자 웹 페이지의 구조를 명시하는 언어
  • <태그>를 이용하여 구현한다. 이는 웹 페이지 구성요소 역할을 한다.
  • html 파일 기본 구조
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
   
  </body>
</html>

! + tab 또는 enter 로 만들 수 있다!

CSS

  • 웹 페이지 구성 요소들을 꾸민다.

javascript

  • 웹페이지 구성 요소들에게 생명력을 준다.
  • 화면 내에서 변화를 줄 수 있다.

 

IDE

  • intergrated development enviroment(통합 개발환경)
  • ex) vs code, eclipse