Server Side JavaScript

Express-URL을 이용한 정보의 전달

여기서는 URL을 통해서 에플리케이션에 정보를 전달하는 방법에 대해서 알아봅니다. 

쿼리 스트링이란? 

Express의 query 객체의 사용  

 

 query 객체의 활용

 

의미론적인 URL (semantic url) 

아래는 query string을 이용해서 정보를 전달하는 방법을 보여주고 있습니다. 

app.get('/topic', function(req, res){
  var topics = [
    'Javascript is....',
    'Nodejs is...',
    'Express is...'
  ];
  var output = `
  <a href="/topic?id=0">JavaScript</a><br>
  <a href="/topic?id=1">Nodejs</a><br>
  <a href="/topic?id=2">Express</a><br><br>
  ${topics[req.query.id]}
  `
  res.send(output);
})
 

아래는 semantic URL 방식을 통해서 정보를 전달하는 모습을 보여주고 있습니다. 

app.get('/topic/:id', function(req, res){
  var topics = [
    'Javascript is....',
    'Nodejs is...',
    'Express is...'
  ];
  var output = `
  <a href="/topic?id=0">JavaScript</a><br>
  <a href="/topic?id=1">Nodejs</a><br>
  <a href="/topic?id=2">Express</a><br><br>
  ${topics[req.params.id]}
  `
  res.send(output);
})
app.get('/topic/:id/:mode', function(req, res){
  res.send(req.params.id+','+req.params.mode)
})

댓글

댓글 본문
작성자
비밀번호
  1. 오빠는다르다
    감사합니다~!
  2. Hyo Joo Jeong
    현재 express 4.x 쓰고 있는데

    <a href="/topic/0">JavaScript</a><br>
    <a href="/topic/1">Nodejs</a><br>
    <a href="/topic/2">Express</a><br><br>
    링크의 경로 설정을 저렇게 해야 에러가 안나네요..!
  3. Whoisy
    req.query 의 값을 보기 위해

    res.send(req.query.id + ', '+ req.query.name);

    방법도 있지만 json 형식으로 보기 위해

    res.json(req.query);

    로 바꿨습니다.
  4. 점점 재밌어집니다!
  5. Seo Yun Seok Tudoistube
    호수 위를 우아하게 거니는 백조를 보면 분명 호수 밑에 보이지 않는 백조의 바쁜 발 동작이 틀림없이 있으리라고
    생각하는데, API 문서를 가로지르며 포인트만 쏙쏙 찾는 이고잉님의 여유있고 위트있는 해설을 보면 강의 준비를
    위해 이 API 를 과연 몇번 보셨을까 궁금하네요^^;;
    감사합니다^_____^!!!
  6. 암이차오른다
    spring으로 수십,수백개의 주소처리 하느라 애먹은게 생각나네요...
    특히 param값 받아서 처리하는 주소지정방식은 계획 잘못짜면 나중에 고통받을것 같아서 ㅠㅠ...
  7. Steven Spark
    좋다... 하아
  8. enjoyPG
    잘은 모르겠지만 강의내용을 바탕으로 봤을 때,

    라우팅은 semantic URL방식으로 처리하고 들어온 id값이나 mode값등에 따라서 원하는 페이지나 내용이 나오게 하면 되는 것 같습니다.

    즉,
    namu.wiki/w/:title/:a/:b/:c/.../:z 이렇게 라우팅을 해주시면 라우팅 한번으로 끝난다는 거죠...
    거기서 들어온 title, a, b, c... 값에 따라 해당 내용을 res해주면 되는 것이구용

    제 설명이 부족하거나 잘못 되었으면 바로바로 수정부탁드립니다.. 초보라 잘 몰라서요 ㅎ;;
    대화보기
    • y9769852
      강의 감사드립니다.질문이 있어서 이렇게 댓글 남겨봅니다.나무위키는 node js + express 기반이라고 하는데요.예를들어 거기서 주소에 namu.wiki/w/문서제목/1/2/3/.../20 이런식으로 입력해도 에러없이 페이지가 나오는데 이렇게 구현하려면 라우트를 다 설정해주어야 하는지요?그 방법을 찾고 있는데 잘 나오지 않아 질문 드립니다.
    • 신입1
      감사합니다
    • 고맙습니다 ^^
    • 박첩구드
      감사합니다
    • 안녕하세요! 처음으로 댓글 올립니다
      semantic URL 이야기를 하시는 4번째 동영상을 따라하다가 알게 된 점이
      마지막 코드대로하면 Javascript Nodejs Express 라는 링크를 누르면 cannot get 에러를 낸다는 부분입니다.

      url은 ?id=1 로 가는데 막상 가야하는 url은 /1 이 아닌가 싶네요
    • 코딩bbs
      저의 구세주 egoing님 정말 감사합니다.
    • 유기농브래드
      강의 항상 감사합니다~
    • 욕심쟁이
      좋은 강의 감사합니다.
    • WayneKing
      매번 감사합니다.
    • 초보웹 개발자
      지난번에 제대로 이해하지 못하고 지나갔었는데
      html document 간 data의 공유도 이런 방법으로 사용할 수 있을것 같습니다.

      보안이 요구되는 정보의 공유는 이후에 나올것으로 기대합니다.
    • 헝헝
      이고잉님 키보드 어떤 키보드 사용하시나요? 뭔가 소리가 두두두둑 하는데 좋네요.
    • egoing
      아래와 같이 정리 해봤습니다. 의견 감사하고요 :)

      req : 변수 req에 Request 객체가 담겨 있습니다.
      req.query : 객체 Request의 query 프로퍼티에는 Query 객체가 담겨 있습니다.
      req.query.id : 객체 Query의 id 프로퍼티에는 url을 통해서 전달된 id 값(?id=값)이 들어있습니다.

      변수가 객체에 속해 있을 때 프로퍼티(Property)라고 하고,
      함수가 객체에 속해 있을 때 메소드(method)라고 합니다.
      대화보기
      • 쿼리 객체 사용법 영상을 보다가 질문과 의견이 있어서 적어봅니다.

        질문1.
        "req.query 프로퍼티에 id, name, q 등등 프로퍼티 값을 가질 수 있다."- 영상 내용중 이부분에 대해 질문이 있습니다.
        이 말씀을 정리하면, req객체의 프로퍼티중 query라는 프로퍼티가 있고 이 것은 객체 타입인데, query객체의 프로퍼티로, id name, q (쿼리 스트링)을 가질 수 있다. 이 말씀이시지요?

        의견1.
        중간 부분에 "프로퍼티는 변수라고 생각하시면 됩니다"라는 부분이 뒷 부분에 나오는 'req객체의 query객체의'.이 설명에 조금 혼돈이 있지 않을까 합니다.
        용어의 정확한 의미 및 용어를 통일해서 설명 해주시면 더 좋을 것 같습니다. (프로퍼티, 변수, 객체)
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기