반응형
목차
1. res.redirct( ), 사용이 불가능하다.
1.1. updateForm.html
submit 클릭시 이벤트를 중단시키고, 페이지의 값을 formData에 담아 axios.post( '/boards/update', formData ) 로 보내고 'await'한다.
...
<body>
<form id ="update-form">
<table>
<tr><th width="150" align="center">번호</th>
<td width="150" align="center">{{board.id}} <input type="hidden" name="id" value="{{board.id}}"/> </td><th width="150" align="center">작성자</th>
...
<input type="submit" value="수정">
<input type="button" value="돌아가기" onclick="location.href='/boards/boardView2/{{board.id}}'"></td></tr>
</tr>
</table>
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
document.getElementById('update-form').addEventListener('submit', async (e)=>{
e.preventDefault();
const id = e.target.id.value;
...
const formData = new FormData();
formData.append('id', id); //게시글 아이디(번호)
...
try{
await axios.post('/boards/update', formData);
}catch(err){
}
});
</script>
</body>
</html>
1.2. boards.js
updateForm.html의 script 태그에서 넘겨받은 formData를 요리조리 하고, 다음 페이지로 전환시키려고 redirect(B라우터)로 데이터를 전달하려고 한다.
// 게시물 수정
router.post('/update', upload.single('image'), async (req,res,next)=>{
try {
...
res.redirect('/boards/boardView2/'+ req.body.id);
} catch (err) {
console.error(err);
next(err);
}
});
// 게시물 보기 ( 조회수 카운트X )
router.get('/boardView2/:id', async (req, res,next)=>{
try {
// 게시물을 검색
const board = await Board.findOne({
where:{id:req.params.id},
});
// render로 전송
const luser = req.session.loginUser;
const dt = new Date();
res.render('boardView', {board, luser, dt});
} catch(err) {
console.error(err);
next(err);
}
});
하지만, B라우터의 동작은 정상적으로 작동하지만( 심지어 에러도 없다 ), '페이지 전환이 이루어지지 않는다'.
2. 이유가 뭘까?
await axios로 router 동작을 하게 되면 해당 라우터의 응답을 기다리기 때문이다.
라우터에서 다시 axios로 응답(response)을 보내지 않는 res.redirect( )또는 res.render( )을 사용하게되면 axios는 무한정 대기하기 때문에 비 정상적인 동작을 하는 것!
// router의 response를 기다리는 중.........................
await axios.post('/boards/update', formData);
3. 대처 방법
- router에서 res.redirect()대신 라우터를 닫는 'res.end()를 사용'하여 axios에게 동작을 완료했다는 응답을 보낸다.
- 그러면, 다음 줄 코드가 실행되는데, 'location.href를 활용'해 B라우터를 동작시킨다.
3.1. updateForm.html
...
<body>
<form id ="update-form">
...
</form>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
document.getElementById('update-form').addEventListener('submit', async (e)=>{
e.preventDefault();
const id = e.target.id.value;
...
const formData = new FormData();
formData.append('id', id); //게시글 아이디(번호)
...
try{
await axios.post('/boards/update', formData);
// boardView2는 조회수 카운트를 안하는 라우터
location.href='/boards/boardView2/{{board.id}}';
}catch(err){
}
});
</script>
</body>
</html>
3.2. boards.js
// 게시물 수정
router.post('/update', upload.single('image'), async (req,res,next)=>{
try {
...
res.end();
// axios를 사용했기 때문에 redirect코드는 의미 없음
// res.redirect('/boards/boardView2/'+ req.body.id);
} catch (err) {
console.error(err);
next(err);
}
});
// 게시물 보기 ( 조회수 카운트X )
router.get('/boardView2/:id', async (req, res,next)=>{
try {
// 게시물을 검색
const board = await Board.findOne({
where:{id:req.params.id},
});
// render로 전송
const luser = req.session.loginUser;
const dt = new Date();
res.render('boardView', {board, luser, dt});
} catch(err) {
console.error(err);
next(err);
}
});
반응형