생활코딩

Coding Everybody

코스 전체목록

닫기

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. yjchun26
    2022/03/27 완료
  2. 농어
    생활코딩을 만나고 처음으로 막혔던 강의였어요.
    var queryData = url.parse(_url, true).query;

    console.log(queryData.id);

    의 결과가 null 값으로 나와서 당황했어요 ㅎㅎ 밑에 댓글분들 보고 해결 했습니다! 감사합니다
  3. chohjender
    다행입니다
    대화보기
    • ボロボロ
      웹IDE로 하는 중인데 이 코드로 하니까 잘 되네요
      대화보기
      • 20220302
      • 화려하게간다
        3회독 가즈아...
      • sene03
        실습하실 때 url 뒤에 ?id= 의 값을 직접 입력해주셔야 오류가 발생하지 않습니다. 쿼리스트링이 없는데 대체 뭘 받아오는건지 한참 고민했는데 영상 위에 글을 못 보고 있었네요.. 다른 분들은 삽질하시지 않길 바랍니다
      • chohjender
        현재 강의 속 코드는 url.parse 가 deprecate 되어서 21년도 3월 이후엔 작동이 되지 않습니다.
        강의 진행 중 get을 읽을 수 없다던지 그런 메세지가 cmd에 뜨시는 분들은 이 코드를 사용해보시면 될겁니다
        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 = new URL('http://localhost:3000' + _url).searchParams;
        console.log(queryData.get('id'));
        if(_url == '/'){
        url = '/index.html';
        }
        if(_url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
        }
        response.writeHead(200);
        //console.log(__dirname + url);
        response.end(queryData.id);

        });
        app.listen(3000);
      • chohjender
        이 방법으로 했을 때 id 값이 바뀌었음에도 불구하고 웹페이지에는 바뀐 id 값이 반영되지 않는데 왜 그런건가요?
        대화보기
        • 해결하지 못하구 지나갑니다..
        • 밍기
          2022-01-10 완료
        • 소설가
          2021-1-2 완료
          고맙습니다.
        • 김관호
          21.11.23.
        • 일억개
          여기서 재밌는 점은 _url로 URL을 받아서 바로 활용할 수 있는 것이 아니라, parse를 해야한다는 점
        • 호안오빠
          와.....헤매다가 어이없게 해결 했네요.
          무슨 이유 때문인지 몰라도 노드로 살린 포트 3000번이 살아있었네요.
          그냥 포트 죽이고 다시 실행하니 잘되네요. ㅎㅎㅎㅎㅎ
          이런경우도 있어요. 참고하세요.
        • 칸타타
          뒤에 css 까지 써주면 나오긴하는데 http://localhost......CSS 이런식으로
          근데 터미널상에는 아무 반응없고 강의도 이해가 잘안가고 기냥 다음으로 넘어 가나요?
        • 칸타타
          뒤에 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값을 가져와야 하기때문에 위의 방법으로 진행했더니 값을 받아올 수가 있었습니다. 도움이 되면 좋겠네요.
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기