[Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동

[Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동

2022. 5. 22. 03:55ㆍFront-End 작업실/Nuxt.js

728x90

Git Hub

한 권으로 배우는 Vue js 3 웹 애플리케이션 개발 기초 실전 (영진책)

COUPANG

www.coupang.com

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

🗂 목차

● [Vue+Nuxt.js] Nuxt.js 기본
●[Vue+Nuxt.js] Nuxt.js 시작하기
● [Vue+Nuxt.js] Nuxt.js Data 호출 방식과 API 연동
●[Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 목록 페이지와 상세 페이지 개발
● [Vue+Nuxt.js] Nuxt.js를 이용하여 쇼핑 상품 검색 UI 개발
● [Vue+Nuxt.js] Vuex를 이용하여 장바구니 Page 만들기

🚀 API 연동하기

🔽 Axios

📦 Axios 설치 및 API 호출

최초 Nuxt.js Root Path에서 아래 명령어를 입력하여 axios를 설치 해 주겠습니다.

명령어

npm install axios

main.vue에 script 입력부에 위와 같이 `axios`를 import하고, created()를 만들어 `get`으로 Backend에서 내용을 가져오게 해 주었습니다.

💡 참고 사항

BackEnd는 Mock 방식으로 만들어져 있으며, 필요하신 분들은 주니하랑의 Git Page에서 `backend` Package를 내려받기 하신 뒤 Nuxt.js Package 최상단에 넣어주시면 되고, `backend` Package 안에서 `npm run dev`를 입력하시면 `Backend`가 동작합니다.

Main Page를 들어와보면 HTML에 별다른 내용을 넣어주지 않았기 때문에 `axios`를 통해 불러온 Data가 보이지 않는데, 개발자 도구를 통해 확인을 해 보면 Data를 불러온 것을 볼 수 있는 것이에요.

🔽 Nuxt.js Port 및 받아온 Data 뿌려주기

📦 Nuxt.js Port 변경

먼저 동적으로 변경되는 Nuxt.js에 Port를 정적으로 박아주도록 해 볼게요.

`nuxt.config.js`에서 작업을 해 주시면 됩니다.

39 ~ 41번째를 주목할 필요가 있는 것이에요.
위와 같이 server 객체를 선언하고, port라는 객체에 port 번호를 입력하면 해당 번호로 Nuxt.js가 동작하게 됩니다.

아주 잘 동작하는 것을 확인할 수 있어요.

📦 Axios로 받아온 Data 뿌려주기

이번에는 Axios를 통해 https://localhost:3000/products에서 get Method를 통해 받아온 Data를 View에 뿌려주는 작업을 해 볼 것이에요.

최초 Backend에서 받아온 Data를 `response`에 담게 23번째 줄에 선언을 해 주었고, 27번째 줄을 보면 `response`안에 `data`에 내용을 `products` 필드 배열 변수에 담게 해 준 것이에요.

`Backend`에서 담아온 Data는 우리가 선언한 객체 내 `data`라는 곳에 담겨오게 되며, 이 `data` 객체 안을 들여다 보면 여러가지 객체가 또 존재하는 것을 알 수 있어요.

`main.vue`의 17번째 ~ 21번째를 주목해 보면 `data()` 안에 return을 선언하고, 그 곳에 `products`라는 빈 배열 객체를 선언해 주었어요. 그런 뒤 27번째 줄에서 `Backend`에서 응답으로 들어온 값을 받을 수 있게 처리한 것이에요.

5번째 ~ 7번째 줄을 보면 `<div>` Tag로 감싸준 뒤 `products` 객체 배열에 값을 뿌려주도록 해 주면 아래와 같이 받아온 Data가 화면에 나오는 것을 확인할 수 있는 것이에요.

개발자 도구 Console에 나오는 값 중 맨 아래를 보면 `[HMR]`이 나오는데, 이는 `Hot Module Replacement`의 약자이며, 내부적으로 Web Pack이 다 돌고 있는 상황인 것이에요.

참고로 현재 Page에서 새로고침을 하게 되면 한번 깜빡이는 현상을 만날 수 있는데, 그 이유는 비동기적으로 Data를 처리하는 특성으로 먼저 Data를 불어오기 전에 빈 배열이 먼저 화면에 뿌려지게 되고, 이후에 Data를 가져와서 뿌려지기 때문인 것이에요.

🔽 Data 호출

📦 Data 호출 방식

Nuxt.js 비동기 데이터 호출 방법 이론은 `이 곳`에 따로 준비해 두었어요.

최초 `asyncData()`를 한번 이용해 보도록 할게요.

`export default{}`안 최상단에 `acyncData()`를 만들어주고, 기존에 `created()`에 적었던 내용을 가져와 보았습니다.

일단 이렇게 하고, 저장을 하게 되면 문제가 생기는 것을 알 수 있어요.

Error가 발생한 이유는 바로 22번째 줄에 `this` Keyword 때문이에요.

`asyncData`는 비동기로 Data를 요청하는 즉, 서버에서 데이터를 받아올 때 사용하는 인스턴스 속성이에요.

`asyncData()`는 특정 Page에 진입하기 전에 호출되는 속성입니다. Page에 진입하기 전에 호출되기 때문에 `asyncData()` Logic이 잘 못 되었다면 Page 진입 자체가 불가능 해 집니다.

즉, Page가 그려지기 전에 불려지는 Logic이기 때문에 그것은 Component가 생성되기 직전에 호출되기 때문에 Component가 생성된 이후에 호출되는 `data()`, `created()`와 같은 친구들이 존재하기 이 전에 호출이 되고, 이 때문에 `data()`에 만들었던 `products:[]`는 존재하지 않은 상태이기 때문에 `this` Keyword에 문제가 발생하는 것이에요.

`asyncData()`를 사용한 뒤에 해당 Page에서 새로고침을 하면 화면 깜빡임도 제거된 것을 확인할 수 있어요.
즉, `asyncData()`를 이용하면 Nuxt.js가 추구하고자 하는 SSR을 이용하는 방법이라고 보면 되는 것이에요.

📦 asyncData 속성 주의사항

이번에는 `ProductList.vue`라는 Component를 한번 만들어 볼게요.

Component Package 밑에 `ProductList.vue`를 만들고 아래와 같이 Code를 입력해 주었어요.

그런 뒤 `Main.vue`에서 `ProductList.vue` Component를 이용할 수 있게 아래와 같이 Code를 입력해 주었어요.

VS Code에서 Compoent 이름으로 Tag를 선언하게 되면 자동으로 import와 compoents라는 객체를 선언하게 됩니다.

15번째 줄과 18번째 줄을 VS Code가 자동으로 입력해 준 내용이에요.

최초 위와 같이 Code를 입력하면 Error가 발생할 것이에요.
왜냐하면 `main.vue`에서 `ProductList.vue`를 불러왔지만, `ProductList.vue`에는 아무 내용이 없기 때문이에요.

이번에는 `asyncData()`의 주의점을 알아보기 위해 아래와 같이 Code를 수정 해 보았어요.

`main.vue`에 `asyncData()` 내용을 모두 주석처리하고, 아래와 같이 `ProductList.vue`에 옮겨 주었어요.

위와 같이 Code를 수정한 뒤 저장을 하고 실행을 하고 나면 Error가 나는 것을 확인할 수 있어요.

개발자 도구에 Console에서 맨 윗 부분을 보면 `Nuxt SSR`이라고 표시가 되고, 그 내용을 펼쳐보기 하면 위와 같이 Error가 나는 것을 확인할 수 있는데, 이는 Nuxt 즉, Server에서 나는 Error인 것이에요.

위와 같이 Error가 나는 이유는 결론적으로 `asyncData()`가 동작하지 않았기 때문이에요.

이를 확인하기 위해 아래와 같이 `console.log("asyncData Error 발생");'을 만들어 준 뒤 다시 실행 해 보았어요.

그리고 다시 실행 해 본 뒤 개발자 도구를 살펴 보았어요.

개발자 도구를 살펴보니 log 찍는 부분에 아예 접근 조차 못한 것을 확인할 수 있어요.

그 이유는 `asyncData()`는 위에서 이야기 한대로 `pages`라는 Package 밑에 Component에서만 사용할 수 있는 속성이기 때문이에요.

이번에 주니하랑은 `components`라는 Package 밑에 있는 Component에서 이를 사용하려 했기 때문에 동작하지 않는 것이에요.

📦 asyncData 속성 정리

간략하게 정리해 보면 `asyncData()`는 Page가 그려지기 전에 Data를 모두 받아온 뒤에 Page를 그린다 혹은 진입한다 라고 생각하면 된답니다.