지난주, 자바스크립트라는 언어를 '깊게' 배워보았는데요 ㅎㅎ

오늘은 ⚙️비동기(axios, async-await) ⚙️에 대해서 배울 예정입니다.

🦁오늘의 목표🦁

<aside> 💡 새로고침(refresh, reload)을 사용하지 않고, 비동기로 CRUD를 구현한다.

</aside>

<aside> 💡

ajax, axios 를 통해 비동기 통신을 이해한다.

</aside>

<aside> 💡 async, await 가 무엇인지를 알고, 적용해 본다.

</aside>

😇 새로고침과 비동기

그럼 먼저, 새로고침을 사용하지 않고 **C(create), R(read), U(update), D(delete)**를 구현해야하는 이유에 대해서 설명해보겠습니다.

현재 쓰고 있는 웹서비스들 중에서 댓글 하나 달았을 때 전체 페이지가 새로고침 되는 걸 보신 적이 있으신가요?

새로고침은 현재 페이지에서 다른 페이지로 넘어가야 해서 새로운 정보를 불러 와야 하는 경우를 제외하고는 많이 일어나지 않습니다.

그러나 저희가 구현한 웹페이지에서는 댓글 하나 달거나, 좋아요 하나 누를 때마다 전체 페이지가 새로고침되고 있습니다.

그렇다면 우리가 지금까지 구현한 좋아요, 댓글, 태그 정보는 어떻게 구현되어 있는지 살펴보겠습니다.

1️⃣ 태그를 만드는 경우, 태그 추가 버튼을 눌러서 POST 요청을 보냅니다.

2️⃣ Views.py에서는 사용자가 입력한 content를 전달받아서 tag 모델을 새로 만들고 다시 '/posts/' url로 redirect하는데 원래 있던 페이지 주소로 돌아오게 되고, 새로고침(refresh, reloading)이 발생하고 있습니다.

( '/posts/' url을 appname을 사용해서 'blogPosts:index'로 표현할 수 있다고 했던 것 기억나나요? 둘 다 같은 url을 의미합니다.)

• redirect와 render의 차이는?

새로 만들어진 tag 정보만을 업데이트 하기 위해 페이지 전체가 새로고침(refresh, reload)되고 있는 것을 확인할 수 있습니다. 하지만, 데이터 하나(tag 정보)를 변경하기 위해서 해당 페이지의 모든 데이터를 새로 로드하는 것은 상당히 비효율적인 방식입니다. 또한 유저가 하나의 요청을 보내고 새로 고침 되는 동안은 다른 요청을 보낼 수 없게 되어 요청이 끝나고 페이지가 로드되기를 기다려야 한다는 문제도 존재합니다.