계기
짧은 수강기간동안 웹 페이지를 만들고 생에 처음으로 API를 백엔드와 붙여보면서 각 기능들이 왜 그렇게 사용되는지 모른채 인터넷에 있는 형태를 필요에 맞게 고쳐서 정보를 잘 받아오면 그대로 사용했다.
대규모 프로젝트에 투입되었다고 하면 이런 일들이 중첩되면서 이후에는 어디에 버그가 생긴건지도 모른채 시간과 비용을 낭비할 가능성이 클수도 있는 일!
오늘은 axios, async, await 부분을 공부하고 그에 맞춰 리팩토링 해보도록 하겠다.
코드는 인턴으로 한 달 간 일했던 회사의 admin Q&A 페이지이다.
원본 코드
PM님의 요구사항이 조금은 특이했던게 처음 Q&A페이지를 들어가면 빈 페이지인 상태에서 필터 기능을 누르면 리스트가 생성되게 만들어 달라고 하셨다.
백엔드에서 graphQL을 사용하여 필터기능을 만들어 주셨고 프론트에서는 요구사항에 맞춰 query string형태로 요청을 보내면 그에 맞는 정보를 보내주는 형식이었다.
사수가 없었던 회사였기에 같이 어드민 사이트를 만들던 동기와 둘이서 필터 정보를 어떻게 저장해야 디테일 페이지에 들어갔다가 나와도 필터 정보가 그대로 남을 수 있을지 고민했고 위코드 멘토님의 조언을 얻어 sessionStorage에 저장하여 사용자가 디테일 페이지에 들어갔다가 다시 리스트로 돌아와도 원래 요구했던 필터 내용에 변경이 없게 설정해놓았다.
Axios 사용법
참고자료 : How to use Axios with React (Everything you need to know)
자동으로 JSON을 해석해주고 cross-site request forgery를 막아준다.
- cross-site request forgery란?
사용하는 이유
HTTP의 비동기성을 간단하게 만들고 CRUD operation (Create, Read, Update, Delete)를 직관적으로 처리한다.
Async & Await
기존의 비동기 처리 방식인 콜백 함수와 프로미스의 단점을 보완 => 개발자가 읽기 좋은 코드를 작성
화면에 보여질 순서대로 코드를 작성하면 되므로 더 깔끔하고 직관적이다.
참고자료 :
Cross-site request forgery
Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await).
