생활코딩

Coding Everybody

App - 홈페이지 구현

2018-06-01

토픽 생활코딩 > WEB > WEB2 - Node.js

수업소개

조건문을 활용해서 홈페이지를 표현하는 방법을 살펴봅니다.

강의

소스코드

main.js

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;
    if(pathname === '/'){
      if(queryData.id === undefined){
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <body>
            <h1><a href="/">WEB</a></h1>
            <ul>
              <li><a href="/?id=HTML">HTML</a></li>
              <li><a href="/?id=CSS">CSS</a></li>
              <li><a href="/?id=JavaScript">JavaScript</a></li>
            </ul>
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      } else {
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var title = queryData.id;
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <body>
            <h1><a href="/">WEB</a></h1>
            <ul>
              <li><a href="/?id=HTML">HTML</a></li>
              <li><a href="/?id=CSS">CSS</a></li>
              <li><a href="/?id=JavaScript">JavaScript</a></li>
            </ul>
            <h2>${title}</h2>
            <p>${description}</p>
          </body>
          </html>
          `;
          response.writeHead(200);
          response.end(template);
        });
      }
    } else {
      response.writeHead(404);
      response.end('Not found');
    }
});
app.listen(3000);

봤어요 753명

댓글

qq6개월 전

조건문(url)에 따라 홈페이지를 다양하게 구현.

답글
비전공자7개월 전

오전 12:16 2024-04-21

답글
Sansol Park10개월 전

맞아요. 강의 그대로 따라해도 오류가 날 때도 있는데, 강의대로 코드를 똑같이 쓰는 게 아닐 때는 더 어렵죠. ㅠㅠ

그 심정 넘넘 공감합니다.
대화보기
답글
hwan10개월 전

와..항상 감사합니다 ㅜㅜ 이게 강의대로 코드를 똑같이 쓰는게 아니다보니 계속 에러가 나네요
대화보기
답글
Sansol Park10개월 전

Welcome과 Hello, Node.js가 null, undefined로 나오는 것은 fs.readFile 함수를 호출하는 조건문의 로직에서 발생하는 문제 같습니다. 코드를 살펴보면, queryData.get('id') 가 undefined일 때, 즉 쿼리 파라미터 id가 없을 때 환영 메시지를 보여주어야 하는데, 실제로는 파일을 읽으려 시도하고 있습니다.

fs.readFile 함수는 파일 시스템에서 파일을 비동기적으로 읽을 때 사용하는데, 여기서 data/${queryData.get('id')} 경로를 사용하면 id값이 undefined일 때 data/undefined 경로를 읽으려 시도하게 됩니다. 이 경로에 파일이 없으니, null 또는 undefined가 반환되는 것입니다.

아래 코드는 해당 부분을 수정한 예시입니다:

var http = require('http');
var fs = require('fs');

var app = http.createServer(function(request,response){
var _url = request.url;
var urlObj = new URL('http://localhost:5000' + _url);
var pathname = urlObj.pathname;

if(pathname === '/'){
if(!urlObj.searchParams.has('id')){
// id 쿼리 파라미터가 없을 때
var title = 'Welcome';
var description = 'Hello, Node.js';
// 생략된 템플릿 코드...
response.writeHead(200);
response.end(template);
} else {
// id 쿼리 파라미터가 있을 때 파일 읽기
fs.readFile(`data/${urlObj.searchParams.get('id')}`, 'utf8', function(err, description){
if(err){
// 파일을 읽는 중 에러가 발생했을 때 처리
response.writeHead(404);
response.end('Not found');
return;
}
var title = urlObj.searchParams.get('id');
// 생략된 템플릿 코드...
response.writeHead(200);
response.end(template);
});
}
} else {
response.writeHead(404);
response.end('Not found');
}
});

app.listen(5000);

위 코드에서는 id 쿼리 파라미터의 존재 여부를 체크하여, 없으면 환영 메시지를 보여주고, 있으면 해당 id에 해당하는 파일을 읽습니다. 파일 읽기에 실패했을 경우에는 404 에러를 반환하도록 처리하였습니다.
대화보기
답글
hwan10개월 전

답변 감사합니다. 그런데 홈페이지에서 Welcome과 Hello, Node.js가 아니라 null, undefined로 나오는건 어떤 이유일까요?
대화보기
답글
Sansol Park10개월 전

홈페이지에서 "Not found" 메시지가 계속 나타나는 이유는 pathname을 가져오는 방식에 문제가 있어 보입니다. new URL 객체를 만들 때 pathname을 별도의 search parameter로 가져오려 하셨는데, 이는 URL 객체의 구조와 맞지 않습니다. pathname은 URL 객체의 속성으로 직접 접근해야 합니다.

아래는 수정된 코드 조각입니다:

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
var _url = request.url;
var urlObj = new URL('http://localhost:5000' + _url);
var queryData = urlObj.searchParams;
var pathname = urlObj.pathname; // 여기를 수정했습니다.

if(pathname === '/'){ // 이 부분이 실행될 것입니다.
// ... 나머지 코드 ...
} else {
response.writeHead(404);
response.end('Not found');
}
});

app.listen(5000);

이제 pathname은 올바르게 처리되어 / 경로로 요청이 들어왔을 때 기대하는 대로 작동할 것입니다. 또한, queryData.get('id') 부분도 정상적으로 작동할 것입니다. 그러나 fs.readFile 내부에서 var title = queryData.id; 라고 사용하신 부분은 var title = queryData.get('id');로 수정해야 합니다. queryData는 URLSearchParams 객체이며, id 속성을 직접 접근할 수 없기 때문입니다.

위 코드를 참고하여 수정하시면 홈페이지가 "Not found" 대신에 기대하는 페이지를 보여줄 것입니다.

GPT-4의 답변입니다.
대화보기
답글
hwan10개월 전

var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = new URL('http://localhost:5000' + _url).searchParams;
var pathname= queryData.get('pathname');
var title=queryData.get('id');

if(pathname ==='/'){
if(queryData.get('id')=== undefined){
var title='Welcome';
var description='Hello, Node.js';
var template=`
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ul>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}
</p>
</body>
</html>
`;
response.writeHead(200);
response.end(template);
}else{
fs.readFile(`data/${queryData.get('id')}`, 'utf8', function(err, description){
var title = queryData.id;
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ul>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200);
response.end(template);
});
}
}else{
response.writeHead(404);
response.end('Not found');
}

//console.log(__dirname + url);

});
app.listen(5000); 홈페이지에서 계속 not found만 나오는데 왜그럴까요

답글
김철흥10개월 전

2024.01.10
완료!

답글
Hoon Ko1년 전

20231016

답글
carpediem1년 전

23.09.03 완료!!

답글
어흥1년 전

230702

답글
BF_Lee1년 전

23.06.28

답글
Hojun Song1년 전

22-04-14 12:27

답글
감자1년 전

22.12.02 완료

답글
average82942년 전

var queryData = new URL('http://localhost:3000' + _url).searchParams;
var queryDataId = queryData.get('id') 를 사용하신분들은 null이 나올거고,

var _queryData = url.parse(_url, true).query;
var _queryDataId = _queryData.id 를 사용하신분들은 undefined가 나올겁니다

null == undefined 는 true이기때문에 동등연산자(==)를 사용하시면 똑같이 나올겁니다.

후자는 더이상 사용하지 않는다고하네요

답글
당당2년 전

2022.10.19

답글
뿔고래2년 전

indefined : 아무것도 없다는 뜻.

답글
MelonMusk2년 전

08/16

답글
i_am_es2년 전

2022-08-07

답글
아캔두잇2년 전

20220804 완료

답글
코딩러버2년 전

description 변수를 따로 지정해줘서 그렇습니다.
var description = 'Hello, Node.js';
이부분이요. Welcome 홈페이지이기 때문에 파일을 가져오는것이 아닌 고정되어있는
정보이기 때문에 readFile은 필요가 없는것 같습니다 :)
대화보기
답글
키다리아저씨2년 전

220716 완

답글
toonfac2년 전

220714 오후 2시 12분 완료

답글
이성훈2년 전

2022.06.28 App 홈페이지 구현 완료!

답글
bob2년 전

fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
이것을 왜 빼도 괜찮은지 잘 모르겠어요.. ${description}을 사용하려면 있어야 하는거 아닌가요?

답글
농어2년 전

저도 홈페이지의
queryData.get(id'); 값이 null 이 나와서 undefine 대신 null 써서 해결했어요
대화보기
답글
코지마 히데오 뺨 후릴 반바지2년 전

와안료

답글
ボロボロ2년 전

해결하기는 했지만 저 처럼 타이틀이 undefined가 아니라 null로 나오시는 분 계신가요

답글
주재윤2년 전

완료

답글
화려하게간다2년 전

난 궁금한게 그냥 data폴더에 home이라고 파일을 하나 더 만들어서 다른 파일들이랑 같은 형식으로 연결시키면 코드 량이 더 줄 것 같은데 궂이 이렇게 하는 이유가 있는지?

답글
유니콘2년 전

이 경우 홈에 들어간 정보가 파일에 저장되어 있는 것이 아니라서 그냥 file, querydata, template값만 설정하고 response했는데 혹시 홈에서 fs.readfile을 사용해야 하는 이유가 있나요?

답글
김관호3년 전

21.11.23

답글
Edis3년 전

수강 완료후 복기하는데 시간을 3배로 썻네요 ㅋㅋ cmd에서 나오는 오류 원인 찾아보고 홈페이지에서 다른 키워드는 정상적으로 처리됬는데 web에 들어가면 튕겨져서 왜 그런가 했는데 대괄호 하나가 빠져있었네요 ㅋㅋ
요즘 자기전에 2시간정도씩 들으면서 배우는 재미느끼고있습니다

답글
초딩 개발자3년 전

2021/10/14

답글
pdpd3년 전

211004

답글
전해성3년 전

21.09.13 완료

답글
졸작완성하자3년 전

210907 완료

답글
고영히3년 전

0823 완료

답글
코딩하는 배달이3년 전

더 간단하게 해봤습니다!
var http = require('http');
var fs = require('fs');
var url = require('url');

var app = http.createServer(function(request,response){
var _url = request.url;
var queryData = url.parse(_url, true).query;
var pathname = url.parse(_url, true).pathname;
var title = queryData.id;

if(pathname === '/'){
fs.readFile(`data/${title}`, 'utf8', function(err, description){

if(title === undefined){

title = 'Welcome';
description = 'Hello, Node.js';

}

var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ul>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
response.writeHead(200);
response.end(template);
});

} else {
response.writeHead(404);
response.end('Not found');
}
});
app.listen(3000);

답글
현철훈3년 전

var fs = require('fs');
var url = require('url');
var express = require('express');
var app = express();

app.use(express.static('.'));
app.get('/', function (request, response) {
var _url = request.url;
var pathname = url.parse(_url,true).pathname;

if(pathname === '/'){
if(request.query.id === undefined){
var title = 'Welcome'
var description = 'Hello, node.js'
var template = makeTemplate(title, description);
response.writeHead(200);
response.end(template);
} else {
fs.readFile(`data/${request.query.id}`, 'utf8', function(err, description){
var title = request.query.id;
var template = makeTemplate(title, description);
response.writeHead(200);
response.end(template);
});
}
} else {
response.writeHead(404);
response.end('PAGE NOT FOUND !');
}
});

app.listen(3000);

function makeTemplate(title, description){
var template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="/">WEB</a></h1>
<ul>
<li><a href="/?id=HTML">HTML</a></li>
<li><a href="/?id=CSS">CSS</a></li>
<li><a href="/?id=JavaScript">JavaScript</a></li>
</ul>
<h2>${title}</h2>
<p>${description}</p>
</body>
</html>
`;
return template;
}

답글
승뇽뇽3년 전

ㅇㄹ

답글
2봉3년 전

이상하게저는 undefined 로 안뜨고 null표기되는데 이유가 따로 있을까요?..

if(queryData.id === undefined) 이부분을
if(queryData.id === null) 로 수정하니깐 되긴하는데..

답글
박사장3년 전

21 07 28 완료!

답글
labis983년 전

20210721 completed!

답글
Duke3년 전

2021.07.17

답글
laqah3년 전

정정해주시는 센스...

답글
Xeros3년 전

1분쯤에 반복문이 아니라 조건문을 말씀하신것같은데 흠칫했네요 ㅋㅋㅎ

답글
warmpeace3년 전

완료~

답글
Jeong Il Haan3년 전

20210415

답글