[school] [WebDB_study] 웹 DB week2, week3 정리

2025-03-20 5 분 소요

웹 DB 프로그래밍 과목

1. 웹, DB, 프로그래밍

웹, DB, 프로그래밍이 합쳐져야 웹 사이트를 구축하는 것이 가능
웹 플랫폼의 구성요소

2. 웹 서버와 웹 어플리케이션 서버

stand alone HTML 실행

단독 컴퓨터 안에서만 실행, html 내용은 공유될 수 없음, 인터넷 연결 없이도 실행 가능

Clinet/Server 환경에서 HTML 실행

웹서버 프로그램을 설치하여 Server 구성, 여러 사용자가 웹 페이지 공유, 인터넷 연결이 필요

웹 서버: 웹 서버 프로그램이 설치 되어 있는 컴퓨터
- 한 컴퓨터에 웹 서버 프로그램과 DB 프로그램이 모두 설치되어 있다면 그 컴퓨터는 웹 서버이면서 DB 서버가 된다.
- 서버라는 개념은 소프트웨어적인 개념

웹 데이터베이스 이전

브라우저가 웹 서버로 HTTP를 요청하면 웹 서버는 홈 디렉토리에 있는 정적 파일을 찾아 응답한다.

파일 저장소(홈디렉토리)는 HTML, CSS, JavaScript와 같은 정적 파일을 관리하며, 요청에 따라 데이터를 제공한다.
- 요청: 브라우저에서 보고자 하는 웹 페이지(html 문서)를 요청하는 것.
- 요청 정보는 요청 대상(주소or도메인), 요청 종류(URL,파일명)을 포함한다.
웹 서버 기능
1. 도메인과 ip의 매핑: DNS(Domain Name Server)
  - 웹 서버도 이러한 기능이 있지만 별도의 서비스 업체가 있음
2. ip와 홈디렉토리 매핑
3. URL에 있는 파일 찾기
4. 응답하기
홈 디렉토리: 웹서버가 요청된 파일을 찾는 기본 디렉토리, 여기에서만 파일을 찾음

웹 데이터베이스 시대- 클라이언트/서버

브라우저가 웹 서버로 HTTP를 요청하면 웹 서버는 요청된 파일이 정적일 경우 홈 디렉토리에 있는 정적 파일을 찾아 응답한다. 동적일 경우 WAS로 전달한다.

WAS는 필요한 경우 DB와 통신해 데이터를 가져오고 동적 HTML 페이지를 생성한다. 웹 서버가 응답을 브라우저에 반환하고 브라우저는 이를 렌더링하여 화면에 표시한다.

WAS란?
- 인터넷 상에서 HTTP프로토콜을 통해 사용자 컴퓨터나 장치에 애플리케이션을 수행해 주는 미들웨어
- 주로 동적 서버 컨텐츠를 수행하는 것으로 일반적인 웹서버와 구별됨, 주로 데이터베이스 서버와 같이 수행됨
- 웹서버로는 처리할 수 없는 데이터베이스 조회나 다양한 로직 처리가 필요한 동적 컨텐츠를 제공함
- 초창기 WAS 기능: cgi 프로그램
WAS와 연계된 언어
- PHP, JSP, ASP, Python, Node.js, Django의 template 언어
대표적 WAS
- Tomcat, Web sphere, Web Logic, Django
대표적 Web Server
- Apach, IIS, Nginx
WAS에 웹 서버가 포함된 경우도 있지만 대규모 웹 서비스를 제공한다면 WAS와 웹 서버를 별도로 사용

웹DB 프로그래밍- MVC(Model View Controller) 구조가 가능

브라우저가 HTTP 요청을 생성하여 인터넷 망을 통해 웹 서버로 전달하면 웹 서버가 정적인 콘텐츠 (HTML, CSS, JS파일)는 직접 제공하고, 동적인 요청은 WAS로 전달한다.

WAS는 요청에 따라 비즈니스 로직을 처리하고, MVC구조를 기반으로 데이터베이스와 상호작용하여 결과를 생성한다.

