처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다.
https://itadventure.tistory.com/493
[전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express )
65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자
itadventure.tistory.com
지난 이야기의 설명드린 내용대로 "내친 김에 만들어!" 보도록 하겠습니다.
참고로 랜덤 강아지 이미지를 제공하는 것은 해외 제공 오픈 API입니다.
템플릿을 활용하기 위해 ejs 모듈과 request 모듈을 설치해야 합니다.
새로운 폴더에서 또 시작해보도록 하겠습니다.
“먼저 /home/nodejs3 폴더 생성 후, npm 초기화를 해 주세요...”
이렇게 하면 어려워 하실 것 같아, 명령어를 적어드리겠습니다 ..... :)
/home/nodejs3 폴더를 생성하는 명령은 아래와 같습니다. 터미널에서 타이핑, 실행해 주시고,
sudo mkdir /home/nodejs3
폴더 소유자가 ec2-user 여야 npm 초기화가 가능하기 때문에 소유자를 변경,
sudo chown ec2-user:ec2-user /home/nodejs3
그리고 해당 폴더로 프롬프트를 이동해서 npm 초기화를 해주시면 되는 것이지요.
cd /home/nodejs3
npm init -y
몇 번 반복해 보시면서 따라서 타이핑하시다 보면, 어느새 암기가 되어 있을 겁니다 :)
자, 이번에는 템플릿을 사용해야 하는데요. express, ejs, request 모듈 3가지를 추가로 설치해 주셔야 합니다. 아래와 같이 설치를 진행하시거나,
npm install express
npm install ejs
npm install request
또는 아래와 같이 설치해 주셔도 됩니다. 아무래도 이쪽이 더 쉬우시겠지요?
npm install express ejs request
여기서 ejs 모듈은 템플릿을 위한 모듈이고,
request 모듈은 해외 강아지 이미지 API를 위한 모듈입니다.
💎 혹시 설치가 안되시나요?
| 가끔 설치할 때 오류가 발생하는 경우가 있는데요. 그러한 경우 폴더를 만들어 새로 시작하는 방법 또는 글로벌로 설치해주는 것으로 해결되는 경우가 있습니다. 아래와 같이 명령어를 입력해주세요. npm install ejs -g npm link ejs npm install request -g npm link request -g 옵션은 글로벌 설치 방법을 의미하고 link 는 글로벌 모듈을 현재 폴더에 연결해주겠다는 것을 의미합니다. |
이어서 2개의 폴더를 생성해 주세요.
정적 이미지를 보관할 public 폴더와 템플릿 문서를 보관할 views 폴더인데
/home/nodejs3 폴더 소유자가 이미 ec2-user 이므로, 권한이 있는 상태입니다.
앞에 sudo 는 붙이지 않으셔도 됩니다.
mkdir public
mkdir views
그리고 나서 2개의 소스를 차례대로 구성합니다.
소스를 복사하셔도 되지만 타이핑하신다면 기억에 남습니다 :)
/home/nodejs3/main.js
| const express=require('express'); const request=require('request'); const ejs=require("ejs"); const app=express(); app.set('view engine', 'ejs'); app.set('views', './views'); // public 폴더하위의 파일들을 기본으로 서비스 app.use(express.static('public')); app.get('/randomdog', function(req,res) { request("https://random.dog/woof.json", function(error, response, body) { if (!error && response.statusCode == 200) { console.log(body); let object = JSON.parse(body); res.render('randomdog', { imagesize: object.fileSizeBytes, imageurl: object.url }); } }); }); // 페이지를 찾을 수 없음 오류 처리 app.use(function(req, res, next) { res.status(404); res.send( '<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">' + '<html><head><title>404 페이지 오류</title></head>' + '<body><h1>찾을 수 없습니다</h1>' + '<p>요청하신 URL ' + req.url + ' 을 이 서버에서 찾을 수 없습니다..</p><hr>' + '</body></html>' ); }); app.listen(8080, function() {}); |
/home/nodejs3/views/randomdog.ejs
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>랜덤 강아지</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>랜덤한 강아지가 화면에 표시가 되요</h1><br/> 용량 : <%=imagesize%> bytes.<br/> <div style="border:5px solid black;padding:5px; width:550px;heght:550px;"> <img src='<%=imageurl%>' width='500' height='500' style='text-align:center'> </div> API 정보 : https://random.dog/woof.json </body> </html> |
이제 node.js 서비스를 시작하신 다음
node main.js
웹 브라우저에서 다음 URL 로 접속해 보세요.
퍼블릭IP:8080/randomdog
그러면 강아지 사진이 나옵니다.
F5 키로 다시 페이지를 새로 고침 하면 새로운 강아지가 나오기도 합니다.
여기서 randomdog.ejs 파일이 템플릿 파일인데, 처음에는 내용이 비어 있지만,
페이지를 로딩 하면서 빈 곳을 쏙쏙 채워 넣는 것이 템플릿의 핵심입니다.
다음 이야기에서는 스크립트를 하나씩 분석해보는 시간을 가져보도록 하겠습니다.
방문해주시는 모든 분들께 늘 감사드립니다.
도움이 되셨다면 공감 한방, 댓글은 굿잡!
감사합니다~
다음이야기 : https://itadventure.tistory.com/523
Node.js - Part13-3. 템플릿 파헤치기
처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립..
itadventure.tistory.com
'자바스크립트와 캔버스' 카테고리의 다른 글
| 빗소리 스크립트를 공개합니다. (14) | 2022.03.29 |
|---|---|
| ASMR - 캔바스로 느껴보는 빗소리 ( 자바스크립트 ) (14) | 2022.03.27 |
| Node.js - Part 12-3. 동적웹페이지 만들기 (8) | 2022.03.23 |
| Node.js - Part 12-1. 동적웹페이지? 그게 뭔데? (10) | 2022.03.22 |
| Node.js - Part 11-6. 그림파일도 문제 없어요 (10) | 2022.03.16 |
