반응형
# 조건문
자바스크립트에서 조건문은
if(num % 2 === 0){
결과
}else{
결과
}이렇게 작성하면 되지만
ejs 템플릿에 작성할 때는
<% 태그가 필요하다
<% if(num % 2 === 0){%>
<h2>짝수</h2>
<% } else { %>
<h2>홀수</h2>
<% } %>
한줄에 작성이 안되고 공백마다 태그를 넣어줘야 한다.
그래서 if ~ else 문으로 진행 할때 삼항연산자를 활용에 한줄에 보기쉽게 작성한다
<h2><%= num % 2 === 0 ? '짝수' : '홀수' %></h2>
둘다 결과는 같게 잘나왔다.
# 루프(반복문)
루프도 역시 <% 태그안에 작성되어야 한다.
db에서 데이터를 가져온다 생각하고 index에서 값을 전달해서
루프로 데이터를 띄어보려고 한다.
index.js
app.get('/cats', (req, res) => {
const cats = ['A','B','C','D','E'];
res.render('cats', {cats})
})
cats.ejs
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
</head>
<body>
<h1>Test</h1>
<ul>
<% for(let cat of cats){ %>
<li> <%= cat %> </li>
<% } %>
</ul>
</body>
</html>for of 문을 이용해 데이터 수만큼 출력되게 작성하였다.
잘 출력되었다.
조건문과 루프를 사용해 json 데이터를 불러와보려고 한다.
data.json 구조
{
"count": 10,
"stores": [
{
"addr": "서울특별시 강북구 솔매로 38 (미아동)",
"code": "11817488",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6254369,
"lng": 127.0164096,
"name": "승약국",
"remain_stat": "plenty",
"stock_at": "2020/07/02 18:05:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로 247 3층 (미아동)",
"code": "12856941",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6255182,
"lng": 127.017747,
"name": "대지약국",
"remain_stat": "plenty",
"stock_at": "2020/07/03 10:45:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로 255 (미아동)",
"code": "11819723",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6261612,
"lng": 127.0180494,
"name": "청구약국",
"remain_stat": "plenty",
"stock_at": "2020/07/03 10:40:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 솔샘로 254 2층 2호 (미아동, 삼양아케이트)",
"code": "11888571",
"created_at": "2020/07/03 11:00:00",
"lat": 37.627357,
"lng": 127.018375,
"name": "민들레약국",
"remain_stat": "plenty",
"stock_at": "2020/06/29 08:12:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로77길 25 (수유동)",
"code": "11845929",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6297115,
"lng": 127.0168913,
"name": "우정약국",
"remain_stat": "plenty",
"stock_at": "2020/07/01 15:35:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로 293 (수유동)",
"code": "11817968",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6297559,
"lng": 127.0177412,
"name": "삼천약국",
"remain_stat": "plenty",
"stock_at": "2020/07/03 08:45:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 도봉로67길 34 (미아동)",
"code": "11819693",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6302571,
"lng": 127.022447,
"name": "수유태평양약국",
"remain_stat": "plenty",
"stock_at": "2020/07/02 09:46:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 인수봉로 142 (수유동)",
"code": "11819154",
"created_at": "2020/06/28 23:55:00",
"lat": 37.6323392,
"lng": 127.0138353,
"name": "한사랑온누리약국",
"remain_stat": "few",
"stock_at": "2020/06/22 21:11:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로 309 (수유동)",
"code": "12826456",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6309979,
"lng": 127.0175749,
"name": "푸른약국",
"remain_stat": "plenty",
"stock_at": "2020/07/01 13:40:00",
"type": "01"
},
{
"addr": "서울특별시 강북구 삼양로 319 1층 (수유동)",
"code": "12861448",
"created_at": "2020/07/03 11:00:00",
"lat": 37.6318474,
"lng": 127.0175079,
"name": "서울진약국",
"remain_stat": "plenty",
"stock_at": "2020/07/03 09:02:00",
"type": "01"
}
]
}github에 연습용 샘플 json 파일이 있길래 가져와서 갯수만 좀 줄여서 사용했다.
일단 가져온 data.json 파일을 참조해준다.
const storeData = require('./data.json');
그리고 데이터가 잘 불러와질때와 아닐 때를 구분한다.
app.get('/r/:sub', (req, res) => {
const {sub} = req.params;
const data = storeData[sub];
if(data){
res.render('sub', { _data : data , sub});
}else {
res.render('notfound', {sub})
}
})실패시엔 notfound.ejs 파일을 불러옴
가져온 json 데이터를 보고 어떻게 가져올지 생각한 후
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>목록</title>
</head>
<body>
<h1><%= sub %></h1>
<% if(sub === 'stores'){ %>
<ul>
<% for(let item of _data){ %>
<li><%= item.name %></li>
<% } %>
</ul>
<% }else { %>
<h2>count : <%= _data %></h2>
<% } %>
</body>
</html>조건문과 루프를 활용하여 데이터를 뽑아낸다.
가져온 data.json은 약국정보와 수를 담고있어서
req.params를 data에 적용해서 두 페이지로 나눴다.
요청 페이지에 맞게 결과가 잘나왔다.
반응형
'nodejs' 카테고리의 다른 글
| [node.js / express] 요청 구문 분석하기(get, post) (0) | 2023.05.18 |
|---|---|
| [node.js / express] 정적 assets 과 bootstrap 사용, ejs 파일 분할 (0) | 2023.05.17 |
| [node.js / express] req.params, 경로 변수로 지정하기 (0) | 2023.05.11 |
| [node.js / express] ejs 보간(Interpolation) 구문, 템플릿에 데이터 전달 (0) | 2023.05.11 |
| [node.js / express] 템플레이팅 (ejs, __dirname, path.join()) (0) | 2023.05.10 |
