여기서는 전형적인 웹에플리케이션을 제작하는 방법을 알아봅니다.
현대적인 웹에플리케이션은 정보를 저장하는 공간으로 데이터베이스를 사용합니다만 우리는 수업의 난이도를 조절하기 위해서 배우기 쉬운 파일을 사용합니다. 데이터베이스를 활용하는 수업은 뒤에서 다시 다루겠습니다.
초심자에게는 많은 시간이 걸릴 수 있습니다. 충분한 시간을 확보하고 수업에 참여해주시면 좋겠습니다.
Server Side JavaScript
댓글
-
완료 -
요즘에 저작권문제로 jade가 pug로 바뀐걸로 알고있습니다.
-
완료!
-
2: 라우팅
부분을 그대로 따라 하고있는데...
app.get('/topic/new', function(req, res){
res.send('Hi');
})
이무분을
app.get('/topic/new', function(req, res){
res.render('new');
})
로 바꾸는데
No default engine was specified and no extension was provided.
이렇게 에러가 뜨네요...
바뀐건
res.send('Hi); 를
res.render('new'); 로 바꿔준거 밖에 없는데 말이죠...
어찌하면 좋을까요 ㅠㅠ
분명 views_file 에
new.jade 파일도 제대로 만들었는데 말이죠 -
서버측 render 함수에 의해서 템플린 파일로 전달된 값을 템플릿 파일 내의 자바스크립트 태그 안에서 받는 것이 안 됩니다. 어떻게 해야 할까요?
main.js 파일
app.get('/output', function(req, res){
var sql = 'select * from input';
conn.query(sql, function(err, rows_){
if(err){
console.log(err);
res.status(500).send('Internal Server Error');
} else {
res.render('output', {rows:rows_})}
})
});
output.jade 파일
html
head
meta(charset='utf-8')
body
script.
alert(rows[0].id) -
2장에서 왜안되는지 모르겠네....post로 안보내져요...
doctype html
html
head
meta(charset='utf-8')
body
form(action='/topic' method='post')
p
input(type='text' name='title' placeholder='title')
p
textarea(name='description', cols='30', rows='10')
p
input(type='submit') -
4번 영상 글목록을 만드는 부분에서,
node server를 재부팅한후
곧바로 GET /topic 하는 경우 에러가 뜨네요.
POST /topic/new를 한 후 GET /topic을 해야 접근이 가능한데
이유를 알 수 있을까요? -
진짜 감사합ㄴ디ㅏ!!
알짜배기로 정말 도움이 만힝 되고있씁니다^^ -
body-parser를 설치하셨는지요?
-
6.08
-
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);
} -
위에서 배열로서 라우터 연결할 때
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'이 값으로 들어간 것을 확인했는데 왜 이런 현상이 일어난지 알 수 있을까요?
모쪼록, 재미나게 잘 듣고 있습니다. 감사합니다. -
고생~ 하셨웁니다! 데헷
항상~ 감사합니다! 데헷 -
답변 감사합니다! -
아 자체 해결이 되어서 그뒤로 추가 사항을 안적어뒀네요 ㅎㅎ 답변 감사합니다!
-
app.js에 정말로 아무런 오류가 없다면 pug파일(혹은 jade)의 new에서 오타가 있는지 확인해보세요
-
제 생각에는 콘솔창의 에러라든가, 작성하신 포스트 부분의 코드라도 올려보시면 다른 사람들이 보고 답변을 하지 않을까 싶어요...
-
코드는 분명 몇번이고 확인해봤는데 게시글이 post방식으로 보내지지가 않습니다.
다른 에러창이 뜨지도 않는데 어떤식으로 확인해야할까요? -
article이라는 것은 왜 아무도 못 알아채는 거지
-
감사합니다. -
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'
라는 에러가 뜨는데 어떻게 해결할 수 있나요? -
감사합니다.ㅎㅎ
-
감사합니다!
-
감사함니다
-
너무감사합니다~
-
2-3:07 -
감사합니다!
-
글작성으로 가는 주소경로를 처리하는 get() 를 상세글보기로 가는 주소경로를 처리하는 get() 보다
소스 상의 위치에서 위에 배치하니까 해결되었습니다^^! -
정말 영어 못하시나요? 왠지 영어 못하신다는 말씀이 믿음이 안갑니다ㅋㅋ
마지막 동영상 강좌를 해보니까 중복된 라우팅도 깔끔하게 처리되서, 리액트가 어떤 장점이 있는지 더더욱 궁금해집니다.
전체 커리큘럼 중에서 아직 절반도 안했는데... 빨리 보고 저도 뭐 만들어보고 싶은데 얼마나 걸릴까요?
몸도 맘도 다 바쁘네요. 감사합니다^_____^!!! -
강의 잘보고잇습니다 감사합니다
-
감사합니다
-
5번째 동영상에서 10분53초에 해당되는 실습을 진행하고 있는데요
코드를 실행하면 cmd에 에러가 이렇게 뜨는데
이게 헤더를 set할 수 없고 보낼 수 없다는데 무슨 뜻인가요?
Can't set headers after they are sent. -
본문저장 까지.
감사합니다. -
감사합니다 ㅎㅎㅎ 3개월 전에 궁굼했다가 잊고 있던걸 지금에서 알게되니 더 기쁘네요
-
시간이 약 3개월전이지만 지금 공부하면서 해당 소스 돌려보니
readFile과 readdir 메소드의 속도 차이 인것 같네요.
해당 결론 과정으로는 각각의 메소드 블록 안 else 구문에 console.log(description)을 넣은 후 실행하였더니
readFile에선 description을 제대로 들고 오지만 readdir에선 undefined가 출력되었습니다.
그래서 readdir에 console.log(description)을 setTimeout 함수안에 넣어서 1초 뒤 실행하게 하였더니
제대로 된 값이 출력되었습니다.
제대로 작동이 되려면 readfile 메소드안의 else 블록 안으로 readdir 구문이 작성되어져야 할 거 같네요. -
어려웠지만 정말 재미있게 들었습니다. 좋은 강의 감사합니다! -
본문 읽기 동영상의 코드 중에 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을 할 필요가 없을 듯 하네요 ^^ -
function router(req, res, next) {
router.handle(req, res, next);
}
는
var router = function ( req, res, next ) {
...
};
과 같은 뜻이고
함수도 객체에요
위 예에서 익명함수 -
제가 이 동영상 다 보고 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를 찍어봤는데 안찍히더라고요. 기능도 안하는 함수를 왜 만들어두는 걸까요. 자바의 생성자같은 역활이라 생각했지만 그것도 아닌것같아서 혼란스럽습니다... ㅜㅜ 도와주세요. 같이 배우는 입장에서 부탁드립니다.
