nodejs : backend에서 서버에 대한 개발을 하는 도구
nodejs는 chrome의 자바스크립트 엔진 v8을 사용한다.
오늘은 nodejs로 랜덤으로 강아지 사진이 출력되는 예제를 만들어볼것이다.
npm init
Nodejs 프로젝트를 실행할때 package.json을 생성 해준다.
npm init -y
npm init만 입력하면 기본 양식을 직접 정해줘야하는데 -y라는 속성을 사용하면 default값으로 설정된 packge.json을 만들겠다라는 의미다. npm init보다 조금 더 편하고 한번에 packge.json을 만드는거라고 생각하면 된다.
이 예제를 위해서는 express, ejs, request 템플릿이 필요하기때문에 설치해주겠다.
npm install express ejs requestejs 모듈은 템플릿을 위한 모듈, request는 해외 강아지 이미지 API를 위한 모듈이라고 한다
mkdir public
mkdir views정적 이미지를 보관할 public 폴더와 템플리 문서를 보관할 views 폴더를 생성한다.
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(5500, function() {
console.log("실행중...");
});main.js
<!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/>
- URL : <%=imageurl%>.<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>views/randomdog.ejs
http://localhost:5500/randomdog 으로 들어가면 강아지 사진이 잘 나오는걸 확인할 수 있다.
'프론트엔드 > javascript' 카테고리의 다른 글
| [javascript] 회원가입 유효성 , form 입력값 확인 구현 + 코드 리뷰 피드백 (0) | 2022.09.01 |
|---|---|
| [javascript] blur와 focus (0) | 2022.09.01 |
| 노마드 코더 바닐라 js 챌린지 수료 후기 + 내가 만든 Google Momentum 👩🏻💻 (0) | 2022.06.27 |
| [바닐라 js 챌린지] 6.1강 createElement(), appendChild() ✨ (0) | 2022.06.17 |
| [바닐라 js 챌린지] 6.0강 Math.random(), Math.floor() ✨ (0) | 2022.06.16 |