WAS 수행 절차
1. URL라우팅 및 비즈니스 로직 호출
  - 클라이언트 요청 URL을 분석하여 적절한 컨트롤러에 연결
  - 컨트롤러는 비즈니스 로직을 실행함
2. 데이터베이스 요청 (CRUD작업)
  - 비즈니스 로직에서 필요한 데이터를 가져오기 위해 데이터베이스에 CRUD 작업을 요청
3. 데이터베이스 응답
  - 데이터베이스가 요청된 작업을 처리하고 결과를 반환함
4. HTML 파일 준비 (View생성)
  - 컨트롤러는 데이터베이스에서 받은 데이터를 활용해 HTML 템플릿(View)을 완성시킴
  - 예: 사용자 정보나 상품 목록 데이터를 HTML에 삽입해 동적인 웹 페이지를 생성
5. 웹 서버로 HTML 전송
  - 완성된 HTML 파일이 웹 서버로 전달, 최종적으로 클라이언트(브라우저)에게 응답으로 반환
    
    클라이언트가 URL 요청 -> 웹 서버가 HTTP 요청 수신.
    
    웹 서버가 동적 요청을 WAS로 전달
    
    WAS에서 URL라우팅 -> 컨트롤러가 비즈니스 로직 실행 -> 데이터베이스와 상호작용
    
    데이터베이스 응답 -> View에서 HTML생성 -> 응답 반환
    
    브라우저가 HTMl 렌더링 -> 사용자에게 표시
데이터베이스(Model)
- 애플리케이션의 핵심 데이터를 저장하고 관리하는 역할
- 비즈니스 로직에서 필요한 데이터를 제공, CRUD작업(읽기, 쓰기, 수정, 삭제)을 처리
View(HTML 템플릿)
- 클라이언트에게 표시될 화면(HTML)을 생성하는 역할
- 컨트롤러가 제공한 데이터를 기반으로 동장 HTML 페이지 생성, 이 페이지가 브라우저에 렌더링 됨

Node.js

1. 특징

서버의 기능
런타임 기능 특정언어로 만든 프로그램들을 실행할 수 있는 환경, 자바스트립트 실행기
V8과 더불어 libuv 라는 라이브러리 사용
이벤트 기반 이벤트 리스너에 콜백 함수 등록, 이벤트 루프 사용
- 이벤트 루프 : 이벤트 발생 시 호출할 콜백 함수들을 관리하고, 호출된 콜백 함수의 실행 순서를 결정하는 역할을 담당.
```
function run() {
  console.log("3초 후 실행");
}

console.log("시작");
setTimeout(run, 3000);
console.log("끝");
```
  setTimeout() 시각화 과정
  1. 호출 스택에 setTimeout()이 추가됨
  2. setTimeout() 실행 시 타이머를 설정하고 콜백 함수 (run)를 백그라운드로 보냄
  3. 타이머는 3초 동안 백그라운드에서 대기
  4. setTimeout()은 호출 스택에서 제거됨
  5. run이 태스크 큐로 이동
  6. 호출 스택이 비어있는지 확인
  7. 비어있으면 태스크 큐에서 대기중인 run을 호출 스택으로 이동시킴
  8. 콘솔에 ‘3초 후 실행’이 출력됨
  9. run 함수가 호출 스택에서 제거됨
  이벤트 루프 : 호출 스택이 비어있는지 확인함, 호출스택이 비어있으면 태스크 큐에서 하나씩 호출스택으로 가져와 실행
논 블로킹
- 논블로킹: 이전 작업이 완료될 때 까지 대기하지 않고 다음 작업 수행. I/O와 JS코드는 동시 실행 가능
- 블로킹: 이전 작업이 끝나야만 다음 작업을 수행. JS코드는 동시에 실행 불가
싱글 스레드
- 프로세스: 운영체제에서 할당하는 작업의 단위. 노드나 웹 브라우저 같은 프로그램은 개별적인 프로세스
- 스레드: 프로세스 내에서 실행되는 흐름의 단위. 하나의 프로세스가 스레드 여러개를 생성해 여러작업을 동시해 처리 가능.
  
  스레드는 부모 프로세스의 자원을 공유.
  
  같은 주소의 메모리에 접근 가능하므로 데이터를 공유.
