생활코딩

Coding Everybody

코스 전체목록

닫기

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. 21.7.22 done
  2. 굼벵이
    완료
  3. 최재강
    20181227 잘들엇습니다
  4. 수박바
    세멘틱 이거 코드이그나이터 방식 아닌가요?
    이 방식 사용하면 정말 깔끔한데..
  5. jiwan
    20180904 강의 잘 들었습니다!
  6. 이승우
    20180809 완료
  7. 정병찬
    2018 08 09 오전 2시03분
  8. 김혜경
    6.06
  9. 이유리
    감사합니다.
  10. antil
    시맨틱 웹에 대해서 알게 되고 그것을 구현하는 방법....... 재밌었습니다 감사합니다
  11. 라울
    감사합니다!
  12. websterking
    아! 이 형태를 시멘틱url이라고 부르는군요. 마침 궁금했던 부분인데 딱 강의에서 나왔네요~ 감사합니다,
  13. kind65505256@gmail.com
    정교하지는 않지만, 급한대로 지금 써야 한다면 다음을 참고해 보세요.

    app.get들과 app.listen 사이에

    app.use((req, res)=>{
    res.send(404, '그런 경로는 없습니다.');
    });

    각 app.get 속의 res.send를 만나면 즉시 send를 하고 종료되지만,
    그러한 경로를 만나지 못하면 죽 건너뛰고 미들웨어인 app.use를 만나게 되고,
    app.use 속의 res.send의 첫번째 매개변수에는 200, 404, 500 등의 응답코드를 넣을 수 있고,
    두번째 매개변수에는 응답하고 싶은 내용을 적을 수 있습니다.

    이렇게 넣으면 어떠한 경로를 들어와도 내가 확실히 정한 params 외에는 모두 app.use로 응답할 수 있습니다.
    대화보기
    • 이렇게하면 될꺼같아요
      const topics = [
      'JavaScript....',
      'Node js....',
      'express...'
      ];

      let link = "";
      for (i=0; i<3; i++){
      const id = i;
      link = link + "<a href="+"/topic/"+id+">"+id+"</a><br/>"
      }
      link = link + `<br/><br/><h1>${topics[req.params.id]}</h1>`

      res.send(link);
      대화보기
      • 박인호
        1-9
        수강완료.
        감사합니다.
      • Byungsoo Kim
        감사합니다.
      • 내이름은이한샘
        잘봤습니다.! 감사합니다.!!!
      • 은행동주민
        계속 잘 듣고 있습니다. 감사합니다!
      • 이성준
        좋은강의감솨합니다!
      • 오빠는다르다
        감사합니다~!
      • 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>
        링크의 경로 설정을 저렇게 해야 에러가 안나네요..!
      • Whoisy
        req.query 의 값을 보기 위해

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

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

        res.json(req.query);

        로 바꿨습니다.
      • 점점 재밌어집니다!
      • Seo Yun Seok Tudoistube
        호수 위를 우아하게 거니는 백조를 보면 분명 호수 밑에 보이지 않는 백조의 바쁜 발 동작이 틀림없이 있으리라고
        생각하는데, API 문서를 가로지르며 포인트만 쏙쏙 찾는 이고잉님의 여유있고 위트있는 해설을 보면 강의 준비를
        위해 이 API 를 과연 몇번 보셨을까 궁금하네요^^;;
        감사합니다^_____^!!!
      • 암이차오른다
        spring으로 수십,수백개의 주소처리 하느라 애먹은게 생각나네요...
        특히 param값 받아서 처리하는 주소지정방식은 계획 잘못짜면 나중에 고통받을것 같아서 ㅠㅠ...
      • Steven Spark
        좋다... 하아
      • 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
          감사합니다
        • real
          고맙습니다 ^^
        • 박첩구드
          감사합니다
        • 안녕하세요! 처음으로 댓글 올립니다
          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 자세히 보기