페이지에서 사용자가 입력한데이터로 api호출해서 데이터 제공하기
거래소페이지에 사용자가 접근을해서 검색어를입력하고 필터를입력하고 검색버튼을 누르면 원하는 데이터가 사용자에게 보이게 만들기위해서는 처음페이지에 접속했을때는 아무것도안보이다가 검색후에 페이지에 결과들이 보이게 구현해야한다.
app.post('/markets', async (req, res) => {
if(req.body.grade.trim() == "" & req.body.item.trim() == ""){
console.log('검색안함')
res.render('markets.ejs')
}
else{
const grade = req.body.grade
const search = req.body.item
const pagesize_response = await axios.post(
'https://developer-lostark.game.onstove.com/markets/items',
{
CategoryCode: 40000,
ItemGrade: grade.toString(),
ItemName: search.toString(),
PageNo: 1,
},
{
headers: {
'accept': 'application/json',
'authorization': process.env.lostark_api_key,
}
}
);
const PageSize = pagesize_response.data.PageSize;
const result = [];
for(i=1; i < PageSize; i++){
const response = await axios.post(
'https://developer-lostark.game.onstove.com/markets/items',
{
CategoryCode: 40000,
ItemGrade: grade.toString(),
ItemName: search.toString(),
PageNo: i,
},
{
headers: {
'accept': 'application/json',
'authorization': process.env.lostark_api_key,
}
}
);
result.push(...response.data.Items)
}
console.log(result)
res.render('markets.ejs')
}첫번째 post요청으로 page의 사이즈를 구하고 두번째 호출에 page의 사이즈만큼 반복문을 실행시키게해서 데이터를 result이라는 변수에 배열로 push하여 result라는 데이터를 console창에 띄우게했다. 이 가운데에 공백을 입력하여 오류가나는것을 방지하기위해서 .trim() 을 사용하여 공백을 제거하였다.
데이터를 페이지에 제공할때 문제가발생했다
문제점
데이터를 삽입하기위해서 예를들면 <%= data %> 이런방식으로 ejs문법을 사용했는데 이런식으로 사용하면 처음 get요청으로 페이지를 열었을때 data 값이 없기때문에 에러가 발생했다. 이 에러를 해결하기위해 해본 여러가지 시도가있다.
1. if문 사용하기
<% if (data) { %>
<%= data[0].Name %>
<% } %>이 코드의 문제점은 처음 페이지에 접속했을때 data라는 것이 정의되어 있지 않다는것이었다.
검색을 해보니 locals.data를 붙여서 해결했다는 사람들이 많았다.
<% if (locals.data) { %>
<%= data[0].Name %>
<% } %>이 코드를 사용하면 데이터가 없을때는 안보이지만 검색했을때 데이터를 보여주게 만들수있다.
하지만 여기에도 단점이있는데, 검색창에 데이터에 존재하지않는 검색어를 입력하면 에러가 발생하게된다
Cannot read properties of undefined (reading 'Name')오류에 대해서 검색해보니 '옵셔널 체이닝' 이라는것을 알게되었다.
옵셔널체이닝은 따로 글을 작성해서 자세히 알아보자
해결
이로써 검색어를 적지않았을때 또는 검색어에 존재하지않는 데이터를 적었을때 나오는 에러를 방지할수 있게되었다. 하지만 나중에 전체적인 데이터를 가져오는데 에러가 발생할수있으니 에러가 발생했을때 다시 해결해보도록하자.
해결한코드부분
<body>
<form action="/markets" method="post">
거래소 검색 <input value="" name="item" type="text">
<select name="grade">
<option value = "" >전체</option>
<option>영웅</option>
<option>전설</option>
<option>유물</option>
</select>
<button type="submit">제출</button>
</form>
<% if (locals.data) { %>
<img src="<%= data[0]?.Icon %>"\>
<%= data[0]?.Name %>
어제평균가 : <%= data[0]?.YDayAvgPrice %>
현재최저가 : <%= data[0]?.CurrentMinPrice %>
<br>
<img src="<%= data[1]?.Icon %>"\>
<%= data[1]?.Name %>
어제평균가 : <%= data[1]?.YDayAvgPrice %>
현재최저가 : <%= data[1]?.CurrentMinPrice %>
<br>
<img src="<%= data[2]?.Icon %>"\>
<%= data[2]?.Name %>
어제평균가 : <%= data[2]?.YDayAvgPrice %>
현재최저가 : <%= data[2]?.CurrentMinPrice %>
<br>
<% } %>이후에 데이터를 전송받을때 for문을 이용하면 더 편하다.(현재는 데이터보려고 하드코딩)
