간단 웹(Web)

1. 웹(Web)의 개요

1-1. 웹이란 무엇인가?

 - 웹(World Wide Web)은 인터넷을 기반으로 동작하는 정보 공유 시스템이다.

  *  웹은 하이퍼텍스트(Hypertext)라는 개념을 사용하여 서로 다른 웹 페이지나 자료들을 연결한다.

  *  웹 페이지들은 HTML(HyperText Markup Language)로 작성되며, 웹 브라우저를 통해 접근하고 볼 수 있다.

  *  웹은 서버와 클라이언트 모델을 사용한다.

  *  웹의 구조는 전 세계 사람들이 쉽게 정보를 공유하고 접근할 수 있게 해주며, 디지털 정보의 글로벌 네트워크로 작용한다.

 

1-2. 웹 브라우저?

 - 웹 탐색의 핵심 소프트웨어이다.

 - 사용자가 특정 웹 페이지나 자원에 접근하려 하면, 웹 브라우저는 HTTP(HyperText Transfer Protocol)를 
사용해 웹 서버에 정보를 요청한다.

 - 서버는 이 요청을 받아 처리하고, 요청된 웹 페이지나 자원을 웹 브라우저로 전송한다.

 - 웹 브라우저는 전송된 데이터를 해석하여 사용자에게 시각적으로 표시한다.

 - 대표적 웹 브라우저 : google의 Chrome, Mozilla의 Firefox, Mac os의 Safari Microsoft의 Edge, Explorer, 네이버의 웨일 등이 있다.

 

1-2-1. 서버(Server)와 클라이언트(Client)?

 - 웹 페이지를 요청(Request)하는 측(컴퓨터, 웹브라우저)을 클라이언트라고 하며, 요청에 따라 웹페이지를 전송하는 응답(Response)를 하는 측(컴퓨터)를 서버라고 한다.

 

1-2-1-1. 클라이언트(Client)?

 - 웹 페이지나 다른 웹 리소스를 요청(Request)하는 역할을 한다.

 - 일반적으로 사용자가 사용하는 컴퓨터나 모바일 장치에 설치된 웹 브라우저를 의미한다.

 

1-2-1-2. 서버(Server)?

 - 이러한 요청을 받고 처리한 후 적절한 응답(Response)을 제공하는 역할을 한다.

 - 웹 페이지, 이미지, 비디오, 스크립트 등의 웹 리소스를 저장하고 관리하는 컴퓨터 시스템이다.

1-2-1-3. 과정?

 - HTTP 프로토콜을 기반으로 이루어지며, 웹의 기본적인 작동 원리를 구성한다.

 - 클라이언트와 서버 사이의 이러한 상호작용은 웹을 통해 정보가 교환되는 방식의 핵심이며, 
전 세계 사람들이 웹을 통해 정보를 검색하고 공유하는 데 필수적인 요소이다.

 

1-3. 쿠키(Cookie)와 세션(Session)?

 - 쿠키(Cookie)와 세션(Session)은 웹사이트가 사용자의 정보를 저장하고 상태를 유지하는데 사용되는 중요한 기술이다.

 

1-3-1. 쿠키(Cookie)?

 - 쿠키는 사용자의 컴퓨터에 작은 데이터 조각을 저장하는 파일

 - 웹사이트 방문 시 서버가 사용자의 웹 브라우저에 전송하는 정보로, 브라우저는 이를 컴퓨터에 저장

 - 서버 자원을 사용하지 않고, 클라이언트 측에서 관리됩니다.

 

1-3-2. 세션(Session)?

 - 세션은 서버가 각 클라이언트(브라우저)에 대해 유지하는 서버 측 정보이다.

 - 클라이언트는 세션 ID를 받게 되며, 이 ID를 통해 서버는 다양한 요청 간에 동일한 사용자임을 식별할 수 있다.

 

