웹 심화 이해

웹 심화 이해

 

웹 서버와 데이터베이스

웹 서버(Web Server)

: 클라이언트(주로 웹 브라우저)에서 요청한 웹 페이지, 이미지, 동영상 등 웹 콘텐츠를 제공하는 서버 소프트웨어 또는 하드웨어를 의미

주로 HTTP(S) 프로토콜을 사용하여 클라이언트의 요청을 수신하고, 요청된 콘텐츠를 찾아 응답하는 역할을 수행

 

 

 

웹 서버 소프트웨어

🔸 Apache HTTP Server

: 가장 널리 사용되는 웹 서버 소프트웨어 중 하나로, 다양한 운영체제에서 동작하며 높은 유연성과 확장성을 제공

 

🔸 Nginx

: 경량화된 고성능 웹 서버로, 높은 동시 연결 처리 능력을 가지고 있으며 주로 리버스 프록시와 로드 밸런싱에 사용

 

🔸Microsoft IIS(Internet Information Services)

: Windows Server 운영체제에서 동작하는 웹 서버 소프트웨어로, Microsoft 제품과의 높은 호환성을 가짐

 

 

 

서버 설정 및 작동 원리

가상 호스트

하나의 웹 서버에서 여러 도메인을 호스팅 할 수 있도록 하는 기술 이를 통해 동일한 서버에서 다양한 웹 사이트를 운영 가능

포트

네트워크에서 서비스를 식별하는 번호 웹 서버는 기본적으로 80 포트(HTTP)와 443 포트(HTTPS)를 사용하여 클라이언트 요청을 처리

라우팅

요청 URL을 분석하여 적절한 응답을 반환하는 과정 웹 애플리케이션의 특정 경로로 요청을 전달하고, 해당 경로에 맞는 콘텐츠나 데이터를 제공하는 역할

 

 

 

웹 서버의 주요 구성 요소

Listener (수신기): 네트워크에서 들어오는 클라이언트의 요청을 수신하는 컴포넌트 지정된 포트를 열어 클라이언트의 연결을 대기 Request Handler (요청 처리기): 수신된 요청을 분석하고, 요청에 따라 필요한 작업을 결정 정적 파일을 찾거나, 동적 콘텐츠를 생성하기 위해 적절한 스크립트를 실행 Response Generator (응답 생성기): 요청 처리 결과를 바탕으로 클라이언트에게 보낼 HTTP 응답을 생성 응답은 상태 코드, 헤더, 바디(컨텐츠)로 구성 Cache (캐시): 자주 요청되는 데이터나 페이지를 저장하여 빠르게 제공할 수 있도록 함. 이는 서버의 부하를 줄이고, 응답 속도를 향상시킴 Logging (로깅): 요청 및 응답, 오류 등의 정보를 기록. 이를 통해 관리자는 서버 상태를 모니터링하고 문제 해결 가능 Security Manager (보안 관리자): 클라이언트의 요청을 검증하고, 접근 권한을 확인 HTTPS를 통해 데이터 암호화를 관리하고, 인증 및 권한 부여를 수행 Configuration Manager (설정 관리자): 서버의 설정 파일을 관리하고, 가상 호스팅, 라우팅, 포트 등의 설정을 유지

---

데이터베이스

관계형 데이터베이스(RDMBS)	NoSQL 데이터베이스
데이터를 테이블 형태로 저장 **SQL(Structured Query Language)**을 사용하여 데이터를 관리하고 쿼리함 데이터 간의 관계를 정의할 수 있으며 정규화된 데이터 구조를 갖춤 예시: MySQL, PostgreSQL, Oracle Database, Microsoft SQL Server	관계형 데이터베이스와 달리 비정형 데이터를 저장하고 처리할 수 있는 데이터베이스 스키마가 없거나 유연한 구조를 가짐 대규모 분산 시스템에서 높은 성능과 확장성을 제공 예시: MongoDB(문서 지향형), Redis(키-값 저장소), Cassandra(칼럼 페밀리 저장소), Neo4j(그래프 데이터베이스)

 

 

 

---

서버 - 클라이언트 통신

🍑API

• 소프트웨어 간의 상호작용을 가능하게 하는 인터페이스
• 웹 API는 HTTP를 통해 클라이언트와 서버 간의 데이터 교환 가능
• 예시: Twitter API, Google Maps API, OpenWeather API

API는 응용 프로그램(애플리케이션)에서 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻합니다.
주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공합니다.

---

🍑 RESTful API

• 웹 서비스 디자인 아키텍처로, 클라이언트와 서버 간의 상호작용을 정의
• RESTful API는 자원을 URI로 표현하며, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 작업을 수행
• 원칙: 무상태성, 캐시 가능성, 계층화된 시스템, 통일된 인터페이스

