mskim Pages

less than 1 minute read

03_Node.js_Dynamic Web

App 제작 - 동적인 웹 페이지 만들기

main.js var template=’’; 변수에 Grave Accent를 이용한 Template Literal로 1.html의 코드를 copy & paste 한다.
Plain Text로 HTML 이라는 문자열 대신 ${} 표현식을 이용해 쿼리 스트링에 따라 데이터가 변환되도록 ${queryData.id} 수정한다.

http://localhost:3000/?id=HTML //URL 쿼리 스트링에 id=HTML

<title>WEB1 - ${queryData.id}</title>
<h2>${queryData.id}</h2>
//의미론적인 네이밍을 위해 ${title} 로 수정

복사된 1.html 문서 내용에 표현식으로 수정한 부분도 같이 변경된다.

이제 리스트 목록을 클릭할 때 마다 지정한 파일로 이동됐던 a태그를 수정한다.

<li><a href="1.html">HTML</a></li>
<li><a href="/?id=HTML">HTML</a></li>

쿼리 스트링에 따라 리스트 목록명이 바뀐다. ==리스트를 클릭하면 쿼리 스트링도 변환.

—–쿼리 스트링, 그와 연관된 title에 따라 동적으로 바뀌는 웹 페이지를 작성했다.
이제 요청에 따라 본문 또한 바뀌도록 한다.

  • nodejs 에서 파일 다루기. 파일 읽기 기능.
    파일의 CRUD

nodejs 로 파일 읽기 nodejs file read 구글링
nodejs 공식 홈페이지 문서에서 File System 모듈 내용을 참고한다.

  • 쿼리 스트링 값에 따라 본문이 변경되는 웹 어플리케이션 만들기

HTML 코드가 없는 순수한 데이터만 가진 파일들을 생성한다.

data 폴더 문서에 HTML 태그가 없으면 파일 내용이 바뀌더라도 node를 껐다 켤 필요가 없다.

main.js는 수정시 nodejs를 껐다켜야 하고, data 폴더의 파일들은 실행될 때마다 파일을 읽기 때문에
수정될 때 마다 실시간으로 내용이 바뀐다.

You May Also Enjoy