2023-01-22 node.js_4

---

 

WEB2 - Node.js - 생활코딩

생활코딩 node.js 강의 정리

 

---

1. URL

 

URL은(Uniform Resource Locator)로 네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다.

 

우리가 일상에서 웹 주소(web address)로 흔히 부르는 것이다.

 

컴퓨터 네트워크와 검색 메커니즘에서의 위치를 지정하는, 웹 리소스에 대한 참조이다.

 

쉽게 말해서, 웹 페이지를 찾기 위한 주소를 말한다.

 

출처 : https://ko.wikipedia.org/wiki/URL

 

---

가. URL 형식

 

 

1. 프로토콜
2. 도메인 네임
3. 포트 번호
   : 일반적으로 웹 서버는 80번을 사용한다. 이 경우 생략될 수 있다.
4. 경로
   : 해당 컴퓨터 안에 있는 어떤 디렉터리에 어떤 파일을 불러올 것인가.
5. 쿼리 스트링
   : 쿼리 스트링을 사용하면 웹 서버에 정보를 전달할 수 있다.
   : ex) ?id=HTML&page=12 ⇒ id는 HTML이고 페이지는 12인 파일을 보고 싶다.

 

쿼리 스트링은 물음표(?)로 시작하고, 값과 값 사이는 앰퍼샌드(&)로 구분한다.

 

이름과 값은 등호(=)로 연결한다.

 

출처 : https://youtu.be/Zhbvui_T9VY

 

---

2. 쿼리 스트링 이용하기

 

• 쿼리 스트링으로 주어진 정보에 따라서 다른 정보를 출력하는 기능을 구현해 보자.

 

---

가. URL로 정보 전달하기

 

이전에 작성한 main.js에서 console.log(url);를 추가한다.

 

var http = require('http');
var fs = require('fs');
var app = http.createServer(function(request, response){
    var url = request.url;
    console.log(url);
    if(url == '/'){
        url = '/index.html';
    }
    if(url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
    }

    // response.writeHead(404);
    response.writeHead(200);
    response.end(fs.readFileSync(__dirname + url));

});
app.listen(3000);

 

해당 코드에 따라 요청받은 url을 콘솔에 출력할 것이다.

 

http://localhost:3000/?id=HTML

 

웹 브라우저에 위의 url을 입력한 다음 터미널의 출력을 확인한다.

 

/?id=HTML
node:internal/fs/utils:348
    throw err;
    ^

Error: ENOENT: no such file or directory, open '/Users/dmlrms4598/Desktop/nodejs/?id=HTML'
    at Object.openSync (node:fs:600:3)
    at Object.readFileSync (node:fs:468:35)
    at Server.<anonymous> (/Users/dmlrms4598/Desktop/nodejs/main.js:17:21)
    at Server.emit (node:events:513:28)
    at parserOnIncoming (node:_http_server:1065:12)
    at HTTPParser.parserOnHeadersComplete (node:_http_common:117:17) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/dmlrms4598/Desktop/nodejs/?id=HTML'
}

Node.js v18.13.0

대충 에러가 발생할 것이다. 에러는 무시한다.

 

여기서 중요한 것은 url로 입력한 /?id=HTML이 터미널에 출력되었다는 것이다.

 

---

나. URL에서 쿼리 스트링 추출

 

url에서 쿼리 스트링을 추출할 것이다.

 

해당 기능은 url이라는 모듈을 이용할 것이다.

 

---

(1) 변수 url 수정

 

우리는 url이라는 변수를 사용하고 있다.

 

해당 변수를 _url로 수정한다.

 

...
var _url = request.url;
console.log(_url);
    if(_url == '/'){
        _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
    }
...
response.end(fs.readFileSync(__dirname + _url));
...

 

---

(2) 모듈 url 사용

 

이제 모듈 url을 node.js에 요청하자.

 

참고로 모듈은 같은 범주의 기능을 모아놓은 집합을 뜻한다.

 

var url = require('url');

 

---

(3) 쿼리 스트링 추출하기

 

...
var app = http.createServer(function(request, response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    console.log(queryData);
...

 

• var queryData = url.parse(_url, true).query;
  : _url에 들어있는 url를 파싱하고 그중에서 쿼리에 해당하는 부분을 queryData라는 변수에 대입한다.

 

다시 http://localhost:3000/?id=HTML로 접속하고 터미널의 출력을 살펴보자.

 

이 또한 에러가 발생하기에 실습하기 어렵다.

 

...
[Object: null prototype] { id: 'HTML' }
...

 

중요한 것은 queryData에 들어있는 것은 객체다.

 

js의 객체에 대한 설명은 해당 링크 참고 (https://ramen4598.tistory.com/152?category=993845)

 

url.parse(_url, true).query;가 쿼리 스트링을 추출해객체로 반환한다는 사실을 알 수 있다.

 

...
    console.log(queryData.id);
...

 

객체의 property 값을 가져오기 위해서 .id를 붙인다.

 

HTML

 

터미널에서 해당 출력값을 확인할 수 있을 것이다.

 

---

(4) 요청 값에 따라 다르게 응답하기

 

response.end(fs.readFileSync(__dirname + _url);

 

이 부분을 아래와 같이 수정한다.

 

response.end(queryData.id);

 

 

이제 사용자가 요청한 쿼리 스트링에 따라서 다른 정보를 웹 페이지에 보여줄 수 있다.

 

---