리소스(HTTP URI로 정의됨)를 어떻게 하겠다(HTTP Method + Payload)를 구조적으로 깔끔하게 표현하는 방법

🌟REST API의 설계 가이드 리소스에 대한 행위는 HTTP Method(POST, GET, PUT, DELETE)로 표현해야 합니다. /(슬래시)는 계층 관계를 나타낼때 사용합니다. URI 마지막 문자에 /(슬래시)를 사용하지 않습니다. URI에 _(underscore)는 사용하지 않도록 합니다. 또한 영어 대문자보다는 소문자를 씁니다. 그리고 가독성을 위해서 긴 단어는 잘 사용하지 않습니다. URI에 동사는 GET, POST와 같은 HTTP Method를 표현하기 때문이다. 동사가 아니라 명사를 사용한다. URI에 파일의 확장자(예를들어 .json , .JPGE)를 포함 시키지 않습니다.

 

 

---

🍑AJAX

• AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로 고침하지 않고 서버와 비동기적으로 데이터를 주고받는 기술
  이를 통해 사용자 경험을 개선하고, 페이지 응답 속도를 향상시킴
• 사용 예시: 채팅 애플리케이션, 실시간 검색 기능, 비동기 데이터 로딩

 

🌟자주 쓰이는 설정값

구분	정의	값
url	ajax 요청할 매핑된 url 입력	-
type	HTTP 통신의 종류를 설정. put, delete는 모든 브라우저에서 지원하는 것이 아니기 때문에 주의가 필요. 기본값(default) : get	get, post, delete, put
dataType	ajax를 통해 리턴받을 데이터의 타입을 설정. 생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정	xml, html, json,  script, jsonp, text
contentType	기본값을 가장 많이 사용 기본값(default) : application/x-www-form-urlencoded; charset=UTF-8	-
timeout	ajax가 호출된 시점부터 시간을 재서 요청이 초과될 경우 에러 등의 상태로 전환함 $.ajaxSetup()의 global timeout에 의해 override됨.	number(milli secs)
data	URL 파라미터를 통해 보낼 데이터. 종류 : Object or String or Array Object는 key:value set 객체여야 하며 value 영역이 array일 경우 jQuery가 serialize를 해줌. value 영역이 String이 아닌 경우 String으로 변환한 뒤 전송됨	-
beforeSend	ajax 실행 시 요청이 전송되기 전에 실행되는 event 입니다. 반환값을 false 또는 jqXHR.abort();로 설정하면 ajax 전송을 취소할 수 있습니다.	-
success	ajax 통신이 성공했을 때 실행되는 콜백함수	-
error	request가 실패했을 때 실행되는 콜백함수. cross-domain 요청이나 cross-domain의 jsonp 요청에는 작동하지 않는다.	-
complete	success나 error가 호출된 이후에 호출되는 콜백함수

 

💡메소드 종류

- GET : 데이터를 읽거나 검색할 때 주로 사용되는 메소드
- POST : 새로운 리소스를 생성할 때 주로 사용되는 메소드
- PUT : 리소스를 생성/업데이트 할 때 주로 사용되는 메소드
- DELTE : 지정된 리소스를 삭제할 때 주로 사용되는 메소드

 

 

 

 

---

웹 애플리케이션(Web Application)

: 웹 서버에서 동작하는 소프트웨어로, 사용자의 입력을 처리하고 동적인 웹 페이지를 생성하는 데 사용됨

주로 특정 비즈니스 로직이나 기능을 구현하며, 데이터베이스와 상호 작용하여 정보를 저장하고 불러오는 역할 수행

 

 

웹 애플리케이션의 주요 구성 요소

User Interface (사용자 인터페이스): 사용자와 상호 작용하는 화면이나 페이지 HTML, CSS, JavaScript 등을 사용하여 구성 Business Logic (비즈니스 로직): 애플리케이션의 핵심 기능과 처리 로직을 구현 사용자의 요청을 처리하고, 필요한 데이터를 조작하여 응답을 생성 Data Access Layer (데이터 접근 계층): 데이터베이스와 상호 작용하여 데이터를 저장하고 불러옴 데이터베이스 쿼리를 생성하고, 결과를 반환 Web API (웹 API): 다른 서비스나 애플리케이션과 상호 작용할 수 있도록 API를 제공 RESTful API, GraphQL, SOAP 등 Session Management (세션 관리): 사용자의 로그인 상태를 관리하고, 각 사용자의 세션을 유지 쿠키나 세션 토큰을 사용하여 구현 Error Handling (오류 처리): 애플리케이션에서 발생하는 오류를 감지하고 처리 오류 로그를 남기고, 사용자에게 적절한 메시지를 표시 Security (보안): 애플리케이션의 보안을 관리 사용자 인증, 권한 부여, 입력 검증, 데이터 암호화 등의 기능을 포함

