생활코딩

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. carpediem
    23.09.03 완료!
  2. 어흥
    23.06.28.
  3. 2022.12.27
    protocol://host(domain):port/path?query string
  4. 감자
    22.11.30 완료
  5. 드가자
    http://localhost......TML 을 입력하면 페이지에 HTML이 출력되고
    http://localhost......를 입력하면 페이지에 CSS가 출력된다
    response.end라는 코드는 (queryData.id)의 값을 페이지에 출력하는 역할이다
    따라서 이제 http://localhost......의 뒤에 오는 (queryData.id)값을 변경하면
    http://localhost......TML
    http://localhost......CSS 등등의 여러가지 페이지를 만들어낼 수 있다
  6. 드가자
    Node.js - 웹서버 만들기에서 이어지는 강의인데 난이도가 높은것 같습니다
  7. 당당
    2022.10.15
  8. 뿔고래
    사용자가 우리에게 준 정보를 그대로 사용자에게 출력해주었다. 여기에 더 나아가면 사용자가 요청한 정보를 적절하게 출력할 수 있을 것 같다는 생각이 든다.
  9. i_am_es
    2022-08-04
  10. 아캔두잇
    20220804 완료
  11. 키다리아저씨
    220714완
  12. toonfac
    220704 오전 2시 50분 완료
  13. yjchun26
    2022/03/27 완료
  14. 농어
    생활코딩을 만나고 처음으로 막혔던 강의였어요.
    var queryData = url.parse(_url, true).query;

    console.log(queryData.id);

    의 결과가 null 값으로 나와서 당황했어요 ㅎㅎ 밑에 댓글분들 보고 해결 했습니다! 감사합니다
  15. chohjender
    다행입니다
    대화보기
    • ボロボロ
      웹IDE로 하는 중인데 이 코드로 하니까 잘 되네요
      대화보기
      • chio
        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 값이 반영되지 않는데 왜 그런건가요?
        대화보기
        • Zorba
          해결하지 못하구 지나갑니다..
        • 밍기
          2022-01-10 완료
        • 소설가
          2021-1-2 완료
          고맙습니다.
        • 김관호
          21.11.23.
        • 일억개
          여기서 재밌는 점은 _url로 URL을 받아서 바로 활용할 수 있는 것이 아니라, parse를 해야한다는 점
        • 호안오빠
          와.....헤매다가 어이없게 해결 했네요.
          무슨 이유 때문인지 몰라도 노드로 살린 포트 3000번이 살아있었네요.
          그냥 포트 죽이고 다시 실행하니 잘되네요. ㅎㅎㅎㅎㅎ
          이런경우도 있어요. 참고하세요.
        • 칸타타
          뒤에 css 까지 써주면 나오긴하는데 http://localhost......CSS 이런식으로
          근데 터미널상에는 아무 반응없고 강의도 이해가 잘안가고 기냥 다음으로 넘어 가나요?
        • 칸타타
          뒤에 css 까지 써주면 나오긴하는데 http://localhost......CSS 이런식으로
          근데 터미널상에는 아무 반응없고 강의도 이해가 잘안가고 기냥 다음으로 넘어가야지
          대화보기
          • 칸타타
            내 터미널도 반응이없음...아짜증나
            대화보기
            • 칸타타
              소스 복사 붙여넣어도 터미널 반응이 다르고 웹에는 하얗게 아무것도 안나오고 뭔말인지 모르겠고 ㅋㅋㅋㅋ
            • pdpd
              혹시 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 되어, 아무런 동작을 하지 않습니다...
                  혹시 이유와 해결 방법을 아시는 분 있으신가요??
                • Duke
                  2021.07.17
                • 최강의프론트엔드개발자
                  하 갑자기 어려워졌다...
                • Xeros
                  현재 그냥 위 코드로 진행해도 별 에러는 없는것같은데, 뭐가 변경된거죠?
                  대화보기
                  • 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에 해당하는 데이터를 불러오는 코드입니다.
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기