- node는 싱글 스레드: 엄밀히 말하면 멀티 스레드
  
  node실행 -> 프로세스 생성 -> 스레드 여러개 생성 -> 프로그래머가 직접 제어할 수 있는 스레드는 1개뿐
- 요청이 여러 개 들어오면 한 번에 하나씩 요청을 처리하지만 블로킹이 발생할 것 같은 경우에는 논 블로킹 방법으로 대기 시작 시간 절약
스레드풀: 노드가 특정 동작을 수행할 때 스스로 멀티 스레드를 사용. 대표적인 예) 암호화, 파일 입출력, 압축

2. 서버로서의 노드

장점

멀티스레드 방식에 비해 적은 컴퓨터 자원사용
I/O작업이 많은 서버로 적합
멀티스레드 방식보다 쉬움
웹 서버가 내장되어 있음
자바스크립트를 사용함
JSON형식과 쉽게 호환됨

단점

기본적으로 싱글 스레드라서 CPU코어를 하나만 사용
CPU작업이 많은 서버로는 부적합
하나뿐인 스레드가 멈추지 않도록 관리 필요
서버 규모가 커지면 관리 어려움
어중간한 성능

3. 서버 외의 노드

웹, 모바일, 애플리케이션 개발에 사용
노드 기반으로 돌아가는 대표적 웹 프레임 워크
1. 앵귤러
2. 리액트
3. 리액트 네이티브
4. 뷰

알아두어야 할 자바스크립트

1. 구조 분해 할당

var count = candyMachine.status.count;

위 코드를 아래와 같이 쓸 수 있다.

const {
  getCandy,
  status: { count },
} = candyMachine;

구조 분해 할당을 통해 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있다.

Node.js - 웹 서버 만들기

WAS 기능을 하는 프로그램을 만들어보자

var http = require("http"); //웹 서버 기능의 모듈
var fs = require("fs"); //파일 처리 모듈: node.js의 file system 모듈을 객체화 해서 fs 변수에 저장

var app = http.createServer(function (
  req,
  res //request를 듣고 해야하는 작업들을 정리
) {
  var url = req.url; //요청된 url 정보 획득
  if (req.url == "/") {
    //각 요청에 따른 작업들 코딩
    url = "/index.html";
  }
  if (req.url == "/favicon.ico") {
    return response.writeHead(404);
  }
  response.writeHead(200);
  console.log(__dirname + url); //웹 브라우저가 요청한 파일의 경로를 콘솔에 출력
  response.end(fs.readFileSync(__dirname + url)); //end: 서버가 클라이언트에 응답하는 메소드
  //fs 모듈의 readFileSync: 매개변수로 넘어가는 파일의 내용을 읽어온다.
  //__dirname: __는 JS에서 기본적으로 정의된 변수 앞에 연결. 현재 파일이 위치한 폴더의 절대경로
});
app.listen(3000); //request를 듣기위한 메소드

require(): 외부 모듈을 객체화해서 가져오는 함수
http 모듈: http웹 서버와 관련된 모든 기능을 담은 모듈
서버 생성을 위해서 createServer()와 listen() 메소드가 필요
createServer(): 웹서버 객체 생성
웹 서버 객체의 listen()메소드: 클라이언트의 웹 요청을 기다리고 있음. 웹 요청이 들어오면 createServer의 callBack 함수인 function(req,res){ }을 실행
function(req,res){ } 첫번째 매개변수 req: request객체로써 웹 서버에 클라이언트 요청이 들어오면 관련 정보가 저장 두번째 매개변수 res: response객체로써 클라이언트에 응답하기 위한 메소드 및 정보 저장
- response 객체의 메소드
  - writeHead(statusCode, Object): 응답헤더작성
  - end([data]): 응답 본문 작성

Twitter Facebook LinkedIn