동적인 웹페이지 만들기

기존 코드

코드 추가하기

1. 전에 만들어 둔 정적인 1.html 파일을 복사한다.
2. 기존의 코드에 template이라는 변수를 생성하고 template literal을 사용하여 1.html을 복사한 것을 넣어준다.
   var template = ` (1.html) ';
3. 1.html의 제목에 해당하는 HTML이라는 부분을 동적으로 바꾸기 위해 ${queryData.id}를 넣어준다. response.end()괄호 안에는 template을 넣어준다.
4. 브라우저에 localhost:3000/?id=HTML을 입력해주면 다음과 같이 제목에 해당하는 부분이 HTML로 변경된 것을 확인할 수 있다.마찬가지로 localhost:3000/?id=CSS를 입력해주면 제목이 CSS로 변경된다.목록에 없는 ABCDE를 넣어도 제목이 ABCDE로 변경되는 것을 확인할 수 있다.
5. 목록에 있는 HTML, CSS, JavaScript를 눌러본다. 다음과 같이 정확한 페이지가 나오지 않는 것을 확인할 수 있다.
6. 이 문제를 해결하기 위해서는 목록들의 주소값을 바꿔줘야 한다.

     <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>

   다음과 같이 변경해준다.
7. 이제 목록을 누르면 그 목록에 맞게 제목이 바뀌는 것을 볼 수 있다.
8. 웹페이지 상단에 WEB을 눌러 홈페이지로 이동할 때 제목에 Welcome이 나올 수 있도록 코드를변경해준다. 그리고 코드의 가독성을 위해서 title이라는 변수를 선언하고 queryData.id를 넣어준다.
9. 홈페이지에서 제목에 Welcome이 출력되는 것을 확인할 수 있다.

참고자료

생활코딩