💡웹 애플리케이션 구조를 이루는 구성 요소

- 웹 서버
- 웹 어플리케이션 서버
- 데이터베이스
- 프론트엔드와 유저 인터페이스

---

웹 서버와 웹 애플리케이션의 차이점

구분	웹 서버	웹 애플리케이션
역할	웹 콘텐츠 제공 (정적 파일, HTTP 응답 처리)	비즈니스 로직 구현, 사용자 입력 처리, 동적 콘텐츠 생성
구성 요소	Listener, Request Handler, Cache, Logging, Security	User Interface, Business Logic, Data Access Layer, API
주요 기능	HTTP 요청 수신, 응답 생성, 캐싱, 로깅, 보안	사용자 상호 작용, 데이터 처리, 비즈니스 로직, 세션 관리
사용 기술	HTTP, HTTPS, SSL/TLS, 캐싱	HTML, CSS, JavaScript, 서버 측 언어 (Python, PHP 등)
작동 방식	클라이언트 요청을 처리하고 정적/동적 콘텐츠 제공	사용자의 입력에 따라 동적으로 콘텐츠 생성, 데이터베이스와 상호 작용

 

 

 

---

웹 보안

주요 웹 보안 위협 요소

 

XSS(교차 사이트 스크립팅)

: 악의적인 스크립트를 삽입하여 사용자 정보를 탈취하거나 웹 페이지를 변조

 

CSRF(교차 사이트 요청 위조)

: 사용자가 의도하지 않은 요청을 보내게 하여 피해를 입힘

 

SQL Injection(SQL 인젝션)

: SQL 쿼리에 악의적인 코드를 삽입하여 데이터베이스를 조작하거나 데이터를 탈취

 

Click Jacking(클릭 재킹)

: 사용자가 의도하지 않은 클릭을 하도록 유도하여 악성 사이트로 이동시키거나 악성 행위를 수행하게 함

 

💡보안을 실천해보자!

비밀번호 관리 : 강력한 비밀번호 생성 규칙(대문자, 소문자, 숫자, 특수 문자 조합)과 2단계 이상의 인증
소프트웨어 업데이트 : 패치 관리와 취약점 관리를 통해 소프트웨어를 최상 상태로 유지
백업 : 정기적인 데이터 백업 전략과 백업 주기 설정 필요 (데이터 손실 시 신속하게 복구 가능)

 

 

 

---

현대 웹 기술과 트렌드

 

반응형 웹 디자인

: 반응형 디자인은 다양한 기기와 화면 크기에 적응하는 웹 디자인을 의미

미디어 쿼리, 유동형 그리드 레이아웃, 유연한 이미지

 

모바일 퍼스트 디자인

: 모바일 환경을 우선적으로 고려한 디자인 접근법

모바일 사용자가 증가함에 따라 중요성이 커짐

 

 

---

🧁프론트엔드 프레임워크

React

Facebook에서 개발한 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 사용 컴포넌트 기반 아키텍처 제공 → UI를 독립적인 컴포넌트로 나누어 관리할 수 있음 상태 관리 라이브러리(예: Redux)와 함께 사용 가능 가상 DOM을 통해 빠른 렌더링 성능 제공 예시: Facebook, Instagram, Airbnb

Angular

Google이 개발한 프론트엔드 프레임워크로, 모듈화와 양방향 데이터 바인딩을 지원 전체적인 애플리케이션 구조를 제공 TypeScript를 사용하여 더 강력한 타입 검사를 지원 Angular CLI를 이용해 효율적인 개발 환경을 제공 강력한 라우팅과 폼 처리 기능을 갖추고 있음 예시: Googld Ads, Microsoft Office Online

Vue.js

직관적이고 경량화된 프론트엔드 프레임워크로, 컴포넌트 기반 아키텍처와 반응형 데이터 바인딩 제공 학습 곡선이 낮아 빠르게 개발을 시작할 수 있으며 Vue Router와 Vuex를 통해 상태 관리와 라우팅 기능 제공 예시: Alibaba, Xiaomi, Laravel

---

🧁백엔드 프레임워크

Django

