처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다.
https://itadventure.tistory.com/493
[전자책 출간!] 처음부터 시작하는 AWS와 Node.js
65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자
itadventure.tistory.com
Part 10. 접속주소마다 다른 화면 보여주기
앞의 예제는 오로지 하나의 고정 페이지만 보여주는 서비스입니다.
만일 접속 URL 마다 다양한 페이지를 보여 주고 싶다면 어떻게 해야 할까요?
변화 없는 단순한 페이지를 보여주기 위해서라면
굳이 Node.js에 아래와 같이 스크립트를 일일이 코딩하는 것은 비효율적입니다.
더 좋은 방법이 있거든요.
res.end('안녕! 매우 멋진 Node.js\n');
홈페이지에서 단순문구만 사용자에게 보여주는 경우는 거의 없습니다.
일반적으로 홈페이지에 사용하는 HTML 태그는 아래와 같거든요.
| <html> <head> <title>우리집 초코</title> </head> <body> <h1>멍!!</h1> </body> </html> |
웹 브라우저는 위 HTML 태그를 해석해 아래와 같이 보여줍니다.
변화 없는 페이지는 원본을 그대로 서버에 저장해 놓고,
요청에 따라 직접 보여주는 방식이 효율적인데요.
이러한 페이지를 정적(static) 웹페이지라고 합니다.
정적 웹페이지를 서버에 저장해 놓고 사용하는 법을 알아보겠습니다.
서버에 puppy.html 파일을 새로 생성해볼까요?
MOBAXTERM 에서 파일을 생성하는 방법은 아래와 같습니다.
1) SSH Browser 탭을 선택
2) /home/nodejs1 폴더로 이동하신 다음에,
2) 브라우저 내용 중 빈 곳을 마우스 우 클릭하고.
3) New empty file 을 선택해 보세요.
이어서 파일명 입력 후 OK 버튼을 눌러 주시면 되는데요.
여기서는 puppy.html 이라고 입력해주시면 됩니다
SSH Browser 창에 파일이 하나 생겼군요. 이제 이 파일을 수정해보죠.
파일명을 마우스 우 클릭 –
Open with default text editor 를 선택하시면,
Notepad 에 스크립트 파일이 열릴 것입니다. 거기서 아래 HTML 소스를 입력, 저장 주세요.
< puppy.html 소스 >
| <html> <head> <title>우리집 초코</title> </head> <body> <h1>멍!!</h1> </body> </html> |
이제 정적 웹페이지가 서버에 보관되었는데요.
이 페이지를 그냥 사용할 수 있는 건 아니고 node.js에서 연결해 주셔야 합니다.
main.js 스크립트도 같은 방법으로 Notepad에서 열어주세요.
만일 nodepad 에서 main.js 파일이 열려 있었다면 탭에 남아 있기 때문에
탭만 선택하시면 됩니다.
main.js 파일의 내용을 아래와 같이 변경해 주세요
| const http = require('http'); const fs = require('fs'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); fs.readFile('.' + req.url, function(err, data) { res.write(data); res.end(); }); }).listen(8080); |
이제 Node.js 서비스를 다시 시작합니다.
다시 시작하실 때는 어떻게 하신다고요?
1) Node.js 가 실행중이라면, Ctrl + C 키를 눌러 중지하고,
2) 화살표 윗 방향 키를 눌러 그동안 사용한 명령어 히스토리 중 시작 명령어를 찾아
3) Enter 키를 눌러주면 다시 서비스가 시작됩니다.
이제 웹 브라우저에서 퍼블릭IP:8080/puppy.html 주소에 접속하시면,
아래 페이지가 뜨는 것을 확인할 수 있습니다.
Node.js 가 puppy.html 파일의 내용을 읽어서 그대로 보여주기 때문이지요.
여기까지 잘 성공하셨다면 매우매우 축하드립니다! :)
스크립트에 대한 동작 설명은 다음 이야기에서 계속 살펴보겠습니다.
방문해주시는 모든 분들께 늘 감사드립니다.
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
다음이야기 : https://itadventure.tistory.com/505
Node.js - Part10-1. 파일 읽어 뿌려주자(2)
처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파..
itadventure.tistory.com
'자바스크립트와 캔버스' 카테고리의 다른 글
| Node.js - Part 11-1. express 프레임워크 소개 (6) | 2022.03.09 |
|---|---|
| Node.js - Part 10-2. 페이지는 계속 추가할 수 있어요 (14) | 2022.03.08 |
| 마우스 위치 - 자바스크립트로 판별 (4) | 2022.02.11 |
| 멀티채팅방 기능구현~! (24) | 2021.12.13 |
| jQuery 프로미스 - await 처리 (2) | 2021.09.26 |
