Server Side JavaScript

웹에플리케이션 제작

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

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

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

오리엔테이션

라우팅

본문저장

글 목록 만들기

본문 읽기

코드의 개선

댓글

댓글 본문
작성자
비밀번호
  1. 김혜경
    6.08
  2. 꿈같은인생
    var result = {fileList:files};
    var id = req.params.id;
    if (id) {
    fs.readFile('document/' + id, 'utf8', function (err, data) {
    if (err) {
    res.status(500).send('Internal Server Error');
    }
    result['title'] = id;
    result['description'] = data;
    res.render('detail', result);
    });
    } else {
    res.render('detail', result);
    }
  3. 위에서 배열로서 라우터 연결할 때
    app.get(['/topic', '/topic/:id']) 이 부분을
    app.get(['/topic', '/:id'])
    이런 식으로 적으신거아닌가요?
    id 값에 /topic이 드간거면 원래는 링크 클릭하는 이벤트에 호응하여
    id 값에 javascript 이런게 와야될탠데
    대화보기
    • 이유리
      감사합니다.
    • 에러메세지를 불특정 다수에게 자세하게 공개하지 않는 이유는 해킹의 빌미가 될 수 있기 때문.
      중복의 제거.. readFile, readdir 등등의 사용법
      path를 배열로 지정해서 처리할 수도 있다.
    • 3일동안 보고 또봤네요.
      처음 볼때 다 이해는했는데
      직접 코드를 짜보려니까 너무 막막하더라구요.
      매일 한번씩 직접 안보고 해보니까
      이해가 됩니다~
      그리고 기대가 됩니다~
    • 라울
      저도 아래 류태선님과 같은 오류가 발생하네요.


      '6. 코드의 개선' 강의 내용 중에서 질문 있습니다.

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

      모쪼록, 재미나게 잘 듣고 있습니다. 감사합니다.
    • madnomad
      고생~ 하셨웁니다! 데헷
      항상~ 감사합니다! 데헷
    • 뽕샤뽕샤
      답변 감사합니다!
      대화보기
      • 뽕샤뽕샤
        아 자체 해결이 되어서 그뒤로 추가 사항을 안적어뒀네요 ㅎㅎ 답변 감사합니다!
        대화보기
        • Manngold
          app.js에 정말로 아무런 오류가 없다면 pug파일(혹은 jade)의 new에서 오타가 있는지 확인해보세요
          대화보기
          • kind65505256@gmail.com
            제 생각에는 콘솔창의 에러라든가, 작성하신 포스트 부분의 코드라도 올려보시면 다른 사람들이 보고 답변을 하지 않을까 싶어요...
            대화보기
            • 뽕샤뽕샤
              코드는 분명 몇번이고 확인해봤는데 게시글이 post방식으로 보내지지가 않습니다.
              다른 에러창이 뜨지도 않는데 어떤식으로 확인해야할까요?
            • 개발조아
              article이라는 것은 왜 아무도 못 알아채는 거지
            • Byungsoo Kim
              감사합니다.
            • 박인호
              view.jade 파일안에서 반복문(each)을 실행할 때 필요한 변수가 전달되지 않아서 뜨는 메시지 인 것 같습니다.
              반복문을 실행하기 위해서는 내부적으로 length프로퍼티가 필요한데, 해당 프로퍼티를 제공할 변수가 존재하지 않기 때문입니다.
              jade파일을 렌더링 하는 res.render() 메소드의 두 번째 인자로 들어오는 객체 중에 빠진 변수가 있는지 확인해 보시면 될 것 같네요.
              (jade 파일내의 each를 실행하는 변수가 빠진것으로 보임)
              대화보기
              • 박인호
                1-11
                수강완료.
                감사합니다. nodejs를 이용해서 웹 애플리케이션을 어떻게 구현하는지에 대한 감이 잡히네요 ㅎㅎ
              • 내이름은이한샘
                감사합니다.!!! 좋은 강의 너무 감사합니다.! 이고잉 선생님 새해 복 많이 받으세요.!
              • 너무 어렵지만ㅠㅜㅠ 다시 한번 반복해서 공부해보겠습니다!
              • 하루살이
                저는 System Engineer인데 개발에는 문외한인데..
                덕분에 많은 도움 됩니다.
                정말 좋은 강의 감사합니다. 잘보고 갑니다.
              • 코딩하자
                글 목록 만들기 영상에서 view.jade의 each topic in topics에서
                'Cannot read property 'length' of undefined'
                라는 에러가 뜨는데 어떻게 해결할 수 있나요?
              • 박준영
                감사합니다.ㅎㅎ
              • 은행동주민
                감사합니다!
              • 이성준
                감사함니다
              • hanorange
                너무감사합니다~
              • 겸손겸손
                2-3:07
              • 몽몽이
                감사합니다!
              • Seo Yun Seok Tudoistube
                글작성으로 가는 주소경로를 처리하는 get() 를 상세글보기로 가는 주소경로를 처리하는 get() 보다
                소스 상의 위치에서 위에 배치하니까 해결되었습니다^^!
                대화보기
                • Seo Yun Seok Tudoistube
                  정말 영어 못하시나요? 왠지 영어 못하신다는 말씀이 믿음이 안갑니다ㅋㅋ
                  마지막 동영상 강좌를 해보니까 중복된 라우팅도 깔끔하게 처리되서, 리액트가 어떤 장점이 있는지 더더욱 궁금해집니다.
                  전체 커리큘럼 중에서 아직 절반도 안했는데... 빨리 보고 저도 뭐 만들어보고 싶은데 얼마나 걸릴까요?
                  몸도 맘도 다 바쁘네요. 감사합니다^_____^!!!
                • 초급개발자
                  강의 잘보고잇습니다 감사합니다
                • 신입1
                  감사합니다
                • programmer very GOSU
                  5번째 동영상에서 10분53초에 해당되는 실습을 진행하고 있는데요
                  코드를 실행하면 cmd에 에러가 이렇게 뜨는데
                  이게 헤더를 set할 수 없고 보낼 수 없다는데 무슨 뜻인가요?
                  Can't set headers after they are sent.
                • 신입1
                  본문저장 까지.
                  감사합니다.
                • 18choi18@naver.com
                  감사합니다 ㅎㅎㅎ 3개월 전에 궁굼했다가 잊고 있던걸 지금에서 알게되니 더 기쁘네요
                  대화보기
                  • 24passions
                    시간이 약 3개월전이지만 지금 공부하면서 해당 소스 돌려보니
                    readFile과 readdir 메소드의 속도 차이 인것 같네요.
                    해당 결론 과정으로는 각각의 메소드 블록 안 else 구문에 console.log(description)을 넣은 후 실행하였더니
                    readFile에선 description을 제대로 들고 오지만 readdir에선 undefined가 출력되었습니다.
                    그래서 readdir에 console.log(description)을 setTimeout 함수안에 넣어서 1초 뒤 실행하게 하였더니
                    제대로 된 값이 출력되었습니다.
                    제대로 작동이 되려면 readfile 메소드안의 else 블록 안으로 readdir 구문이 작성되어져야 할 거 같네요.
                    대화보기
                    • 괜찮아
                      어려웠지만 정말 재미있게 들었습니다. 좋은 강의 감사합니다!
                    • chsss
                      본문 읽기 동영상의 코드 중에 id를 가지고 오는 get방식의 라우터를 이렇게 작성하면 topic.jade에서 description을 인식하지 못하는 이유가 무엇인지 알 수 있을까요
                      app.get('/topic/:id', function(req, res){
                      var id = req.params.id;
                      var description;
                      fs.readFile('data/'+id, 'utf8', function(err, data){
                      if(err){
                      console.log(err);
                      res.status(500).send('에러 발생!');
                      }
                      description = data;
                      });
                      fs.readdir('data', function(err, files){
                      if(err){
                      console.log(err);
                      res.status(500).send('에러 발생!');
                      }
                      res.render('topic', { titles:files, id:id, description:description });
                      });
                      });
                    • 바지락
                      한참 헤맸네요. 왜 에러가 나는가 봤더니 jade가 pug로 바뀌면서 pug를 install 하셔야 합니다.
                      npm install pug --save.
                    • 초초초초보
                      '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
                            버전 관리
                            egoing
                            현재 버전
                            선택 버전
                            graphittie 자세히 보기