1-4. HTTP (HyperText Transfer Protocol)?

 - 웹에서 데이터를 주고받는 규약(프로토콜)이다.

 - 클라이언트와 서버 간의 통신 방식을 정의하며, 다양한 HTTP 메서드를 사용하여 서로 다른 종류의 요청한다.

   * GET : 데이터 조회 요청 (예: 웹 페이지 접속, 정보 검색)

   * POST : 데이터 생성 요청 (예: 회원가입, 글 작성)

   * PUT : 데이터 수정 요청 (예: 회원 정보 수정)

   * DELETE: 데이터 삭제 요청 (예: 회원 정보 삭제)

 

1-4-2. IP (Internet Protocol)?

 - IP 주소는 인터넷상의 각 기기(컴퓨터, 스마트폰, 서버 등)에 할당된 고유한 숫자 주소이다.

 - 이 주소를 통해 기기들이 서로를 찾고 통신합니다.

 - IP 주소는 숫자로 이루어져 있어 사람이 기억하기 어려울 수 있다.

1-4-3. 도메인 (Domain)?

 - 인터넷 상의 주소를 사람이 읽고 기억하기 쉬운 문자열로 표현한 것이다.

 - 도메인을 통해 복잡한 숫자로 이루어진 IP 주소를 직접 기억하거나 입력할 필요 없이 웹 사이트에 접근할 수 있다.

1-4-4. DNS (Domain Name System)?

 - 도메인 이름과 IP 주소를 서로 연결해주는 시스템이다.

 - 인터넷상의 전화번호부와 같은 역할을 하며, 도메인 이름을 입력했을 때 해당 서버의 IP 주소로 연결해준다.

 - DNS 서버는 도메인 이름에 대한 요청을 받아 IP 주소로 변환해주는 역할을 한다.

 

---------------------------------------------------------------------------------------------------------------------------------------------------------

2. 프론트엔드(Front-end)

사용자에게 직관적이고 쾌적한 사용자 경험을 제공하는 웹 페이지를 만드는 데 중점을 둔다.

이들은 디자인과 사용성, 접근성을 고려하여 사용자가 웹사이트를 효율적이고 즐겁게 사용할 수 있도록 한다.

2-1. 프론트엔드 개발자의 역할?

 - 웹사이트나 애플리케이션의 사용자 인터페이스를 개발하고 디자인하는 것이다.

 - 사용자가 직접 보고 상호작용하는 웹 페이지의 모든 시각적 요소를 만들고 조정하는 일을 한다.

 - 핵심 기술은 HTML, CSS, 그리고 JavaScript이다.

 

2-1-1. HTML?

 - 웹 페이지의 구조를 만듭니다. 텍스트, 이미지, 링크 등 웹 페이지의 주요 콘텐츠를 정의하며,

이를 '뼈대'라고 할 수 있다.

 

2-1-2. CSS?

 - 웹 페이지에 스타일을 추가합니다. 글자 폰트, 크기, 색상, 레이아웃 등의 시각적 요소를 조정해

'살과 옷'을 입혀주는 역할을 한다.

 

2-1-3. JavaScript?

 -  웹 페이지에 동적인 기능을 부여합니다. 사용자의 상호작용에 반응하여

웹 페이지가 '움직이고' 변화하도록 만드는 역할을 한다.

 

2-2. 마크업(Markup)?

 - 문서의 구조와 내용을 정의하는 데 사용되는 언어다.

 - 태그나 기호를 사용하여 문서 내의 특정 요소를 구분하고, 그 구조와 표현 방식을 명시한다.

 - 웹 개발에서 가장 대표적인 마크업 언어는 HTML(HyperText Markup Language)이다.

 - HTML은 웹 페이지의 구조를 정의하기 위해 사용되며, 다양한 태그를 통해

텍스트, 이미지, 링크, 표 등의 요소를 문서에 배치

 

