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. mano
    2020/01/19
  2. wnstjd9701
    2021-01-15
  3. 열심히공부하고싶
    저는 "실습하실 때 url 뒤에 ?id= 의 값을 직접 입력해주셔야 오류가 발생하지 않습니다. " 이게 뭔 소린지 몰라서 고생했네요. 저 같은 사람들을 위해서 남깁니다.

    저희가 이제까지 Console을 통해 node main.js 를 이용해서 홈페이지 서버를 연 후에 홈페이지에 접속할 때는 localhost:3000 만 치고 들어갔는데, 이 수업의 목표인 URL 의 QueryString 을 콘솔창에서 확인해보기 위해서는우리가 임의로 localhost:3000?id=HTML 으로 입력하고 홈페이지에 접속을 시도하라는거네요. 영상에서 본 것처럼 홈페이지가 안 뜨는게 맞구요 대신 콘솔에는 ?id=HTML이 나와야 됩니다.
    ?id=HTML 여기서 HTML 이라는 단어만 만 추출하기 위해서 parsing 하는 법을 검색해서 얻은겁니당..
    이제 이거 가지고 동적인 웹 페이지를 생성하겠지요..
  4. Noah
    2020.12.29 완료
  5. 손민철
    20/12/29 완료
  6. 풀스택개발자
    2020 12 28
  7. 생활둘기
    2020 12 24
  8. kkn1125
    20.12.21 완료~!
  9. 꿈치뚱
    20201221 완료
  10. codeblue
    2020.12.10
  11. 이윤재
    20201122완료
  12. 2020.11.03.TUE.
  13. 콜라
    20201013 완료
  14. 비ㅣㄴ
    201013
  15. Yong Hyun Lee
    완료 200930
  16. 윤병록
    2020.09.23
  17. OQ the YOUNG
    2020.09.08
  18. helloworld
    20.9.7
  19. CodingChan
    2020. 09. 05
  20. 올파인
    감사합니다.
  21. 마준
    완료
  22. Itsyng
    쿼리스트링에 따라서 데이터를 출력하고 또 그데이터들을 바꿀수있다
  23. クレヨンしんちゃん
  24. 코딩조아
    20.08.3
  25. 누누
    완료
  26. 뚜따띠또따
    20/07/30 완료
  27. Jenny Song
    23th.JULY.2020 완료
  28. 코딩하는렌즈쟁이
    2020-07-23 (목)
    완료!
  29. 김혜린
    7월 15일 완료!
  30. 불스택
    20.07.09 완료 !
  31. 박영호
    출석스!!!
  32. 리다
    20200626 완료!
  33. Amousk
    좋은 강의 감사합니다.
  34. 암말
    위에 분이 말씀하셨던 것처럼 뒤에 /?id=HTML 이런식으로 적어보니까 강의가 이해가 되네요 ㅎㅎ
    대화보기
    • 2020.06.11
    • 사아
      문제가 있었지만 강의 다시 보면서 따라하니 해결되었어요!!
      완료!
    • isnotnormal
      혹시 해결하셨나요?? 동일한 문제가 발생합니다.
      대화보기
      • 김진수
        완료
      • 바다의왕자
        완료
      • 김재익
        쿼리 스트링에 따라 다른 정보를 보여주는 사이트 완료
      • Katherine Roh
        완료 :)
      • 암말
        아하 확인했습니다 ㅎㅎ 정말 감사해요!
        대화보기
        • 소종원
          작성하신 코드는 주소창에 url을 localhost:3000 만 입력했을 경우 문제 없이 페이지 출력이 되는 코드에요, 다만 url을 localhost:3000?id=HTML 이런식으로 작성했을 때는 에러가 나면서 페이지가 안뜨고 cmd에 /?id=HTML 이런식으로 뜨는걸 확인할 수 있을거에요, 그게 정상입니다. url이 뭔지 알아보는게 이 코드의 목적이니까요 에러가 나는건 맵핑되는 페이지가 없기 때문에 뜨는 것이고요. 주소창에 localhost:3000?id=HTML 이렇게 주소를 작성해보세요
          대화보기
          • 암말
            처음에 console.log로 id 값 출력할 때 이고잉님이랑 코드 똑같이 만들고 console.log(url); 문제 없이 써넣었는데

            C:\Users\user\Documents\웹페이지 연습\생활코딩\web2-node.js>node main.js <---- 파일 경로
            /
            /
            /
            /

            이렇게만 뜨네요;; 왜 저는 이고잉님 처럼 저렇게 안나오는걸까요? 가장 기본적인 것도 안되니까 진도를 나갈수가 없네요 ㅜㅜ
            혹시 제 코드에서 무슨 문제가 있는건지 봐주실 분 계신가요?

            var http = require('http');
            var fs = require('fs');
            var app = http.createServer(function(request,response){
            var url = request.url;
            console.log(url);
            if(url == '/'){
            url = '/index.html';
            }
            if(url == '/favicon.ico'){
            response.writeHead(404);
            response.end();
            return;
            }
            response.writeHead(200);
            response.end(fs.readFileSync(__dirname + url));

            });
            app.listen(3000);

            지적해주시면 감사하겠습니다 ㅜㅜ 빨리 백엔드 배우고 싶은데 답답해서 돌겠네요;;
            쿼리스트링 지정이 아니라 애초에 console.log에서 id값이 안나오는 겁니다!
          • 소종원
            이 강의는 url 뒤에 붙는 ?id=HTML 이러한 값들이 어떻게 적용되고 실제 그 값을 서버단에서 확인하고 뽑아보는 것에 의미가 있는 강의입니다. 쿼리스트링을 미리 지정하고 정적으로 지정해둔다면 그 의미가 퇴색되겠죠. request.url을 찍어보면 /?id=HTML 이런식으로 나옵니다. 이 값을 parse함수를 통해 객체 형식으로 변환 시켜서 그 안의 값을 찍어보고 확인하고, HTML 대신에 다른 값들도 넣어보면서 바뀌는 것을 확인하고 동적으로 url을 변경 시키는 것에 의미가 있는 강의입니다. 천천히 강의 따라가시고, 강의에 나오는 스택오버플로우의 코드도 붙여넣기 해서 확인해보시고 하시면 감을 찾을 수 있으실거같네요.
          • 박진우
            2020.05.17 오늘은 여기까지만
          • 윤영훈
            복습중!
          • 김유민
            20.05.01.완료
          • 코딩꿈나뮤
            코드 이해안되서 구글링하다가 다시 생활코딩으로 가버림
            https://opentutorials.org......770
          • 강윤지
            20.04.20.월 학습완료.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기