2주차-파트04: 쇼핑몰 프로젝트

Chapter1. 쇼핑몰 프로젝트

여태까지 배운것들을 이용하여 간단한 쇼핑몰 프로젝트를 진행하였다. 코드 파일은 프로그래머스 파트4에서 다운받을 수 있다.

 

 

 

 

 

 

Chapter2.백엔드의 구조

 

 

예전 강의에서 백엔드에 대해 간단히 설명하였을 때 프론트엔드는 클라이언트, 백엔드는 서버라고 하였다. 사실 백엔드는 1. 웹서버, 2. 웹 어플리케이션 서버, 3. 데이터 베이스 이렇게 크게 3가지로 나뉘어져 있다.

백엔드 구조

 

 

1. 웹 서버

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

 

※ 정적 페이지란, 화면의 내용/데이터 등의 변경이 없는 페이지를 말한다. 이용자와의 상호작용(ex: 로그인, 회원가입)과 상관없이 늘 똑같은 페이지를 보여준다. 데이터베이스랑도 소통하지 않는다.

 

※ 동적 페이지란, 데이터 처리/ 연산을 통해 화면의 내용, 데이터가 변하는 페이지를 말한다. 페이지가 사용자와 데이터베이스와 상호작용하는 페이지이다.

 

 

 

 

 

 

2. 웹 어플리케이션 서버와 데이터베이스

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

 

※데이터베이스란, 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체를 말한다.

 

 

 

 

 

 

 

 

 

Chapter3. Node.js의 이해

Node.js란?

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

 

node.js

 

 

 

 

 

Chapter4. Node.js로 웹 서버 만들기

 

위의 테니스마켓 실습한 파일에 node.js를 이용하여 웹 서버를 만들어보자. server.js파일을 만들어주고 다음과 같이 프로토콜을 입력해주자. require 함수는 node.js가 가지고 있는 모듈을 불러오는 함수이다. http프로토콜을 가지고 올 수 있도록 require안에 'http'를 넣어준다.

 

 

 

 

 

 

이후 다음과 같이 입력해준다. http모듈은 서버를 만들 줄 아는 createServer란 함수를 이미 가지고 있다. 이 함수를 불러와 onRequest를 넣어주고 listen함수를 준다. listen함수는 라디오 주파수를 듣는 거처럼 가로에 적어준 숫자의 채널을 불러온다. 

 

 

 

 

 

그 다음 웹브라우저를 킨 후 url창에 localhost:8888을 치면 아무것도 뜨지 않는다. 이는 서버를 아직 키지 않았기 때문이다.

 

 

 

 

 

 

 

터미널 창을 열어 node 파일명 을 쳐서 서버를 구동해준다. 끌 때는 ctrl+c버튼을 눌러준다.

 

 

 

 

새로고침해보면 작동하는 것이 확인된다.

---

위의 server.js코드를 자세히 살펴보자.

 

 

let http = require('http');

 

서버와 클라이언트가 통신을 하는데 사용하는 프로토콜 이름이 'http'이다. 우리가 http의 기능들을 활용할 수 있도록 node.js가 제공하고 있다. 이 기능들을 가져오도록 require함수를 이용한다(모듈을 받아오도록).

 

 

 

 

 

 

function onRequest(request, response){

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

    response.write('Hello Node.js');

    response.end();

}

 

우리가 직접 만든 함수로 클라이언트한테 요청이 왔을 때라는 의미로 onRequest라는 이름을 붙여줬다. 안에 있는 변수 request는 요청을, response는 응답을 뜻한다. 이렇게 적어놓으면 nodejs가 이 둘을 요청과 응답의 역할을 할 수 있도록 만들어준다.

응답으로 wirteHead,wirte,end를 받겠다.

 

 

웹서버는 클라이언트의 요청을 받고 그에 대한 응답을 다시 클라이언트한테 보낸다.

 

 

 reponse뒤에오는 writeHead, write, end가 뭔지 이해하기 위해 http프로토콜 템플릿에 대해 배워보자.

 

