웹 서비스 이해(2)

백엔드의 구조

웹서버
- 정적 페이지에 대해 대응.
  - 화면 내용/데이터 등의 변동 x 페이지
웹 어플리케이션 서버
- 동적 페이지 처리. 데이터베이스와 연결되어 데이터 조회/수정/삭제 처리 요청.
  - 데이터 처리/연산 통해 화면의 내용, 데이터가 변하는 페이지
데이터베이스
- 웹 어플리케이션 서버와 통신하며 데이터를 조회/수정/처리 함

node.js

javascript가 스크립트 언어를 뛰어넘어 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼. 즉 자바스크립트로 백엔드 구현이 가능.

스크립트 언어

인터프리터 방식에 사용하기 위함. 기존에 이미 존재하는 소프트웨어를 제어하기 위한 용도로 쓰이는 언어
행 단위로 번역함. 따라서 번역 속도는 빠르나, 실행 속도는 느림
- 수정 많을 시에 효율적일 수도
O.S를 고려하지 X
Javascript, Python, JSP, jQuery

컴파일 언어

소스코드를 컴파일 하여 목적 코드로 옮긴 뒤, 이를 기계어로 읽어 실행시키는 방식
전체를 컴파일하므로 좀 느리지만 한 번 컴파일 하면 실행 속도는 빠르다.
O.S를 고려해야함
C,C++,Java,Go 등

모듈 관리 방법

모듈(완성된 부품)
- 프로그램 구성 요소. 데이터와 함수를 하나로 묶은 단위

1. require ( CommonJS)

const express = require('express');
const { readFile } = require('fs');

동기적으로 로드 ( 모듈 로딩이 완료 될 때까지 실행이 중지됨)
- 성능 저하
- 실행 중 필요한 모듈을 조건에 따라 불러 올 수 있음.
- 기본 지원
- export된 객체 반환

2. import (ES6)

import express from 'express';
import { readFile } from 'fs';

비동기적으로 로드.
- 종속성 관리 신경써야함.
- 최상위 범위에서만 사용 가능.
- 웹 개발에서 주로 사용, 최신 브라우저에서 지원됨.
- 모듈 네임스페이스 반환. 각 export는 해당 네임스페이스에 접근 가능.

포트번호

클라이언트, 서버 통신 시 같은 주파수를 맞춰야 한다. 그 번호가 포트 번호.

head

통신 상태를 알려줌
- 200:정상
- 404: 클라이언트가 원하는 걸 못찾음
- 500: 서버 이상
응답이 어떤 형태인지 알려줌.

//server.js
let http = require('http');

//사용자에게 요청 올 시에
//request: 요청
//response:응답

function start(){

function onRequest(request,response){
//200 정상, 너에게 줄 response타입은 text/html이다.
//body를 적는다. 
//끝! 
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write('Hello Node.js');
    response.end();
}
//서버를 만든 뒤, onRequest로 통신. 8888로 접속해라. 
http.createServer(onRequest).listen(8888);

}

exports.start=start;
//모듈로 export

//index.js

let server = require('./server');

server.start();

URL ( Uniform Resource Locator)

웹 페이지가 어디 있는 지 위치를 알려주는 주소=웹 페이지의 주소

라우터

경로를 정해주는 것

//index.js
let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler');
server.start(router.route, requestHandler.handle);

//router.js

function route(pathname, handle, response){
   if (typeof handle[pathname] == 'function'){
    handle[pathname](response);
}else{
    response.writeHead(404,{'Content-Type':'text/html'});
    response.write('Error Page \n Not Found');
    response.end();
}

}
exports.route = route;

//server.js
let http = require('http');
let url  = require('url');

function start(route,handle){
    function onRequest(request,response){
        // uri = URL.tostring()
        let pathname = url.parse(request.url,true).pathname;
        route(pathname,handle,response);

    }
    
    http.createServer(onRequest).listen(8888);  
}

exports.start=start;

//requestHandler.js

function HomePage(response){
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write('YubeenPark');
    response.end();
}

function main(response){
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write('Main page');
    response.end();
}

function login(response){
    response.writeHead(200,{'Content-Type':'text/html'});
    response.write('Login page');
    response.end();
}

let handle = {};

handle['/'] = HomePage;
handle['/main'] = main;
handle['/login'] = login;

exports.handle = handle;

url.parse취약점에 대한 글

Node.js url.parse() 취약점 컨트리뷰션

url.parse(request.url)에 취소선 에러 탐색
- UrlWithParsedQuery’ of ‘url.parse’ is deprecated.
- 즉, WHATWG URL API 국제 웹 표준화 그룹을 따르는 게 아닌 자체적인 스펙으로 개발되었기에 권장하지 않음.
- 최근 사용법
  - const urlNew = new URL(url,base);
    - url: 절대 or 상대 url
    - base: 상대 url인 경우 기준 url을 나타내는 것. 기본값 ‘’
      - 절대경로 https://website.com/path/to/image.png
      - 상대경로 ex) path/to/image.png

다음 중 HTTP Header에 포함된 데이터는?

Http Response,Request Data

포함된 것: Http Status code,Content-Type

HTTP 요청 메서드

GET - 서버로부터 리소스를 요청하고 응답으로 리소스를 받는다.
POST - 서버에 데이터를 제출하고 서버의 상태를 변경한다.
PUT - 서버의 기존 리소스를 업데이트하거나 새 리소스를 생성한다.
DELETE - 서버의 리소스를 삭제한다.

HTTP 상태 코드

200 - 요청이 성공적으로 처리됨

404 - 요청된 리소스를 찾을 수 없음

500 - 서버에서 내부 오류가 발생함

302 - 요청된 리소스가 임시적으로 다른 위치로 이동됨