Server Side JavaScript

웹에플리케이션 제작

여기서는 전형적인 웹에플리케이션을 제작하는 방법을 알아봅니다.

현대적인 웹에플리케이션은 정보를 저장하는 공간으로 데이터베이스를 사용합니다만 우리는 수업의 난이도를 조절하기 위해서 배우기 쉬운 파일을 사용합니다. 데이터베이스를 활용하는 수업은 뒤에서 다시 다루겠습니다. 

초심자에게는 많은 시간이 걸릴 수 있습니다. 충분한 시간을 확보하고 수업에 참여해주시면 좋겠습니다. 

오리엔테이션

라우팅

본문저장

글 목록 만들기

본문 읽기

코드의 개선

댓글

댓글 본문
작성자
비밀번호
  1. 바지락
    한참 헤맸네요. 왜 에러가 나는가 봤더니 jade가 pug로 바뀌면서 pug를 install 하셔야 합니다.
    npm install pug --save.
  2. 초초초초보
    'new' 부분도..

    if(id=='new'){
    res.render('new', {topics:files});
    }
    이런식으로... 다시 readdir을 할 필요가 없을 듯 하네요 ^^
    대화보기
    • fasdgoc
      function router(req, res, next) {
      router.handle(req, res, next);
      }



      var router = function ( req, res, next ) {
      ...
      };

      과 같은 뜻이고

      함수도 객체에요
      위 예에서 익명함수
      대화보기
      • hhjung1202
        제가 이 동영상 다 보고 express 자체 소스를 분석하고 있는데 이 소스가 도저히 왜쓰는지 이해가 되지 않아서 글을 씁니다 ./node_modules/express/lib/router/index.js 파일의 맨위 소스 내용인데
        var proto = module.exports = function(options) {
        var opts = options || {};

        function router(req, res, next) { // <-질문의 부분
        router.handle(req, res, next);
        }

        // mixin Router class functions
        router.__proto__ = proto;

        router.params = {};
        router._params = [];
        router.caseSensitive = opts.caseSensitive;
        router.mergeParams = opts.mergeParams;
        router.strict = opts.strict;
        router.stack = [];

        return router;
        }; 이런 내용의 소스였는데
        ---- function router(req, res, next) {
        ---- router.handle(req, res, next);
        ---- }

        이 부분을 왜 쓰는지 이유를 잘 모르겠습니다. console.log 로 찍어보니
        { [Function: router]
        params: {},
        _params: [],
        caseSensitive: false, ....... }
        위에서 처럼 되어있더라고요.
        원래는 router { ... } 이렇게 되어있을거라 생각했는데 말이죠

        [Function: router] 왜 이렇게 쓰여있는걸까요. 그리고 이렇게 함수를 작성하는게 의미가 있을겉 같아서 제가 이 모형대로 임시 소스를 만들어서 함수 안에 console,log를 찍어봤는데 안찍히더라고요. 기능도 안하는 함수를 왜 만들어두는 걸까요. 자바의 생성자같은 역활이라 생각했지만 그것도 아닌것같아서 혼란스럽습니다... ㅜㅜ 도와주세요. 같이 배우는 입장에서 부탁드립니다.
      • spacemonkey
        후 급 어려워지네요..ㅋㅋㅋㅋㅋ
      • ㅇㅅㅇ
        슈퍼바이저 사용하니까 No command 'supervisor' found 에러가 뜨네요
        글로벌로 설치햇는데도 안되는데 어떻게 해야하죠
        우분투 16.04쓰고 잇습니다
      • fasdgoc
        그렇게 순서를 하면 topic/new가 될 때 get으로 new.jade로 이동하는 것이 아니라

        new라는 파일이름을 읽으려고 시도해서 그럴거에여(/topic/:id (id가 new가 되는 상태))
        (만약 new라는 파일이 존재한다면 에러가 없을....거....에..여 ㅎㅎ)
        근데 순서가 그렇게 되면 새로운 토픽을 만ㄴ들지 못핡더에요

        먼저 로드되는 미들웨어 함수가 먼저 실행이 된다고 하네요

        http://expressjs.com......tml
        대화보기
        • fasdgoc
          감사합니다!!
        • lovesky
          안녕하세요. 항상 좋은 강의 감사하게 듣고 있습니다.
          저도 아래 글남기신 분들처럼 순서(뉴 글작성 페이지)가 아래에 가면 작동이 안되고, 토픽보다 위로 가야만 작동하는 문제가 있는데, 코드작성 순서에 대한 내용을 알 수 있을까요? 어떤 공식이 있는건지...
        • KS Hwang
          저도 같은 문제로 고민하다가 순서 때문이란 것을 알게 되었어요...
          그런데 단지 순서 때문에? 작동을 안해서 뭔가 안깔끔한? 느낌이 들어서 전 코드 이렇게 바꿔봤어요




          app.get(['/topic', '/topic/:id'], function(req, res) {
          fs.readdir('data', function(err, files){
          if(err){
          console.log(err);
          res.status(500).send('Internal Server Error1');
          }
          var id = req.params.id;

          if(id){ // id 값이 있을 때
          if(id=='new'){ // id가 new 일때
          fs.readdir('data', function(err, files){
          if(err){
          console.log(err);
          res.status(500).send('Internal Server Error2');
          }
          res.render('new',{topics:files});
          });
          } else { // id가 new가 아닐 때
          fs.readFile('data/'+id,'utf8', function(err, data){
          if(err){
          console.log(err);
          res.status(500).send('Internal Server Error3');
          }
          res.render('view',{topics:files, title:id, description:data});
          });
          }
          } else {
          // id 값이 없을 때
          res.render('view', {topics:files,title:'Welcome' ,description:'Hello, Javascript for server.'});
          }
          });
          });

          아이디어는 단지, id값이 있을때, id가 new라면.. id가 new가 아니라면.. 이런식으로 처리해봤어요. 더 코드를 깔끔하게 개선 할 수도 있을것 같은데 지금으로선 저에게 이게 최선이네요.. ㅠ

          이게 정답인지도 모르겠네요.
          대화보기
          • 이고잉님 만세
            너무 너무 감사히 잘보고 있습니다.
            article 태그가 오타난 것 같습니다.
            artcle > article 이 맞는거같아요.
          • ㅇㅇㅎ
            이제 진짜배기 프로그래밍을 배우는 것 같습니다.
            여러 예제를 통해서 실습하면서 완전히 제것으로 만들고 싶어요ㅠ
            혹시 이런 식의 예제 좀 구해주실 수 있으신가요?
            아니면 사이트아시는분 계시면 추천좀 부탁드려요ㅎ
          • kurdizle
            코딩의 순서가 많이 중요한가요? 이고잉님의 수업을 그대로 따라가면 문제가 되지 않는데, 저 혼자 공부 하면서는 라우터의 순서를 /topic -> /topic/:id -> /topic/new 이와 같이 했는데, 계속 /topic/:id 안에 있는 readFile의 err에 걸리면서 /topic/new 페이지로 접속이 되지 않더라구요. 그래서 이고잉님 코드와 같이 /topic/new 라우터를 최상위로 올리니 문제가 해결 됐습니다.

            계속 작성하면서 이게 설마 문제가 되겠나, 했는데 설마 정말 이거 때문인가요? ㅎㅎ

            항상 도움받고 있습니다. 이 자리를 빌려 감사하다는 말씀도 드리고 싶네요! :D
          • 류태선
            '6. 코드의 개선' 강의 내용 중에서 질문 있습니다.

            아무 id값 없이
            localhost:3000/topic
            로 들어갔는데, if문에서 id가 true 값이 되었습니다.
            id에 '/topic'이 값으로 들어간 것을 확인했는데 왜 이런 현상이 일어난지 알 수 있을까요?

            모쪼록, 재미나게 잘 듣고 있습니다. 감사합니다.
          • 지류진
            감사합니다^^
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기