Node.js

Node.js - URL로 입력된 값 사용하기

수업소개

URL에 포함된 쿼리 스트링을 해석해서 이용하는 방법을 살펴봅니다. 

 

 

 

URL의 이해

강의

 

 

 

Node.js에서 URL을 통해서 입력된 값을 사용하는 방법

강의

실습하실 때 url 뒤에 ?id= 의 값을 직접 입력해주셔야 오류가 발생하지 않습니다. 

 

 

 

소스코드

main.js

차이점

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    console.log(queryData.id);
    if(_url == '/'){
      _url = '/index.html';
    }
    if(_url == '/favicon.ico'){
      return response.writeHead(404);
    }
    response.writeHead(200);
    response.end(queryData.id);

});
app.listen(3000);

 

댓글

댓글 본문
작성자
비밀번호
  1. 이소영
    감사합니다!
  2. JongHan Park
    완료
  3. 로린
    완료
  4. 먀뱌뱌
    잘 안되시는 분들 앞 강의들중에서

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

    이거하고 파일이름을 한번 생각해보셔요

    저는 복습하고 나서야 이해를 했네요...!
  5. 임은정
    완료
    왜 안되나했더니
    js 수정사항이 있었군요 댓글 감사합니다.
  6. hammi
    잘 봤습니다. 감사합니다.
  7. JT_brand
    감사합니다 겨우 이해했네요 ㅎ
  8. 유레카
    강의에 보시면 갑자기 '/?id=HTML'로 넘어가서 당황스러운 분들께...

    이전 강의까지 코딩한 내용에 따르면 response.end가 '__dirname+url' 입니다. 그러니까 당연히 localhost:3000들어가서 다른 페이지 누르면 경로+url로 페이지가 로드 됩니다. 그런데 강의가 잘못된게 querystring이 나옵니다. 뭔가 코딩이 바뀌었는데 누락된 것으로 보입니다.

    이전 강의의 코딩으로는 querystring을 보거나 확인 할 수 없습니다. dirname+url로 가게끔 코딩이 되었기 떄문이지요.. 위에 소스에 따르면 response.end(queryData.id); 로 찍고 queryData를 직접 입력해줘야, 본문에 queryData.id가 나옵니다; response.end(queryData.id);

    그러니까 다시말하면 querystring을 페이지 a태그를 눌러서 확인하는게 아니라, querystring을 설정해준 다음에 페이지 a태그를 눌러 해당 querystring의 페이지로 가도록 코딩해줘야 됩니다. 본말이 전도된 격입니다. 쿼리스트링은 index.html을 node로 불러와서 어딘가에서 프로그래머가 확인하는 것이 아닙니다. 쿼리스트링을 미리 작성해주어야 합니다. template에서 a태그의 href를 쿼리스트링이 포함되도록 수정한 뒤, 실행하여 나머지 코드를 작성해야 합니다. 강의가 잘못됬는데 제가 놓친 부분이 있나 해서 고민 많이 했다가 이제 이해하였습니다...

    제 소스를 공유하여 보내드립니다.

    var http = require('http');
    var fs = require('fs');
    var url = require('url');

    var app = http.createServer(function (request, response) {
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var title = queryData.id;
    console.dir(queryData);
    if (_url == '/') {
    title = 'Welcome' }
    if (_url == '/favicon.ico') {
    return response.writeHead(404);
    }
    response.writeHead(200);
    var template = `
    <!doctype html>
    <html>
    <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
    </head>
    <body>
    <h1><a href="/">WEB</a></h1>
    <ol>
    <li><a href="/?id=HTML">HTML</a></li>
    <li><a href="/?id=CSS">CSS</a></li>
    <li><a href="/?id=JavaScript">JavaScript</a></li>
    </ol>
    <h2>${title}</h2>
    <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
    <img src="coding.jpg" width="100%">
    </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
    </p>
    </body>
    </html>
    `
    response.end(template);

    });
    app.listen(3000);
  9. 파이어뱃
    2019_12_05 complete
  10. 2019.12.5 완료
  11. 김정기
    완료 다시보기
  12. 박창신
    수강완료
  13. 강다리
    달립니다..
  14. 쑤우
    수강완료. 감사합니다.
  15. 굼벵이
    완료
  16. localhost:3000은 잘 되는데 주소 뒤에 query string 넣으면 "사이트에 연결할 수 없음"이 뜨고
    cmd에서도
    fs.js:114
    throw err;
    ^
    이렇게 뜨고 나가집니다;;
    소스코드 고대로 베꼈는데 ㅜㅜ
  17. CronEB
    재밌네요
  18. 루이자
    [Object: null prototype] { id: 'css' }

    출력이 이렇게 나오는데.. 맞나요?ㅠㅠ
  19. 너구친구
    코드 따라 쳐보고 다시 한 번 돌려보니까 이해가 잘 되네요.
  20. YesterdayKite
    완료. 감사합니다.
  21. AutumnTree
    완료 :~D
  22. 주워니
    완료~!
  23. 김형근
    네...? 왜 이렇게 이해가 안가죠... ㅠㅡㅠ
  24. 이채
    혹시 주소창에 url을 잘못 치신 것은 아닌가요?
    localhost:3000/?id=HTML
    쿼리스트링(? 이하~)을 따라 접속해야 id값을 현출하는 구조기 때문에 위처럼 쓰셔야 HTML이 나타납니다.
    대화보기
    • 저도 동일하네요...
      대화보기
      • node main.js 해서 왜 nodefined가 되는지 잘 모르겠습니다. 분명 되었었는데 혹시 몰라서 저기에 있는 코드를 다시 복붙해봐도 안되네요..
      • 오은석
        감사합니당 ^^
      • 허공
        190510 감사합니다.
      • 이루
        완료
      • jennypark
        check!
      • 위준우
        완료
      • RETURN
        <p>완료<p>
      • 현호
        완료 !!!
      • 으아 어려워.
      • 통신 MDP 너무 좋아 ^_^
        완료 ^______________________________________^
      • 자유로움
        완료
      • cbw1030@naver.com
        주소창에 localhost:3000/?id=HTML 이렇게 쳐보세요 !
        대화보기
        • Chungwol
          _url을 통해 현재 접속된 웹페이지의 정보를 querydata에 오브젝트 형식으로 저장해놓고 query만 조회할려고 해보니
          object : null prototype {} 라며 다른 정보들이 보이지 않네요. 저만 이런건가요?
        • supernet
          완료
        • 도토리묵
          완료
        • 호두
          재미있어요
        • 지미츄
          ?id=부분을 주소창에서 직접 쳐서 성공시켰네여 ㅜㅜ ㅎ 감사합니다 !
        • 나마코엘
          오오.. 재미있네요.
        • 쑤쑤
          어려워여..ㅠ
        • 소금돌
          어려움!
        • Yeabbi
          완료
        • twinpooh@gmail.com
          에델 카렌 웅 완료.
        • jo_onc
          main.js 안의 코드를 이번 강의에 맞게 변경해주셔야해요.
          대화보기
          • 삼고잉
            잘 읽었습니다.
          • NeoDahl
            무슨 이유에선진 모르겠지만 영상에서는 어느순간부터 query string 값이 주소에 들어가 있었네요. 그래서 아마 다른 분들도 실습하시는데 약간 헷갈려 하시는것 같습니다.

            그래서 영상 윗부분에 '실습하실 때 url 뒤에 ?id= 의 값을 직접 입력해주셔야 오류가 발생하지 않습니다. ' 라고 적어 두셨네요
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기