---

-HTTP 프로토콜 템플릿-

HTTP란 인터넷, 웹, 클라이언트와 서버 사이에서 통신을 할때 존재하는 약속이다. HTTP는 head랑 body 두 부분으로 이루어져있다. body는 웹 페이지에 뜨는 데이터를 담고 있다.

 

 

 

 

 

http의  head부분에는

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

예를 들어, 200 : 정상

                 404: 클라이언트가 원하는 걸 못 찾겠다.

                 500: 서버가 이상하다.

       우리는 이 숫자들을 HTTP(status) code라고 부른다.

 

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

 

 

 

---

다시 돌아와 onRequest함수 안 코드를 보자.

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

웹 서버가 클라이언트한테 응답을 해줄때 정상이다. 돌려줄 response의 타입은 html이다.

 

 

 

 

response.write('Hello Node.js');

write는wirteBody의 줄임말로 생각해도 된다. 여기서는 body에 들어갈 데이터를 'Hello Node .js'로 하겠다.

 

 

 

 

response.end();

이제 reponse에 담을거 끝났고 전송.

 

 

 

 

 

 

 

---

 

 

 

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

 

http모듈을 이용하여 서버를 만들었는데 서버를 만든 후 onRequest함수로 통신을 하겠다. client와 얘기할 때는 주파수를 8888로 맞추겠다.

여기서 8888을 포트번호(port number)라고 한다. 클라이언트와 서버가 대화를 하고 싶다면, 무전기처럼 같은 주파수를 맞춰야만 한다. 

 

 

 

 

 

 

 

 

Chapter5. Server.js를 모듈처럼 만들기

 

이번에는 우리가 만든 이 server.js파일을 다른 자바스크립트 파일에서도 사용할 수 있도록 모듈 형태로 만들어보자.

 

 

먼저 서버를 모듈 형태로 불러와서 쓸 파일 하나를 만들어준다. 여기서는 index.js파일을 새로 만들겠다. 여기에 server.js에서 했던 것처럼 변수 하나를 만들어주고 require함수 안에 불러올 모듈로 우리가 만든 'server.js'를 불러오겠다. 여기서 ./ 은같은 파일 안에 들어있는 js파일을 의마한다.

 

 

그리고 index.js파일을 실행시켜준다.

 

 

 

잘 작동한다.

 

 

 

 

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

 

 

 

 

 

---

 

그런데 이렇게 만든 index.js는 server.js를 불러올때 자동으로 서버가 켜진다. 이는 server.js의 코드가 모듈로 불러갈 경우 자동으로 켜지도록 짜여있기 때문이다. 그렇기 때문에 server.js에 start함수를 만들어 서버를 켰을 때만 모듈이 불러와지도록 해보자. 다음과 같이 server.js에 start함수를 만들고

 

 

 

index.js에 불러오면

 

 

 

서버가 실행되지 않는다. 이는 자바스크립트에서는 한 파일내에서 만든 함수는 그 파일 안에서만 쓸 수 있기 때문이다.

 

 

 

다른 파일에서 함수를 사용하게 하고 싶으면 server.js파일에 한 줄만 추가해주면 된다.

exports.변수명= 함수명

 

 

 

 

 

추가해주니 잘 실행된다.

 

 

 

 

 

Chapter6. URL

URL(Uniform Resorue Locator) 

인터넷 상에서 웹페이지가 어디있는지 "위치"를 알려주는 주소이다. 쉽게 말해, 웹페이지 주소라고 할 수 있다.

 

가장 기본형 url: http://localhost:8888

 

여기서 localhost는 내 컴퓨터 주소를 뜻한다.

 

 

server.js에 요청받은 url을 읽어 그 경로가 어떻게 되는지 확인한 정보가 담긴 변수 let pathnam을 함수 start에 추가한뒤 console.log()함수를 이용해 pathname을 출력해보도록 하자.

