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. 김관호
    21.11.23.
  2. 일억개
    여기서 재밌는 점은 _url로 URL을 받아서 바로 활용할 수 있는 것이 아니라, parse를 해야한다는 점
  3. 호안오빠
    와.....헤매다가 어이없게 해결 했네요.
    무슨 이유 때문인지 몰라도 노드로 살린 포트 3000번이 살아있었네요.
    그냥 포트 죽이고 다시 실행하니 잘되네요. ㅎㅎㅎㅎㅎ
    이런경우도 있어요. 참고하세요.
  4. 칸타타
    뒤에 css 까지 써주면 나오긴하는데 http://localhost......CSS 이런식으로
    근데 터미널상에는 아무 반응없고 강의도 이해가 잘안가고 기냥 다음으로 넘어 가나요?
  5. 칸타타
    뒤에 css 까지 써주면 나오긴하는데 http://localhost......CSS 이런식으로
    근데 터미널상에는 아무 반응없고 강의도 이해가 잘안가고 기냥 다음으로 넘어가야지
    대화보기
    • 칸타타
      내 터미널도 반응이없음...아짜증나
      대화보기
      • 칸타타
        소스 복사 붙여넣어도 터미널 반응이 다르고 웹에는 하얗게 아무것도 안나오고 뭔말인지 모르겠고 ㅋㅋㅋㅋ
      • 혹시 node main.js 를 터미널(cmd)에서 실행하시고 브라우저에서 작동을 안하신게 아닐지요??

        http://localhost......TML
        혹은
        http://localhost......CSS

        등을 사용해보세요.
        대화보기
        • 사이드체스트
          왜 cmd 에서 node main.js 가 반응이 없는걸까요??
          말씀하신 코드대로 작성한 것 같은데요 ㅠㅠ..
        • 전해성
          21.09.12 완료
        • 졸작완성하자
          21.09.05 완료.
        • 초딩 개발자
          2021/09/05
        • codeanywhere에서 작업하고 있는데요.. node main.js 했을때부터 에러나고 웹페이지가 아예 안뜨는데 같은 방법으로 진행하는게 맞는건가요?
        • everdoit
          막히네요 읔 일단 킵!
        • 고영히
          0823 완료
        • Kangmin Kim
          2021.8.21 완료
        • 승뇽뇽
          ㅇㄹ
        • 정서윤
          complete
        • 박사장
          21 07 28 좀 헤맸지만 완료!
        • 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
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기