2-2-1. 마크업 언어 특징?

 - 구조화된 표현: 문서의 구조를 명확하게 표현하며, 이는 문서의 의미와 내용을 더 쉽게 이해할 수 있게 한다.

 - 플랫폼 독립성: 마크업 언어로 작성된 문서는 다양한 플랫폼과 시스템에서 호환될 수 있다.

 - 웹 접근성 및 표준화: 웹에서는 HTML 마크업을 통해 다양한 브라우저와 장치에서 문서가 일관되게 표시되도록 한다.

 

2-2-2. HTML(Hyper Text Markup Language)?

 - 웹 페이지의 구조와 콘텐츠를 정의하기 위해 사용된다. 이는 웹 페이지의 뼈대를 이루는 역할을 한다.

 

2-2-2-1. HTML 특징?

 - HTML은 웹 브라우저에 의해 해석되어 사용자에게 시각적으로 표시되는 웹 페이지를 만드는 데 사용된다.

 - 표준화된 태그 세트를 사용하여 텍스트, 이미지, 링크, 폼 등 다양한 웹 콘텐츠를 구성한다.

 -  웹 페이지의 레이아웃과 스타일은 HTML과 함께 CSS를 사용하여 구현한다.

 

2-2-3. XML(eXtensible Markup Language)?

 - 데이터의 저장과 전송을 목적으로 한다. 이는 데이터의 구조화와 교환을 용이하게 하는 역할을 한다.

 

2-2-3-1. XML 특징?

 - XML은 데이터를 표현하고 전송하는 데 주로 사용되며, 웹 브라우저에서 시각적으로 표시하기 위한 것이 아니다.

 -  태그는 사용자가 자유롭게 정의할 수 있으며, 이를 통해 데이터의 구조와 의미를 명확히 나타낼 수 있다.

 -  XML은 데이터를 기계와 사람이 모두 이해할 수 있는 형식으로 표현하기 위해 사용되며,

웹 서비스나 데이터 교환 등에 널리 사용된다.

 -  XML은 스키마나 DTD를 사용하여 데이터 구조의 유효성을 검사할 수 있다.

 

2-3. CSS(Cascading Style Sheets)?

 - 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어이다.

 -  HTML로 작성된 문서의 외관을 꾸며주는 역할을 하며, 웹 페이지의 시각적 표현을 개선하기 위해 사용된다.

 - CSS 문법은 선택자(Selector), 속성(Property), 값(Value)의 조합으로 이루어진다.

 

2-3-1. CSS 사용 방법?

 1) 외부 스타일 시트 (External Style Sheet) : 별도의 CSS 파일을 만들고 HTML 문서에 연결하는 방식이다.

스타일 규칙을 별도의 파일에 저장함으로써 유지보수가 쉬워지고, 여러 페이지에 걸쳐 일관된 스타일을

적용할 수 있게 해준다.

 2) 내부 스타일 시트 (Internal Style Sheet) : HTML 문서의 <head> 태그 내에 <style> 태그를 사용하여

스타일을 정의하는 방식이다. 그리고 HTML 문서가 하나일 때 유용하며, CSS 코드가 길지 않을 때 적합하다.

 3) 인라인 스타일 (Inline Style) : HTML 태그의 style 속성을 사용하여 직접 스타일을 적용하는 방식이다.

소규모의 스타일 변경에 유용하지만, 스타일과 내용의 분리 원칙에 어긋나며, 유지보수가 어렵다는 단점이 있다.

 

2-3-2. CSS 적용 우선 순위?

1. !important를 사용한 속성
2. 인라인 스타일
3. 내부 스타일 시트
4. 외부 스타일 시트
5. 브라우저 기본 스타일

2-4. Javascript?

 - 웹 페이지에 동적이고 상호작용적인 요소를 추가하는데 사용되는 프로그래밍 언어이다.

 - 클라이언트 측 스크립팅 언어로 개발되었으나, 현재는 서버 측 개발에도 널리 사용된다.

 

