생활코드 node.js_10강부터 13강까지
http://localhost/?id=HTML 주소로 사용자가 Web Application에 접속했을 때 id값에 따라서 적당한 컨텐츠를 보여준다.
위의 주소 중 ' id=HTML '을 Query string이라고 한다.
Query string에 id=HTML이라고 치면 HTML의 창을, id=CSS라고 치면 CSS의 창을 띄우도록 만들어볼 예정이다.
🤷♀️ 모듈이란?
node.js가 가지고 있는 수많은 기능들을 비슷한 조건끼리 그룹핑해둔 것
var url= require('url'); => 모듈 require은 요구한다라는 뜻이다.
var _url = request.url; => 주소의 id값이 var _url에 들어간다. (위 사진에서는 id=CSS가 id값이다.)
var queryData = url.parse(_url, true).query; => queryData에 담겨있는 변수의 값은 객체이다. 왜냐면 cmd에 console.log(queryData);를 실행했을 때 cmd창에 { id : 'CSS' }라고 나오기 때문이다.
console.log(queryData.id); => cmd창에 CSS라고 출력된다.
response.end(queryData.id); => 사용자가 접속한 url에 따라서 파일들을 읽어주는 곳을 queryData.id가 출력될 수 있게 만들어 준다. 사진에서 보는 것과 같이 웹의 창에는 css라는 글자가 나온다.
여기까지 Querystring에 따라서 다른 정보를 출력하는 Web Application을 만들었다.
제대로 된 정보를 출력하기 위해 더 움직여보자
# App제작 _동적인 웹페이지 만들기 - Querystring에 따라 완성된 웹페이지만들어 보기
1.html의 정적코드 HTML를 카피해서 main.js의 변수 template에 붙여넣어준다.
html 코드 중에서 Querystring에 따라서 바뀌었으면 하는 부분에 변수( &{title} )를 선언해서 넣어준다.
이때 title은 var title = queryData.id; 이다.
위의 사진에는 안나왔지만 마지막 부분에 response.end(template);이라고 바꿔주어야 정상적인 출력이 된다.
위의 사진을 보면, template의 <body>부분에 위치한 주소들을 아래처럼 바꿨다.
<a href = "index.html">WEB</a> --> <a href = "/">WEB</a>
<a href = "1.html">HTML</a> --> <a href = "/?id=HTML">HTML</a>
<a href = "2.html">CSS</a> --> <a href = "/?id=CSS">CSS</a>
<a href = "3.html">JavaScript</a> --> <a href = "/?id=JavaScript">JavaScript</a>
이로써 제목부분을 동적으로 바꾸는 것에 성공했다. 하지만 본문은 정적인 상태이다.
파일에다가 본문만 저장했다가 사용자 요청에 따라 요청에 해당하는 파일의 본문만을 main.js에 가져다 둘 수 있다면
훨씬 코드의 가독성이 좋아지고 긴 코드를 간결하게 줄일 수 있을 것이다.
백문이불여일타... 해보자 ^^....
#Node.js의 파일 읽기 기능(Read)
정보 시스템의 핵심적인 메커니즘을 CRUD라고한다. (생성, 읽기, 수정, 삭제)
Create Read Update Delete는 정보를 다루는 핵심적인 처리방법들이다.
C는 가장 중요하고 R은 C를 필적할만큼 중요하다.
파일을 어떻게 하면 node.js로 읽을 수 있는가에 대해서 학습할 것이고 나머지 생성, 수정, 삭제를 차차 알아볼 것이다.
node.js라는 디렉토리를 만들고 sample.txt와 fileread.js를 생성한다.
filedread.js에는 위의 이미지와 같이 코딩해주었고, sample.txt에는 lorem ipsum(의미없는 내용)을 카피해 넣어주었다.
cmd창에 node.js로 들어간 후 코드 node fileread.js 실행한다.
화면에서와 같이 cmd창에 sample.txt 내용이 정상적으로 출력이 되었다.
# App제작 - 파일을 이용해 본문 구현
Querystring의 값에 따라서 본문이 변경되는 Web Application을 만들어볼것이다.
웹 페이지에서 HTML, CSS, JavaSript 내용을 나타내는 1.html, 2.html, 3.html 폴더를 새로운 디렉토리에 옮겨줄 것이다.
새로운 디렉토리인 data에 HTML, CSS, JavaSript 폴더를 생성하고 1.html, 2.html, 3.html의 내용을 각각 복붙한다.
파일들의 내용들을 다 복붙하는게 아니라 핵심내용을 나타내는 <p></p>사이의 내용만 카피해오면 된다.
그 다음으로 할 일은 main.js에 있는 파일 목록을 치환시킬 준비를 해주면 된다.
var template의 위치 바로 위에 함수 fs.readFile(`data/${queryData.id}`)를 추가한다.
이때 함수는 Querystring에 따라서 파일명이 생성이 된다는 의미이다.
위의 이미지와 같이 함수 fs.readFile()에 추가적으로 코드를 더 넣었다.
그 중에서 변수 description은 글의 본문이 될 데이터의 내용을 의미한다.
그리고 함수 fs.readFile()의 바로 아래에 있었던 var template의 내용을 fs.readFile() 안으로 가져온다.
안으로 가져온 var template의 <p>와</p>사이의 내용을 삭제한 후 ${description}을 추가해준다.
HTML의 코드에 있었던 이미지 파일을 삭제한 후 저장했다.
신기하게도 HTML의 코드를 고치고 웹 페이지를 리로드하면 수정본이 바로 반영된다.
main.js에서는 코드를 수정하고 저장한 후 cmd창에 명령어를 한 번 더 작성해야 웹 페이지에 수정본이 반영됐었는데
HTML 은 main.js와 달리 수정본이 다이렉트로 반영된다.
왜냐하면 페이지가 열릴때마다 HTML의 파일의 내용을 읽어서 화면에 출력해주고 있기 때문이다.
따라서 내용이 수정될 때마다 실시간으로 바뀌고 있는 것이다.