[Project] myPage - node.js

➕ node.js

myPage 프로젝트를 node.js로 변환하는 작업과 도중 발생한 오류 및 해결방안을 기록한다

✔ Error 1 (20.12.31)

발생오류

아래의 코드를 실행하니, 파일명에 한글이 들어간 파일을 불러올때마다 이상한 인코딩으로 불러와 오류가 나는 것을 확인할 수 있었다.

let http = require('http');
let fs = require('fs');
let app = http.createServer(function(request, response){
  let url = request.url;
  if(request.url == '/'){
    url = '/index.html';
  }
  response.writeHead(200);
  console.log(__dirname + url);
  response.end(fs.readFileSync(__dirname + url));
})
app.listen(3000);

//에러
/*Error: ENOENT: no such file or directory, open '...img/sogumm-%EC%
9C%84%EB%A1%9C.jpg*/

해결방안

아래와 같이 불러온 url을 decodeURI을 통해서 다시 디코딩 해줌으로써 올바른 파일 위치로 이동해주었다.

response.end(fs.readFileSync(__dirname + decodeURI(url)));

✔ Error 2 (20.1.1)

발생오류

fs.readFileSync를 통해 본문을 불러오는 도중, 본문은 포함되지 않고 제목만 포함한 문서가 생성되었다

let textlist = '';
i = 0;
while(i < tempTextlist.length){
  textlist = textlist + `
  <div class="imgBlock">
    <h2>${tempTextlist[i]}</h2>
    <div class="font">
  `
  fs.readFile(`./tab/${title}/data/${tempTextlist[1]}`, 'utf8', function(err, description){
    textlist = textlist + `...${description}...`
  })
  i = i + 1;
}

해결방안

fs.readFile은 콜백 함수를 이용하는 비동기적 방법이다. 위 코드에서는 아마 이러한 비동기적 방식 때문에 본문을 모두 읽어오기 전에 제목 처리를 해버려서 제목만 포함한 textlist가 생성된 듯 했다.

따라서 동기적인 fs.readFileSync를 이용해서 동기적으로 파일을 읽어온다면 제목과 내용 모두를 포함한 textlist를 생성할 수 있다

let description = fs.readFileSync(`./tab/${title}/data/${tempTextlist[i]}`, 'utf8');
textlsit = textlist + `${description}`;

✔ Finished (21.1.2)

현재까지 정적 사이트로 구현해 놓았던 모든 것들을 nodejs로 재구성 완료했다. 함수로 어느정도 정돈된 모습도 볼 수 있었다. 테마를 구현하기 위해서 테마에 따른 html파일이 2개씩 있었는데, 그 중복또한 제거할 수 있었다. 물론 다른사람들이 보기에는 아직 부족하고 정돈할 부분이 많아 보이겠지만, 정적인 웹사이트를 동적으로 변환해 놓으니 아주 뿌듯하다. 이제 홈페이지의 가장 기본적인 기능인 CRUD를 모두 구현해보자