2-4-1. Javascript 주요 기능?

 - 웹 페이지의 동적 처리 : 사용자의 상호작용에 응답하여 웹 페이지의 콘텐츠와 레이아웃을 동적으로 변경한다.

 - 사용자 경험 개선 : 애니메이션, 폼 검증, 데이터 로드 등을 통해 사용자 경험이 향상된다.

 - 클라이언트 측과 서버 측 모두에서 사용 : 웹 브라우저(클라이언트 측) 및 Node.js(서버 측) 등에서 실행된다.

 

2-4-2. Javascript 엔진?

 - 브라우저에 내장 : 각 브라우저는 고유한 자바스크립트 엔진을 가지고 있다

(예: V8 in Chrome and Opera, SpiderMonkey in Firefox).

 - 성능 최적화 : 현대의 엔진은 JIT 컴파일을 사용하여 자바스크립트 코드를 빠르게 실행한다.

 

2-4-3. 클라이언트 측 Javascript?

 - 브라우저 상호작용 : 페이지의 요소를 조작하고, 이벤트에 반응하며, 사용자의 행동에 따라 페이지를 업데이트한다.

 - DOM 조작 : 문서 객체 모델(DOM)을 통해 HTML/CSS를 동적으로 변경한다.

 - 보안 제한 : 브라우저는 자바스크립트가 사용자의 시스템에 무단으로 접근하는 것을 방지하기 위해 보안 제한을 두고 있다.

 

2-4-4. 서버 측 Javascript?

 - Node.js : 자바스크립트를 사용하여 서버 측 로직을 구현한다.

 - 데이터베이스 작업 : 데이터베이스와의 상호작용을 통해 데이터를 저장하고 검색한다.

 - API 개발 : RESTful API 등 서버 측 애플리케이션을 개발하는 데 사용된다.

 

2-4-4. Javascript 활용?

 - 사용 범위가 웹 브라우저를 넘어 모바일 애플리케이션, 데스크톱 애플리케이션, 게임 개발 등 다양한 분야로 확장되고 있다.

 - 다양한 라이브러리와 프레임워크(예: React, Vue, Angular)를 통해 개발자들은 더욱 강력하고 효율적인

웹 애플리케이션을 구축할 수 있다.

 - 웹 개발에 있어 필수적인 언어로 자리 잡았으며, 지속적으로 발전하고 있는 동적인 프로그래밍 언어이다.

 

3. 백엔드(Back-end)

웹사이트나 애플리케이션의 서버 측면에서 이루어지는 개발 작업을 말한다.

이는 사용자가 직접 볼 수 없는 백그라운드에서 이루어지는 작업으로, 웹 애플리케이션의 핵심 기능을 담당한다.

3-1. 백엔드 개발자의 역할?

 - 서버, 데이터베이스, 애플리케이션 로직을 개발하고 관리하는 역할을 한다.

 - 웹사이트나 애플리케이션의 백그라운드에서 작동하는 기능을 구현하여 사용자가

웹사이트의 프론트엔드에서 보는 내용을 가능하게 한다.

 - 시스템의 안정성과 성능을 보장하며, 데이터 보안과 서버의 효율적인 운영을 담당한다.

 

3-2. 백엔드 개발의 중요성?

 - 기능성 지원 : 백엔드는 웹사이트의 기능을 지원하는 역할을 하며, 프론트엔드에서 이루어지는

사용자 상호작용을 가능하게 한다.

 - 데이터 관리 : 사용자 데이터, 사이트 설정, 기타 중요 정보를 저장, 관리, 처리하는 역할을 담당한다.

 

3-3. 백엔드 개발의 구성 요소?

 1) 서버: 요청을 처리하고 응답을 생성하는 시스템. 웹 애플리케이션의 로직과 처리 기능을 담당한다.

 2) 데이터베이스: 데이터를 안전하게 저장하고 검색하는 시스템. 웹 애플리케이션의 데이터 무결성과

지속성을 담당한다.

 3) API (Application Programming Interface): 애플리케이션 간의 상호작용을 가능하게 하는 인터페이스.

다른 시스템과의 연결 및 통신을 담당한다.