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. 코딩조아
    20.08.3
  2. 누누
    완료
  3. 뚜따띠또따
    20/07/30 완료
  4. Jenny Song
    23th.JULY.2020 완료
  5. 코딩하는렌즈쟁이
    2020-07-23 (목)
    완료!
  6. 김혜린
    7월 15일 완료!
  7. 불스택
    20.07.09 완료 !
  8. 박영호
    출석스!!!
  9. 리다
    20200626 완료!
  10. Amousk
    좋은 강의 감사합니다.
  11. 암말
    위에 분이 말씀하셨던 것처럼 뒤에 /?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.월 학습완료.
          • Eunsung Shin
            완료
          • 알로
            완료
          • 밑의 유레카님의 말이 틀린것은 아니지만 이 강의는 그런 의도로 만들어지지 않았습니다.
            저도 처음에는 이게 뭔소리고 제대로 작동이 되는건가 싶었는데,
            다시 천천히 보면서 따라하니까 결과도 같았고 이해도 됬습니다.
            이 강의는 localhost:3000/?id=something 에서 something의 값에 따라서 qeuryData의 값이 바뀐다는 것을 보여주기 위한것입니다.
          • 완료
          • 준바이
            ㅇㄹ
          • 알잘딱깔센
            20.03.11 완료.
          • 20.03.08 완료
          • 유유유
            밑에 유레카님이 지적해주신 것처럼 쿼리스트링을 미리 작성하고, 그 작성된 쿼리스트링으로 연결하는 식으로 해야하는게 정상이 아닌가 싶네요
            대화보기
            • eddylee123456
              복습
            • 마운틴고릴라
              일단 기존의 HTML 파일에서 ID (CSS, JavaScript, HTML) 값이 어떻게 나오는 건가요? 저는 console.log를 통한 id 값 출력부터 안되었어요 ㅠㅠ html 파일이 그 사이 뭔가 수정이 되었나 하고 수업 초반에 올려주신 파일도 확인했고 그 파일로 코딩도 해봤지만 그쪽 파일이 수정된 건 없는 거 같던데...

              아래 쪽에 유레카 님이 올려주신 코드를 사용해보니 제대로 돌아가는 거 같고 의도한대로 출력되 되고 있는데....(, , 혹시 앞에서 제가 놓친 수업이 있을까요... 이거 말고 html 파일이나 링크 쪽에 id를 지정해주는 수업이 있었던 걸까요...
            • eddylee123456
              완료
            • 한강
              완료~~^^!
            • 스티븐잡숴
              완료
            • web1 html 강의랑 nodejs 이번 9번째 강의 이전에
              댓글에서 언급하신 코드를 특별히 설명해주신 적이 있었나요?
              어디서 복습을 해야 하는지 모르겠어서요
              대화보기
              • URL의 쿼리스트링에서 id에 대입된 게 무엇인지를 알아보는게 이번 수업 목적맞나요 ...

                만약 쿼리스트링의 ?id= 이하 부분에 전혀 상관없는, 예컨대
                PARK 이라는 단어가 들어가도
                예제에서 HTML이 찍혔던 것처럼 계속 PARK 이라고 찍히는 게 맞는거죠?
              • 이소영
                감사합니다!
              • JongHan Park
                완료
              • 로린
                완료
              • 먀뱌뱌
                잘 안되시는 분들 앞 강의들중에서

                response.end(fs.readFileSync(__dirname + url));

                이거하고 파일이름을 한번 생각해보셔요

                저는 복습하고 나서야 이해를 했네요...!
              • 임은정
                완료
                왜 안되나했더니
                js 수정사항이 있었군요 댓글 감사합니다.
              • 잘 봤습니다. 감사합니다.
              • JT_brand
                감사합니다 겨우 이해했네요 ㅎ
              • 유레카
                강의에 보시면 갑자기 '/?id=HTML'로 넘어가서 당황스러운 분들께...

                이전 강의까지 코딩한 내용에 따르면 response.end가 '__dirname+url' 입니다. 그러니까 당연히 localhost:3000들어가서 다른 페이지 누르면 경로+url로 페이지가 로드 됩니다. 그런데 강의가 잘못된게 querystring이 나옵니다. 뭔가 코딩이 바뀌었는데 누락된 것으로 보입니다.

                이전 강의의 코딩으로는 querystring을 보거나 확인 할 수 없습니다. dirname+url로 가게끔 코딩이 되었기 떄문이지요.. 위에 소스에 따르면 response.end(queryData.id); 로 찍고 queryData를 직접 입력해줘야, 본문에 queryData.id가 나옵니다; response.end(queryData.id);

                그러니까 다시말하면 querystring을 페이지 a태그를 눌러서 확인하는게 아니라, querystring을 설정해준 다음에 페이지 a태그를 눌러 해당 querystring의 페이지로 가도록 코딩해줘야 됩니다. 본말이 전도된 격입니다. 쿼리스트링은 index.html을 node로 불러와서 어딘가에서 프로그래머가 확인하는 것이 아닙니다. 쿼리스트링을 미리 작성해주어야 합니다. template에서 a태그의 href를 쿼리스트링이 포함되도록 수정한 뒤, 실행하여 나머지 코드를 작성해야 합니다. 강의가 잘못됬는데 제가 놓친 부분이 있나 해서 고민 많이 했다가 이제 이해하였습니다...

                제 소스를 공유하여 보내드립니다.

                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;
                var title = queryData.id;
                console.dir(queryData);
                if (_url == '/') {
                title = 'Welcome' }
                if (_url == '/favicon.ico') {
                return response.writeHead(404);
                }
                response.writeHead(200);
                var template = `
                <!doctype html>
                <html>
                <head>
                <title>WEB1 - ${title}</title>
                <meta charset="utf-8">
                </head>
                <body>
                <h1><a href="/">WEB</a></h1>
                <ol>
                <li><a href="/?id=HTML">HTML</a></li>
                <li><a href="/?id=CSS">CSS</a></li>
                <li><a href="/?id=JavaScript">JavaScript</a></li>
                </ol>
                <h2>${title}</h2>
                <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
                <img src="coding.jpg" width="100%">
                </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
                </p>
                </body>
                </html>
                `
                response.end(template);

                });
                app.listen(3000);
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기