다음과 같이 코드 입력 후

 

 

서버 실행시 다음과 같이 터미널에 출력된다.

 

 

 

 

 

이제 원래는 localhost:8888이었던 url뒤에 /hello를 추가로 작성해주었다.

 

 

 

 

다음과 같이 터미널에 내가 url에 추가한 문자가 출력된다.

 

 

우리는 이제 서버이름을 서버가 관리하지 않고 pathname을 라우터(어디로 갈지 경로를 정해줌) 한테 전달하도록 할 것이다. router.js파일을 만들고 다음과 같이 입력. server.js에 있던 console줄은 삭제한다.

 

server.js파일은 index.js으로 불려가 모듈처럼 사용된다.

server.js에서 start함수가 router를 변수로 받도록 하고 route함수를 호출해 pathname을 넣어준다.

 

 

index.js에서 router모듈을 불러와 변수에 넣어주고 start함수의 매개변수로 넣어준다. 이것은 server모듈의 start함수를 실행시킬 때 router모듈이 가지고 있는 route를 전달해주는 것이다. server모듈이 route를 전달받으면 start함수안에 있는 것들이 실행되면서 작동한다.

 

 

잘 출력된다. 요지는 역할의 분리일 뿐이다. index는 모듈의 소환과 서버의 가동, router는 경로 찾기, server는 request 받고 response하는 역할만 하여 각 모듈이 독립적으로 사용된다.

---

Server와 Router의 역할

Server: Request를 받습니다.

Router: Request의 URL에 따라 루트(route)를 정해준다. = 어디로 갈지 길만 정해준다.

 

그럼 각 루트(route)에서 할 일은 그럼 누가 할까? 새로운 js파일 requestHandler.js를 생성하자

 

requestHandler.js는 router가 route를 분배해서 각 경로를 알려주면 그 경로로 가서 무얼해야할지 알려준다. 딕셔너리 형태로 저장해준다.

 

 

 

index.js에는 다음과 같이 추가해준다.

 

 

server모듈로 가서 start함수에 handle매개변수 추가 후 안에 route함수에 매개변수로 handle을 추가해준다.

 

 

 

 

 

그럼 각 루트(route)에서 할 일은 그럼 누가 할까? 새로운 js파일 requestHandler.js를 생성하자

 

 

 

requestHandler.js는 router가 route를 분배해서 각 경로를 알려주면 그 경로로 가서 무얼해야할지 알려준다. 딕셔너리 형태로 저장해준다.

 

 

 

 

 

 

server모듈로 가서 start함수에 handle매개변수 추가 후 안에 route함수에 매개변수로 handle을 추가해준다.

 

 

router모듈에 다음과 같이 입력. requestHandler의 handle을 반출하면서 함수처럼 쓰일 수 있게 된다. 영상처럼 안되니 handle[pathname]; 으로 입력해준다.

 

 

 

 

 

잘 작동한다.

 

 

 

Chapter7. URL에 따른 프론트엔드에 다른 response보내기 

 

2주차 파트04 마지막 강의(URL에 따른 프론트엔드에 다른 response보내기)를 따라하던 중 오류가 발생하였다.

 

 

router.js에서 handle[pathname](response)에서 handle을 함수로 인식하지 못하는 거 같았다. 검색해보았더니

https://velog.io/@hehe/Node.js-TypeError-handlepathname-is-not-a-function-%EC%98%A4%EB%A5%98

[Node.js] TypeError: handle[pathname] is not a function 오류

나랑 같은 문제를 그대로 겪은 사람이 있어 해당 블로그 글 방법2에 router.js를 수정하는 방법으로 해결하였다.

 

 

다음이 고친 router.js의 함수이다. else문 부분은 url에 정해주지 않은 pathname이 들어왔을 경우 오류 페이지를 표기위한 것이다.

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;