2023.11.24 TIL

Oneik·2023년 11월 23일
0
post-thumbnail

📕오늘 학습한 내용

  • 정적 페이지와 동적 페이지
  • 백엔의 구조
  • Node.js 이해

정적 페이지와 동적 페이지

정적 페이지

  • 웹 서버(Web Server)에 이미 저장된 html 문서가 클라이언트에게 전송하는 웹 페이지
  • 화면의 내용/데이터 등의 변동이 없는 페이지
  • 즉, 모든 사용자는 같은 결과의 웹 페이지를 요청하고 응답 받는다

동적 페이지

  • 요청 정보를 처리한 후 제작된 html 문서를 클라이언트에게 전송하는 웹 페이지
  • 데이터 처리/연산을 통해 화면의 내용 데이터가 변하는 웹 페이지
  • 데이터베이스와 대화를 하는 웹 페이지
  • 즉, 같은 페이지라도 사용자마다 다른 결과의 웹 페이지를 서버에 요청하고 응답 받는다
  • ex) 회원가입, 로그인, 검색 등

백엔드의 구조

웹 서버(Web Server)

  • 정적 페이지에 대해 대응한다
  • 동적 페이지는 직접 처리하지 않고, 웹 어플리케이션 서버(WAS)에게 전달한다

웹 어플리케이션 서버(Web Application Server)

  • 동적 페이지를 처리한다
  • 필요한 데이터 연산을 위해 데이터베이스와 연결되어 있으며 데이터 조회/수정/삭제에 대한 처리를 요청한다

데이터베이스(Database)

  • 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체
  • 즉, 데이터 모음집이다
  • ex) 카카오톡 메시지, 인스타그램에 등록한 사진 등

왜 웹 서버와 WAS를 분리하였을까?

  1. 기능을 분리하여 서버 부하를 방지한다
    • WAS가 모든 요청을 처리할 수 있지만, 그렇게되면 WAS가 감당하는 부담이 커진다
    • 그렇기 때문에 기능을 분리하여 서버가 감당하는 부하를 줄일 수 있도록 하였다
  2. 물리적으로 분리하여 보안을 강화한다
    • WAS가 외부와 직접적으로 연결이 된다면 중요한 설정 파일이나 리소스들이 외부로 노출될 수 있다
    • 웹 서버를 WAS 앞단에 배치함으로써 리소스를 보호할 수 있다
  3. 웹 서버에 여러 대의 WAS를 연결할 수 있다
    • 규모가 큰 서비스에 하나의 WAS만 연결된다면 많은 요청을 처리하는데 어려움이 생긴다
    • 이때 웹 서버를 통해 들어오는 요청들을 WAS로 적절하게 로드밸런싱 해준다면 하나의 WAS가 처리하는 요청의 양이 줄어 안정적인 서비스 운영이 가능하다
  4. 여러 언어들로 웹 어플리케이션 서비스를 할 수 있다
    • Java, PHP, Javascript 등 서로 다른 언어로 만들어진 서버를 하나의 웹 서버에 연결해서 서비스할 수 있다

Node.js 이해하기

Node.js란?

  • Javascript를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼
  • 즉, 우리는 Node.js를 이용하여 Javascript로 백엔드를 구현할 수 있다
  • 플랫폼이란?
    사전적으로 역에서 기차를 타고 내리는 장소를 뜻한다.
    소프트웨어에서는 여러가지 기능을 제공해주는 공통 실행환경이라고 생각하면 편한데, 예를 들어 위의 Node.js처럼 스크립트 언어를 프로그래밍 언어로써 동작하도록 기능을 제공해주는 공간(환경)이라고 생각하면 이해하기 쉬울 것이다

Node.js로 웹 서버 만들기

요청(Request)받고 응답(Response)하는 과정

서버를 만들고 모듈화 하기

// server.js
let http = require('http'); // HTTP 프로토콜로 요청받고 응답하기 위한 모듈
let url = require('url'); // 리소스의 주소를 가져오는 모듈

function start(route, handle) {
    function onRequest(request, response) {
        if(!request.url.includes("favicon.ico")) {
        let pathname = url.parse(request.url).pathname;
        route(pathname, handle, response);
        }
    }
    
    http.createServer(onRequest).listen(8888);
}

exports.start = start;
  • 가져온 http 모듈로 서버를 만들고 8888이라는 포트번호로 클라이언트와 서버를 연결한 후 onRequst함수를 실행하여 응답한다
  • exports라는 객체를 사용하여 서버를 모듈화하여 밖으로 내보낸다
    즉, 다른 파일에서 사용할 수 있도록 도와준다
  • onRequest( request, response )
    클라이언트로부터 요청받은 url에서 경로를 파악하고 응답으로 보내주는 함수

모듈화한 서버를 가동시키기

//index.js
let server = require('./server');
let router = require('./router');
let requestHandler = require('./requestHandler');

server.start(router.route, requestHandler.handle);
  • server를 가동시키고 경로에 따라 다른 화면 보여주는 start 함수 실행한다

경로(route) 지정하기

// router.js
function route(pathname, handle, response) {
    console.log('pathname : ' + pathname); //콘솔에 주소 출력 

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

exports.route = route
  • 어디로 갈지 경로만 지정해준다
  • 예외 처리
    만약, 지정된 경로에 대한 응답이 없다면, Not Found라는 메시지를 보내준다

경로에 따른 응답메시지 설정하기

// requestHandler
function main(response) {
    console.log('main');

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

function login(response) {
    console.log('login');

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


let handle = {}; // key : value로 이루어진 상자(사전 같은)
handle['/'] = main;
handle['/login'] = login;

exports.handle = handle
  • 만약 경로가 '/'라면 Main page라는 응답메시지를 보내고
    '/login'이라면, Login page를 보내도록 설정한다
profile
초보 개발자의 블로그입니다

0개의 댓글

관련 채용 정보