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. JS_Developer
    7,8 행에 해당되는 코드입니다.
    var queryData = new URL('http://localhost:3000' + _url).searchParams;
    console.log(queryData.get('id'));

    https://nodejs.org......ams
    이전 버전에서 var queryData = url.parse(_url, true).query;는
    request.url 로 받아온 ?id=HTML를 url.parse(_url, true)가 querystring객체를 만들어서 return하는 방식인데
    Node.js v16 로 오면서 querystring이 legacy가 되어 url모듈역시 변경되었습니다.

    이제는 URL객체를 만들어서 처리하는 쪽으로 바뀌었는데 이때 url전체 주소가 필요하며 .searchParams로 URLSearchParams객체를 불러와서 get 메서드로 key에 해당하는 데이터를 불러오는 코드입니다.
  2. 트루트
    10강 마지막 부분에서...
    url.parse 가 deprecate 되어서 main.js 코드를 조금 수정해봤습니다.


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

    var app = http.createServer(function(request, response) {

    var varUrl = request.url; // ?id=HTML
    var myURL = new URL('http://localhost:3000' + varUrl); // http://localhost......TML

    var queryData = myURL.searchParams.get('id'); // HTML


    if(varUrl == '/') {
    varUrl = '/index.html';
    }
    if(varUrl == '/favicon.ico') {
    return response.writeHead(404);
    }


    response.writeHead(200);

    response.end(queryData);

    });
    app.listen(3000);
  3. modangirl
    감사합니다!
    대화보기
    • 별거
      2021.05.11 와.. 점점 더 복잡해지고 있네요.
      id 값이라.. HTML에서는 쉬운 줄 알았는데..
    • ㄱㅁㅎㅁ
      url.parse deprecated 문제

      const myURL = new URL('http://localhost:3000' + _url);
      const queryData = myURL.searchParams.get('id');
      const pathname = myURL.pathname;

      queryData.id => queryData
    • 스문
      슬슬 어려워지네요 ;
    • newtro
      command 창에서 node main.js 명령문을 입력했는데 실행이 되지 않는 건 무슨 이유 때문일까요?
    • unkwn98
      queryData값을 이용해서 강의를 진행하는면에 초점을 두어 자세하게는 보지 않은 부분이긴해요.
      var queryData = myURL.searchParams.get('id') => queryData값으로 id key값들을 가져온다 정도로 이해하고 진행해서요..작동은 되시나요?
      대화보기
      • shrkdvy
        혹시나해서
        작성해주신 부분
        var queryData = myURL.searchParams.get('id'); 에서

        searchParams까지만 작성해서 출력해봤는데

        searchParams: URLSearchParams { 'id' => 'CSS' }
        이렇게나옵니다.. 객체표현과다른것같은데 이부분에대해 설명해주실수있을까요 ?? 부탁드립니다!
        대화보기
        • shrkdvy
          혹시나해서
          작성해주신 부분
          var queryData = myURL.searchParams.get('id'); 에서

          searchParams까지만 작성해서 출력해봤는데

          searchParams: URLSearchParams { 'id' => 'CSS' }
          이렇게나옵니다.. 객체표현과다른것같은데 이부분에대해 설명해주실수있을까요 ?? 부탁드립니다!
          대화보기
          • shrkdvy
            밑에 댓글달아주신 대로 코드를 작성해봤는데도 undefinded로 밖에안나오네요 ㅠ..
            영상에서의 객체로 { id : HTML} 로 값을받을수는 없을까요,,,?
          • Jeong Il Haan
            20210413
          • unkwn98
            var _url = request.url;
            const myURL = new URL('http://localhost:3000'+_url);
            var queryData = myURL.searchParams.get('id');
            if(queryData) {
            } else {
            queryData = undefined;
            }
            url.parse()가 deprecated라고 되어있는 경우 다른 방법으로 queryData값을 가져와야 하기때문에 위의 방법으로 진행했더니 값을 받아올 수가 있었습니다. 도움이 되면 좋겠네요.
          • judicle
            URL
            protocol-host(domain name)-port(default:80)-path-query string

            http://
            opentutorials.org
            :3000
            /main
            ?id=HTML&page=12
          • kujern
            전혀 반응이 없다. 소스코드 그대로 복사해서 붙여넣어 실행했는데도 전혀 반응이 없음.
          • 21년 3월 24일 기준 url.parse()는 deprecated 되었습니다.
            Legacy로 작동하기는 하지만 현재는 조금 다른 방식으로 사용되네요.

            현재 쿼리를 추출하는 방법은 URL 객체와 .searchParams.get() 메서드를 통해서 동일하게 구현가능합니다.
            이떄 URL 객체는 입력값으로 '/?id=html'처럼 부분만 받는게 아니라 전체 url 주소를 요구합니다.
            var _url = URL('localhost:3030/?id=html')

            여기서 쿼리를 추출하려면 URL 객체의 메서드를 사용합니다.
            _url.searchParams.get('id');
            // html

            자세한 documentation은 아래 참조해 보셔요.
            https://nodejs.org......url
          • 허태민
            21.03.13
          • byoonn
            완료
          • 이해가 안되요.ㅜㅜ
          • chimhyangmoo
            2021.02.17 갑자기 어려워졌어요
          • 임보라
            parse에 deprecated 라면서 줄이 그어지는데 괜찮은 건가요??
          • jeisyoon
            2021.02.06 휴 ! 어렵네요 . . . . 완료
          • Gichang Lee
            그리고 죄송하지만, 하나만 더 여쭙자면, queryData 값이 [Object: null prototype] { id: 'HTML' } 이 나오는게 맞는건가요?
            대화보기
            • Gichang Lee
              그러면 사이트에 연결할 수 없음 이라는 페이지가 뜨는게 맞는건가요?
              대화보기
              • 마아앙
                01.30
              • 임찬혁
                완료
              • 뭄수
                완료
              • ohhigo
                21/1/22 querystring
              • 2020/01/19
              • wnstjd9701
                2021-01-15
              • 열심히공부하고싶
                저는 "실습하실 때 url 뒤에 ?id= 의 값을 직접 입력해주셔야 오류가 발생하지 않습니다. " 이게 뭔 소린지 몰라서 고생했네요. 저 같은 사람들을 위해서 남깁니다.

                저희가 이제까지 Console을 통해 node main.js 를 이용해서 홈페이지 서버를 연 후에 홈페이지에 접속할 때는 localhost:3000 만 치고 들어갔는데, 이 수업의 목표인 URL 의 QueryString 을 콘솔창에서 확인해보기 위해서는우리가 임의로 localhost:3000?id=HTML 으로 입력하고 홈페이지에 접속을 시도하라는거네요. 영상에서 본 것처럼 홈페이지가 안 뜨는게 맞구요 대신 콘솔에는 ?id=HTML이 나와야 됩니다.
                ?id=HTML 여기서 HTML 이라는 단어만 만 추출하기 위해서 parsing 하는 법을 검색해서 얻은겁니당..
                이제 이거 가지고 동적인 웹 페이지를 생성하겠지요..
              • 2020.12.29 완료
              • 손민철
                20/12/29 완료
              • 풀스택개발자
                2020 12 28
              • 생활둘기
                2020 12 24
              • kkn1125
                20.12.21 완료~!
              • 꿈치뚱
                20201221 완료
              • codeblue
                2020.12.10
              • 이윤재
                20201122완료
              • 2020.11.03.TUE.
              • 콜라
                20201013 완료
              • 비ㅣㄴ
                201013
              • Yong Hyun Lee
                완료 200930
              • 윤병록
                2020.09.23
              • OQ the YOUNG
                2020.09.08
              • helloworld
                20.9.7
              • CodingChan
                2020. 09. 05
              • 올파인
                감사합니다.
              • 마준
                완료
              • Itsyng
                쿼리스트링에 따라서 데이터를 출력하고 또 그데이터들을 바꿀수있다
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기