[DAY12] 간단한 프로그램 만들기 2

2일차

오늘은 정적인 html 파일들로 이루어진 웹사이트를 동적인 웹사이트로 만들어주는 작업을 진행했다. querystring에 따라서 다르게 동작하도록 만들어볼 예정이다.

const url = require('url');

var queryData = url.parse(_url_, true).query;
console.log(queryData);
// querystring이 ?id=html일 경우

실행결과
{id: 'html'}

실행결과가 디랙토리의 형식으로 나오게 된다. 그렇다면 queryData.id를 통해 html이라는 값을 얻어낼 수 있겠다.

<ul>
<li><a href="?id=major">👨‍🏫Major 전공👨‍🏫</a></li>
<li><a href="?id=goal">😎2022년 목표😎</a></li>
<li><a href="?id=BasicChallenge">🔥22 Basic Challenge 진행 중!🔥</a></li>
</ul>

각 페이지에 id값을 부여했다. 그리고 queryData.id를 title로 지정해주었는데 나의 형형색색 이모티콘이 출력되기 위해서 약간의 작업을 거쳤다.

if(queryData.id === 'major'){
      title = '👨‍🏫Major 전공👨‍🏫';
    }else if(queryData.id === 'goal'){
      title = '😎2022년 목표😎';
    }else if(queryData.id === 'BasicChallenge'){
      title = '🔥22 Basic Challenge 진행 중!🔥';
    }

사실 굉장히 비효율적인 코드라고 생각한다. queryData.id와 title이 같았으면 굳이 넣지 않아도 될 코드이기도 하고, 또한 중복되지도 않기 때문에 혹여 한 가지의 title를 추가하게 되면 또 작업을 해주어야 하는 부분이기도 하다. 하지만 나는 미적인 부분을 포기하지 못했다. 기능이 떨어지고, 코드의 효율이 없더라도 일단 만들어보고 싶은데로 만들어 보고 싶었다.

data라는 폴더를 생성하여 id와 같은 이름으로 파일을 생성하고, 파일에는 각 제목에 맞는 내용을 적어주었다. 이 내용들을 fs.readFile()을 통해서 읽어냈다. 이 과정을 통해서 더 이상 3개의 html파일을 활용하지 않고 동적인 작업을 해낼 수 있었다.

var pathname = url.parse(_url_, true).pathname;

if(pathname === '/'){
      if(queryData.id === undefined){
         //시작 페이지 코드
      }else{
         // id가 있는 페이지 코드
      }
}else{
   // path가 없을 경우
  response.writeHead(404,{'Content-Type': 'text/html; charset=UTF-8'});  
  response.end('🙅‍♂️페이지를 찾을 수 없습니다!🙅‍♂️');
      }

id가 없는 경우에는 시작 페이지로 설정하였다. 그리고 경로가 없을 경우에는 '페이지를 찾을 수 없습니다'를 출력하도록 처리하였다. 한글의 경우, 글자가 깨지는 것을 방지하기 위해서 UTF-8을 사용해주었다.
쿼리스트링에 맞는 제목이 나오는 것을 확인할 수 있었다.

마찬가지로 경로를 이탈했을 때, '페이지를 찾을 수 없습니다!'가 나오는 것을 확인할 수 있었다. 사진이 보이지 않는 이유는 html파일을 템플릿 레터럴을 활용해 변수로 지정했는데, 그 과정에서 사진이 정상적으로 출력되지 않았던 것 같다.

p태그에 src경로는 제대로 들어갔지만 사진이 출력되지 않아서 꽤나 애를 먹었다.진짜 오래 걸렸다 오랜 구글링 끝에 찾아낸 문제의 핵심은 이미지 파일이 서버에 올라가지 않아서였다. 이를 해결하기 위해 아래의 코드를 참고했다.

if(_url.indexOf("/picture/") == 0) // '/picture'로 시작하는 url을 요청했을 경우 이미지를 가져온다
{
var imgSrc = _url.substr(1); // 이미지 파일 이름 가져오기
fs.readFile(imgSrc, function(err, data){ // 이미지 파일을 읽어온다
response.writeHead(200, {'Content-Type': 'image/jpeg'})
response.end(data) // 브라우저에 이미지 파일을 보낸다
})
return;
}

이제는 사진이 잘 출력되는 것을 확인할 수 있었다. 느낀 점도 많고 생각할 점도 많았지만, 내일 마무리 짓고 한꺼번에 적어보도록 해야겠다.