[Node.js] 동적인 웹페이지 만들기

황승환·2021년 7월 11일
1

Node.js

목록 보기
3/13

동적인 웹페이지 만들기

기존 코드

코드 추가하기

  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이 출력되는 것을 확인할 수 있다.

참고자료

생활코딩

profile
꾸준함을 꿈꾸는 SW 전공 학부생의 개발 일기

0개의 댓글