웹 기본 #1

1. 프론트엔드 개발이란?

• 프론트엔드 개발 : HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하는 것 + 그것으로 사용자와 상호 작용하는 것
• 보안을 요구하는 데이터나 기타 비즈니스 로직 등은 백엔드에서 개발함

👉🏻 풀스택 개발 : GUI 프론트엔드부터 데이터베이스 백엔드 등 모든 소프트웨어 스택을 개발하는 것

2. 웹사이트에서 동작하는 언어

(출처 : https://heropy.blog/2019/04/24/html-css-starter/)

1) HTML(Hyper Text Markup Language)

• Hyper Text : 참조를 통해 현재 문서(페이지)에서 다른 문서로 즉시 접근(이동)할 수 있는 텍스트, 일반적으로 알고 있는 링크 버튼
  -> 즉, HTML은 Hyper Text를 Markup 할 수 있는 언어
• 페이지의 제목, 문단, 표, 이미지, 동영상 등 ⭐웹의 구조⭐를 담당하는 기획자 역할
  -> 눈, 코, 입 각각을 그려내는 것

2) CSS(Cascading Style Sheets)

• 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 ⭐시각적인 표현(정적)⭐을 담당하는 디자이너 역할
  -> 얼굴을 동그랗게 만들어 눈, 코, 입의 위치를 지정

3) JS(JavaScript)

• 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 ⭐동적 처리⭐ 담당하는 개발자 역할
  -> 버튼 클릭을 통해 눈, 코, 입을 움직일 수 있게 해 줌

3. 웹 앱의 동작 원리

• 웹 앱 = Web application = Web page
• 동작 원리 : 사용자 컴퓨터(브라우저)가 통신 프로토콜 따라 주소창에 페이지 주소 입력 -> 서버에 최초 요청(Request) -> 서버가 최초 응답(Response) -> 추가 요청 -> 추가 응답
  ⭐ 이 때 최초 응답은 HTML, 추가 요청 및 응답은 CSS, JS, JPG 등
• 웹 사이트를 개발할 우리의 컴퓨터 환경은 ‘로컬 개발 환경’ -> 실제로 사용자 접속 가능하게 하려면 서버에 업로드 + 주소 설정 필요

4. 웹 표준과 브라우저

• 웹 표준 : 웹에서 사용되는 표준 기술이나 규칙

  • 대표적인 웹표준기술 : HTML, CSS, JS
  • W3C에서 초안->후보권고안->제안권고안->권고안 거쳐 제정

• 크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험을 줄 수 있도록 제작하는 기술, 방법 (공급업체에 따라 동작 내용이 다를 수 있기 때문에) -> 크로스 브라우징 이슈는 사라져가는 추세

• 브라우저의 기본 인터페이스

  • 창=윈도우 : 영역 전체
  • 탭 :창 내부의 각 페이지를 구분하는 영역
  • 주소창(Address bar)
  • 뷰포트(웹 페이지 출력=렌더링 영역)

💬 비즈니스 로직 : 웹사이트가 동작하는데 필요한 핵심 데이터 처리, 즉 데이터베이스와 사용자 인터페이스 사이의 정보 교환 처리를 수행하는 알고리즘 
💬 통신 프로토콜(통신 규약) : 컴퓨터나 원거리 통신 장비 사이에서 메시지를 주고 받는 양식 및 규칙의 체계 (대표적으로 HTTP, HTTPS, FTP, SSL)
💬 렌더링(Rendering) : 브라우저의 뷰포트에 웹사이트를 출력하는 행위