JavaScript 를 사용한 API 통신

✏️ SSR 방식의 API 통신

• SSR 방식으로 웹앱을 개발하면 form 태그에 action 속성을 사용해 post 요청을 주고받는다.
  • 이 방식의 단점은 서버와 왕복 요청을 해야되기 때문에 페이지가 반드시 새로고침 되어야 한다는 점이다.
• fetch API 를 사용해 브라우저와 통신하면 왕복 요청할 필요가 없으므로 redirec 하거나 페이지가 새로고침 될 필요가 없다.

✏️ 적용하기

📍 Form HTML

• 이 방식은 javaScript 를 사용해 api 응답에 따라서 페이지를 동적으로 변화시키는 방법이기 때문에 redirect 페이지를 별도로 만들 필요 없고,
  form 페이지만 만들면 된다.
  - form 태그에 action 속성을 빼고 id 를 추가해준다.
  - javaScript 에서 id 기반으로 form 태그를 찾고 preventDefault() 를 사용해 submit 을 가로챈다.
  - javaScript 를 사용해 http 메시지를 만들고 직접 fetch 방식으로 서버에api 요청을 보내 응답받은 json 값, status 를 기반으로 상위 div 태그의 내용을 수정하는 방식이다.

<div id="newsletterSignupFormContainer">
    <form class="form-horizontal" role="form" id="newsletterSignupForm">
        (... 생략)
    </form>
</div>

<script>
    document.getElementById('newsletterSignupForm')
            .addEventListener('submit', evt => {
                evt.preventDefault()
                const form = evt.target
                const body = JSON.stringify({
                    _csrf: form.elements._csrf.value,
                    name: form.elements.name.value,
                    email: form.elements.email.value,
                })
                const headers = { 'Content-Type': 'application/json' }
                const container = document.getElementById('newsletterSignupFormContainer')
                fetch('/api/newsletter-signup', { method: 'post', body, headers })
                        .then(resp => {
                            if(resp.status < 200 || resp.status >= 300)
                                throw new Error(`Request failed with status ${resp.status}`)
                            return resp.json()
                        })
                        .then(json => {
                            container.innerHTML = '<b>Thank you for signing up!<b>'
                        })
                        .catch(err => {
                            container.innerHTML = `<b>We're sorry, we had a problem` +
                                    `signing you up. Plass <a href="/newsletter">try again</a>` +
                                    `<p>Error = ${err}</p>`
                        })
            })
</script>

📍 api 생성

• 요청 form 은 render 를 사용해 html 을 응답한다.
• fetch api 는 json 을 응답해줘야 하기 때문에 send 또는 json 을 사용하면 된다.

exports.newsletter = (req, res) => {
    res.render('newsletter', { CSRF: 'token here' })
}

exports.api = {
    newsletterSignup : (req, res) => {
        console.log('Form (from query) :', req.query.form)
        console.log('CSRF (from hidden form field) :', req.body._csrf)
        console.log('Name :', req.body.name)
        console.log('Email :', req.body.email)
        res.send({ result: 'success' })
    }
}