백엔드(back-end)

백엔드의 구조

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

정적 페이지: 화면의 내용/ 데이터 등의 변동이 없는 페이지

동적 페이지: 데이터 처리/ 연산을 통해 화면의 내용, 데이터가 변하는 페이지

• 웹 어플리케이션 서버: 동적 페이지를 처리, 필요한 데이터 연산을 위해 데이터베이스와 연결돼 있으며 데이터 조회/수정/삭제에 대한 처리를 요청한다.

node.js

node.js 는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼이다. 즉, 우리는 Node.js를 이용해서 자바스크립트로 백엔드를 구현할 수 있다. 

 

node.js로 서버 만들기(server.js)

let http = require('http'); //node.js가 가지고 있는 모듈(http) 불러오기

function onRequest(request, response) { // 요청, 응답 
  response.writeHead(200,{'Content-Type':'text/html'}); // 웹 서버가 클라이언트에게 응답을 해줄 때 => 코드 200(정상) , 응답 타입: html
  response.write('Hello Node.js'); // 화면에 뿌려줄 데이터 
  response.end(); // 응답 날아감
}

http.createServer(onRequest).listen(8888); //포트 번호
// localhost:8888

 

터미널에서 node server.js 라고 치면 localhost:8888 에서 실행되는 것을 확인할 수 있다.

 

HTTP 프로토콜 템플릿

• HEAD

1) 통신 상태가 어떤지 알려준다.

ex) 200: 정상이다, 404: 클라이언트가 원하는걸 못찾겠다, 500: 서버가 이상하다. => 이와 같은 숫자들을 HTTP (status) code 라고 부른다.

2) 응답이 어떤 형태인지 적어준다. 예를 들어 html 이다. 

---

server.js 모듈화

 

server.js

let http = require('http'); //node.js가 가지고 있는 모듈(http) 불러오기
function start () {
  function onRequest(request, response) { // 요청, 응답 
    response.writeHead(200,{'Content-Type':'text/html'}); // 웹 서버가 클라이언트에게 응답을 해줄 때 => 코드 200(정상) , 응답 타입: html
    response.write('Hello Node.js'); // 화면에 뿌려줄 데이터 
    response.end(); // 응답 날아감
  }
  
  http.createServer(onRequest).listen(8888); //포트 번호
  // localhost:8888
}

exports.start = start; // 바깥에서 start를 사용할 수 있게 한다는 뜻

 

index.js

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

 

➡️Node.js가 미리 만들어둔 모듈을 우리가 require('모듈 이름'); 이렇게 사용한 것처럼, 우리가 만든 server도 모듈처럼 다른 javascript 파일에서 사용할 수 있다. 

---

Router 를 이용해 역할 분리해주기

• Server: Request 를 받는다.
• Router: Request 의 URL 에 따라 루트를 정해준다. = 어디로 갈지 길만 정해줘요!

1️⃣ index.js 호출

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

server.start(router.route);

 

2️⃣ server.js 호출

let http = require('http'); //node.js가 가지고 있는 모듈(http) 불러오기
let url= require('url'); //url 모듈 가져오기
function start (route) {
  function onRequest(request, response) { // 요청, 응답 
    let pathname= url.parse(request.url).pathname;
    route(pathname);

    response.writeHead(200,{'Content-Type':'text/html; charset=UTF-8'}); // 웹 서버가 클라이언트에게 응답을 해줄 때 => 코드 200(정상) , 응답 타입: html
    response.write('Hello Node.js'); // 화면에 뿌려줄 데이터  
    response.end(); // 응답 날아감
  }
  
  http.createServer(onRequest).listen(8888); //포트 번호
  // localhost:8888
}

exports.start = start; // 바깥에서 start를 사용할 수 있게 한다는 뜻

 

3️⃣ router.js 호출

function route(pathname) {
  console.log('pathname : '+ pathname);
}

exports.route = route;

 

➡️ 콘솔에 이와 같이 경로가 찍히는 것을 확인할 수 있다. 

---

👩🏻‍💻 실습해보기

1. 쇼핑몰 프로젝트 메인 페이지 만들기

2. 서버 만들기 실습

메인 페이지

로그인 페이지

 

➡️URL 에 따라 다른 화면이 보이도록 구현하였다. 

 

3. start 함수 실행하여 이름 출력하기

response.writeHead(200,{'Content-Type':'text/html; charset=UTF-8'});

 

➡️한글 깨짐 문제가 있어서 인코딩 방식을 UTF-8로 변경해주어 문제를 해결할 수 있었다. 

---

🌟 배운 점

오늘은 백엔드에 대해 배웠다. 프론트엔드는 좀 익숙했었는데, 백엔드는 새로운 것들이 많다보니 낯설고 좀 어려웠다. 서버 만들기를 해보았는데, 생각보다 복잡하지는 않았지만 서로 서로 어떻게 호출을 하는지를 이해하는 것이 좀 헷갈렸다. 그리고 강의와 다르게 예상치 못하게 오류가 나는 부분들도 있어서 좀 당황했다. 나는 pathname에 자꾸 /favicon.ico 가 떠서 'handle[pathname] is not a function' 이라는 오류가 계속 발생했다.

  if(pathname !== '/favicon.ico')
      route(pathname, handle, response);

나는 이런 방식으로 문제를 해결했는데, 강의의 뒷 부분에 보니까 오류를 처리하는 방법에 대해 나왔다. 

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; charset=UTF-8'}); 
    response.write('찾으시는 페이지가 없습니다.'); 
    response.end(); 
  }
}

나는 단편적인 오류만 해결하려고 했는데, 위와 같은 방법을 사용해야 전체적으로 발생하는 오류를 해결할 수 있을 것 같다. 내가 원하는 답만 출력하고자 하는 것이 아니라 항상 어떤 오류가 생길 수 있을지를 염두해두고 개발을 해야겠다는 생각을 하게 되었다. 오늘 배운 내용이 헷갈리는 것이 많아서 좀 복습을 해야겠다.