2023.11.23(목)

📄정적 페이지와 동적 페이지

• 정적(static) 페이지
  • 웹 서버에 이미 저장된 html 문서를 클라이언트에게 전송하는 웹 페이지
  • 화면의 내용/데이터 등의 변동이 없는 페이지
  • 모든 사용자는 같은 결과의 웹 페이지를 서버에 요청하고 응답 받음
• 동적(dynamic) 페이지
  • 요청 정보를 처리한 후에 제작된 HTML 문서를 클라이언트에게 전송하는 웹 페이지
  • 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지
  • 사용자는 상황, 시간, 요청 등에 따라 달라지는 웹 페이지를 보게 됨
  • 같은 페이지라도 사용자마다 다른 결과의 웹 페이지를 서버에 요청하고 받을 수 있음

🗄️Backend 구조 🔗

• Web Server와 WAS의 관계 = 메인 셰프와 요리사들
• DB = 냉장고와 창고 같은 보관소

---

• Web Server
  • 정적 페이지 제공 (WAS를 거치지 않고 바로 자원 제공)
  • 동적 페이지에 대한 요청은 직접 처리하지 않고 WAS에게 전달(WAS에게 HTTP request 보냄)
  • 아파치 웹 서버(Apache Web Server), GWS, IIS, Nginx, …
• Web Application Server(WAS)
  • 동적 페이지 처리
  • 필요한 데이터 연산을 위해 DB와 연결되어 있으며 데이터 생성/조회/수정/삭제(CRUD)에 대한 처리를 요청
  • 아파치 톰캣(Apache Tomcat), 레진(Resin), 제이런(JRun), …
• Database(DB)
  • 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체
  • 데이터를 구조화하여 관리함으로써 데이터 중복을 막고, 효율적이고 빠른 데이터 연산을 가능하게 함

📗Node.js란?

Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임$\text{\tiny{(특정 언어로 만든 프로그램들을 실행할 수 있는 환경)}}$입니다.

• HTML을 자바스크립트가 조작하고 브라우저가 자바스크립트를 해석
  • 브라우저에는 자바스크립트 해석 엔진(브라우저마다 엔진 상이)이 있어서 기존에는 자바스크립트를 인터넷 브라우저 위에서만 실행할 수 있었음
  • 2008년에 구글의 크롬 브라우저 개발자들이 V8 엔진을 만들었는데 성능이 너무 뛰어나서 기능을 좀 더 추가해서 Node.js(V8) 출시
  • 즉 Node.js는 브라우저 내에서 말고도 다른 환경에서 자바스크립트를 사용할 수 있게 해주는 자바스크립트 실행 환경(=런타임)
• 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼
• Node.js를 이용해 자바스크립트로 백엔드 구현 가능!
  • 일반 서버의 경우 요청을 차례대로 처리하지만 Node.js로 개발한 서버의 경우 요청 순서와 상관없이 처리 속도가 빠른 것부터 응답을 하기 때문에 좋음(Non-blocking I/O)

🧩Node.js로 웹서버 만들기

• Code

  • index.js

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

  • server.js

    let http = require('http');
    // let url = require('url'); // URL class is a global reference for require('url').URL
    
    function start(route, handle){
        function onRequest(request, response) {
            // let pathname = url.parse(request.url).pathname; //url.parse is deprecated.
            let pathname = new URL(request.url, `http://${request.headers.host}`).pathname;
            if (!request.url.includes('favicon.ico')) {
                route(pathname, handle, response);
            }
        }
    
        http.createServer(onRequest).listen(8888);  // localhost:8888
    }
    
    exports.start = start;

    • 추가로 해결한 부분
      • The signature '(urlString: string): UrlWithStringQuery' of 'url.parse' is deprecated.
      • 서버에 접속 시 request 두 번 발생(두 번째에 favicon.ico)

  • router.js

    function route(pathname, handle, response) {
        console.log('pathname :', pathname);
        if (typeof handle[pathname] == 'function') {
            handle[pathname](response);
        } else {    // 등록된 path가 아닌 경우
            response.writeHead(404, {'Content-Type':'text/html'});
            response.write('<h1>Page Not Found &#128531;</h1>');
            response.end();
        }
    }
    
    exports.route = route;

  • requestHandler.js

    function main(response) {
        response.writeHead(200, {'Content-Type':'text/html'});
        response.write('<h1>Main page</h1>');
        response.end();
    }
    
    function login(response) {
        response.writeHead(200, {'Content-Type':'text/html'});
        response.write('<h1>Login page</h1>');
        response.end();
    }
    
    let handle = {};
    handle['/'] = main;
    handle['/login'] = login;
    
    exports.handle = handle;

• 터미널에 node server.js 명령어로 서버 구동 시작

• 모듈화 🔗

  • 다른 파일에서 특정 모듈(파일)을 가져와서 사용할 때 : require(src)
  • 파일에서 모듈로 내보내기 : exports.key = value

• 주소창에 localhost:8888을 입력해 서버에 접속
  

  • IP 주소(IP address) : 디바이스(컴퓨터, 태블릿, 핸드폰, …)를 가리키는 주소

    • 용도가 정해져 있는 IP 주소

      IP 주소	용도
      localhost, 127.0.0.1	현재 사용 중인 로컬 PC를 지칭
      0.0.0.0, 255.255.255.255	broadcast address, 로컬 네트워크에 접속된 모든 장치와 소통하는 주소

  • 포트 번호(port number) : 디바이스의 특정 프로그램/앱으로 접속할 수 있는 채널 → 클라이언트와 서버가 통신하기 위해서는 무전기처럼 같은 주파수를 맞춰야 함

    • 잘 알려진 포트(Well-known port) 🔗🔗

      포트 번호	용도
      22	Secure Shell (SSH)
      80	Hypertext Transfer Protocol (HTTP)
      443	Hypertext Transfer Protocol Secure (HTTPS)

  • URL(Uniform Resource Locator)

    • 인터넷 상에서 웹 페이지가 어디있는지 “위치”를 알려주는 주소, 웹 페이지 주소
    • 인터넷에서 웹 페이지, 이미지, 비디오 등 리소스의 위치를 가리키는 문자열
      
    • Domain Name
      • DNS(Domain Name System)에 의해 사람이 읽을 수 있는 Domain Name은 IP 주소로 변환됨(전화번호부 같은 시스템)
      • 불편하지만 IP 주소를 직접 사용할 수도 있음

• Server와 Router의 역할

  • Server : Request 받기
  • Router : Request의 URL에 따라 어디로 갈지 route를 정해줌

🛜HTTP(Hypertext Transfer Protocal)

• HTTP 메시지 🔗
  • 요청(request) 메시지
    
    • Client → Server
    • Start Line은 요청라인으로 요청 방식(method), 요청 URL, 프로토콜 버전으로 구성됨.
    • Header에는 이름:값 형식으로 표현하고 Host 항목은 필수로 표시해줘야 함. (단 요청라인의 URL에 Host를 표시하면 생략가능)
  • 응답(response) 메시지
    
    • Server → Client
    • Start Line은 응답라인으로 프로토콜 버전, 상태 코드, 상태 텍스트로 구성됨.
    • Header에는 응답이 어떤 형태인지 Content-Type을 적어줌.

• +) 요청 방식(method)과 상태 코드