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. 사이드체스트
    왜 cmd 에서 node main.js 가 반응이 없는걸까요??
    말씀하신 코드대로 작성한 것 같은데요 ㅠㅠ..
  2. 전해성
    21.09.12 완료
  3. 졸작완성하자
    21.09.05 완료.
  4. 초딩 개발자
    2021/09/05
  5. codeanywhere에서 작업하고 있는데요.. node main.js 했을때부터 에러나고 웹페이지가 아예 안뜨는데 같은 방법으로 진행하는게 맞는건가요?
  6. everdoit
    막히네요 읔 일단 킵!
  7. 고영히
    0823 완료
  8. Kangmin Kim
    2021.8.21 완료
  9. 승뇽뇽
    ㅇㄹ
  10. 정서윤
    complete
  11. 박사장
    21 07 28 좀 헤맸지만 완료!
  12. Jong Hak Lee
    감사합니다.
    대화보기
    • labis98
      20210720 completed!
    • 냥갱
      안녕하세요 :) 항상 잘 보고 있고, 잘 익히고 있었는데, 이 강의에서 갑자기 막혔습니다...
      위의 동영상에 나온 대로, 똑같은 코드를 실행시켰는데,
      cmd가 freezing 되어, 아무런 동작을 하지 않습니다...
      혹시 이유와 해결 방법을 아시는 분 있으신가요??
    • 2021.07.17
    • 최강의프론트엔드개발자
      하 갑자기 어려워졌다...
    • 현재 그냥 위 코드로 진행해도 별 에러는 없는것같은데, 뭐가 변경된거죠?
      대화보기
      • 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에 해당하는 데이터를 불러오는 코드입니다.
      • 트루트
        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);
      • 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 완료
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기