python으로 작성된 고급 웹 프레임워크로, MTV(Model-Template-View) 패턴을 따름 강력한 어드민 인터페이스와 ORM(Object-Relational Mapping)을 제공하여 데이터베이스와의 상호작용을 용이하게 함 서버사이드 렌더링으로 사용자 환경 개선 보안 기능이 내장되어 있어 안전한 웹 애플리케이션을 구축하는 데 적합 예시: Instagram, Pinterest, Mozilla

Node.js

서버 측에서 JavaScript를 실행할 수 있는 런타임 환경으로, 비동기 I/O를 통해 높은 성능을 제공 Express.js와 같은 프레임워크와 함께 사용되며, RESTful API를 쉽게 구축할 수 있음 NPM(Node Package Manage)을 통해 다양한 패키지 활용 가능 예시: LinkedIn, Netflix, Uber

Spring

Java 기반의 엔터프라이즈 애플리케이션 프레임워크로 DI(Dependency Injection)와 AOP(Aspect-Oriented Programming)를 지원 MVC(Model-View-Controller) 패턴을 제공 강력한 보안과 트랜잭션 관리 기능 제공 예시: eBay, Baeldung

Flask

Python으로 작성된 경량 웹 프레임워크로, 간단한 구조와 유연성을 제공 기본적인 웹 서버 기능을 제공하며 필요한 기능을 플러그인 형태로 추가 가능 소규모 애플리케이션이나 프로토타입에 적합 예시: LinkdedIn, Pinterest, Netflix

 

 

 

 

---

🍿백엔드 아키텍처

MVC 패턴

• MVC(Model-View-Controller) 패턴은 애플리케이션의 구조를 모델, 뷰, 컨트롤러로 나누어 관리하는 디자인 패턴
• 모델은 데이터와 비지니스 로직을 처리하며, 뷰는 사용자 인터페이스를 구성, 컨트롤러는 모델과 뷰 간의 상호작용을 조정
• 예시: Spring MVC, ASP.NET MVC

 

MTV 패턴

• MTV(Model-Template-View) 패턴은 Django에서 사용하는 패턴으로, 모델, 템플릿, 뷰로 구성
• 모델은 데이터베이스와의 상호작용을 담당하고, 템플릿은 HTML과 같은 사용자 인터페이스를 정의하며, 뷰는 요청을 처리하고 모델과 템플릿을 연결
• 예시: Django 웹 애플리케이션

 

 

---

클라우드와 컴퓨팅과 호스팅

클라우드 컴퓨팅

: 인터넷을 통해 컴퓨팅 자원(서버, 스토리지, 데이터베이스 등)을 제공하는 서비스

 

 

서버리스 아키텍처

: 개발자가 서버 인프라를 관리하지 않고 코드를 실행할 수 있는 컴퓨팅 모델

 

 

💡 서버리스의 장점
확장성 : 트래픽이 증가하면 자동으로 확장되며, 필요하지 않을 때는 리소스를 줄여 비용 절감 가능
비용 효율성 : 사용한 만큼만 비용을 지불하는 Pay-as-you-go 모델을 사용하여, 리소스를 효율적으로 사용 가능
개발 속도 향상 : 인프라 관리가 필요 없기 때문에 개발자는 비즈니스 로직 구현에 집중이 가능하여 개발 속도 향상 가능

 

 

 

 

---

미래 웹 기술

Progressive Web Apps(PWAs)

 

PWA

• 웹 애플리케이션과 모바일 애플리케이션의 장점을 결합하여 사용자가 오프라인에서도 앱을 사용할 수 있게 하고, 모바일 장치에서 네이티브 앱처럼 동작
• 서비스워커, 웹 애플리케이션 매니페스트, HTTPS를 사용
• 예시: Twitter Lite, Pinterest

서비스 워커

• 백그라운드에서 실행되는 스크립트로, 네트워크 요청을 가로채고 캐시하여 오프라인에서의 작업을 지원

웹 애플리케이션 매니페스트

• 웹 애플리케이션의 메타데이터를 포함한 JSON파일로, 홈 화면에 아이콘을 추가하고 전체 화면 모드와 같은 네이티브 앱 기능을 제공하는 데 사용

HTTPS

• 보안 강화 및 데이터 전송의 무결성을 보장하기 위해 사용

 

 

 

---

 📁추가 내용

 

Server Engine (Apache, NGINX)

 

ip주소에게
HTTP 프로토콜 + 메서드 이렇게 합쳐서
http://domain.com/path?query=abc >> 이거를 ur로 보낸다.

 

하나의 페이지에 대한 리소스를 보내주면 되는 것을 정적페이지라고 한다.
리소스는 변화하지 않는다.

 

Server Application(weg application) (python, java, django) 이거를 동적 페이지라고 한다

 

Server Computer

- Web Server Engine

- Web Application

- Database