[풀스택프로그래밍] 웹 프론트엔드 개요

웹의 이해

인터넷 vs. web

인터넷:
전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미: International Network의 약자

Web: World Wide Web
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간

• 목적: 정보를 Hypertext 형식으로 표현해 다양한 정보/문서를 연결, 제공
  옆 집에 문 두드리고 가는 것 대신 웹으로 소통 :  '이동 공간' 개념
• Hypertext = 링크
• Web page (한 장) -> Web site (한 권)
  web surfing = web browsing
• Web browser : 웹 상의 데이터를 찾거나 읽을 때 사용하는 SW

 

웹의 구조

클라이언트와 서버

• Client : 서비스 이용(요청)하는 컴퓨터
• Server : 서비스를 제공하는 컴퓨터 

프로토콜

• 클라이언트와 서버가 정보를 주고받을 때 지켜야 하는 규약
• 웹 프로토콜: HTTP(Hyper Text Transfer Protocol)
  인터넷에서 클라이언트와 서버 소통하기 위한 약속

웹 개발 직무 이해

• 프론트엔드
  웹 서비스(웹 사이트)에서 사용자(Client-side)의 GUI, 사용자와의 상호작용을 담당

HTML + CSS + Javascript

• 백엔드
  웹 서비스에서 Server-side에서 frontend에서 전달받은 데이터와 요청(웹 페이지 주소)을 내부 데이터와 연산을 활용해 처리하고 frontend에 전달

 

프론트엔드 이해

각 요소가 유기적이고 독립적으로 이루어진다. 

• HTML (Hyper Text Markup Language)
  웹 페이지 구성 요소들의 구조: Hypertext 링크 연결하는 기능
  (눈, 코, 입이 존재한다 : element = tag)
• CSS (Cascading Style Sheets)
  웹 페이지 구성 요소들 - HTML 태그 하나하나 - 꾸며준다.
  (파운데이션을 바르고 마스카라, 립을 발랐다.)
• Javascript
  웹 페이지 구성 요소들의 생명
  (눈을 껌뻑거리고 콧구멍을 벌렁거리거나 냄새를 맡을 수 있다.)

 

HTML에 CSS를 적용하는 3가지 방법

• Inline
  HTML 태그 안에 같이 작성
• Internal Style Sheet
  HTML 문서 안에 같이 작성
• External Style Sheet
  HTML과 CSS의 분리: 문서 밖에 작성하고 연결

 

Javascript

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아님

프로그램을 제어하는 스크립트 역할을 하는 언어 (드라마 대본 지문처럼)

근데 런타임 환경이 발전해서 자바스크립트만으로 프로그래밍이 가능해짐

 

HTML에 Javascript를 적용하는 3가지 방법

• inline
  상호작용이 있을 때만 사용 가능
• internal script
  Id, Class, tag로 get 할 수 있다.
• external script

 

Javascript 변수 3가지 

• var
  과거에 let과 const의 역할을 모두 하는 var만 사용했었는데 최근에는 안 씀
• let
• const
  initialize가 필요한, 변하지 않는 변수