무지성으로 따라하다간 갇히고 말 테야

13049 단어 생활코딩JavaScriptnode.jsJavaScript

생활코딩의 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을... 재지정하려고 했구나... 끄응.

해결

  1. title과 description을 전역변수로 지정해주기
  2. 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);

정말 무지성으로 따라하다가 '갇혀버리고' 말았다.
따라할때도 지성이 필요하다는 사실을 깨달은 하루.

함수 구현 기법
node.js 5줄로 서버 만들어 보기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage