무지성으로 따라하다간 갇히고 말 테야
생활코딩의 node.js 강의를 쫓아가고 있다.
이런저런 이유로 다시금 프로그래밍을 시작하게 되었고, 생각 이상으로 재미를 느끼고 있다.
이 부분에 대한 이야기는 나중에 하기로 하고...
너무나 얕은 사전지식
나는 var가 let과 const로 대체되었단 사실을 알고 있었다.
let
은 기존의 var
과 거의 차이가 없는 것으로 알고 있었고, const
는 재할당이 불가능한 variable로만 알고 있었다.
그렇기에 생코에 나오는 코드 대부분을 모두 let
으로 바꿔서 사용하던 찰나에,
문제가 생겼어!
이 강의를 진행하던 중, 다음과 같은 코드가 나온다.
if(pathname === '/'){
if(queryData.id === undefined){
var title = 'Hello';
var description = 'Hello, Node.js';
}
(...후략...)
당연히 나는 아무 생각 없이,
if(pathname === '/') {
if(querydata === undefined){
let title = 'Hello';
let description = 'hello there!';
}
(...후략...)
var
를 let
으로 바꿔서 썼는데, 불안하게도 변수에 회색 음영이 들어가 있었고,
당연하게도 이 default data(라고 믿고싶었던 것)는 반영되지 않았다.
망치 한방이면 훅 가는게 까불어
컴퓨터로 많은 것들을 해 왔지만, 문제가 생길 때마다 컴퓨터를 부수고 싶은 충동은 어쩔 수 없는 것 같다. 책상 한켠에 놓여진 망치를 만지작거리며 구글링을 시작했다.
javascript let
javascript var let difference
항상 느끼지만 Stackoverflow는 전설이다.
총체적 난국
let이 선언된 위치에 따라 variable이 전역변수처럼/지역변수처럼 동작할 수 있는 것이 문제였다.
나는 if문 안에 변수 title과 description을 선언했고, 이는 if문 내에서만 참조가 가능한 지역변수로 동작하고 있었다.
... 그리고 방금 글 쓰면서 다시 느낀건데, 이미 존재하는 변수 title과 description을... 재지정하려고 했구나... 끄응.
해결
- title과 description을 전역변수로 지정해주기
- fs.readfile에서 들어오는 data가 undefined인지 검증해서
2-1. data !=== undefined인 경우에만 data를 description에 할당
2-2. 이외의 경우 default data를 살릴 수 있도록 수정
let http = require('http');
let fs = require('fs');
let url = require('url');
let title;
let description;
let app = http.createServer(function(request,response){
let _url = request.url;
let querydata = url.parse(_url, true).query;
let pathname = url.parse(_url, true).pathname;
title = querydata.id
if(pathname === '/') {
if(querydata.id === undefined){
title = 'Hello';
description = 'hello there!';
}
console.log(title);
fs.readFile(`data/${title}`, 'utf8', function(err, data){
console.log(data);
if(data !== undefined){
description = data;
} else {}
let template = `
<!doctype html>
<html>
<head>
<title>WEB1 - ${title}</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="/?id=html">HTML</a></li>
<li><a href="/?id=css">CSS</a></li>
<li><a href="/?id=javascript">JavaScript</a></li>
</ol>
<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);
정말 무지성으로 따라하다가 '갇혀버리고' 말았다.
따라할때도 지성이 필요하다는 사실을 깨달은 하루.
Author And Source
이 문제에 관하여(무지성으로 따라하다간 갇히고 말 테야), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mun_js/1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)