[Nuxt.js] 공식문서 번역하기(Context and Helpers)

---

Context 와 Helpers

Context 오브젝트는 asyncData, plugins, middleware 그리고 nuxtServerInit과 같은 특정 넉스트 함수에서만 사용할 수 있습니다.

 

가장 중요한 것은 context가 vuex store 나 connect 인스턴스같은 다른 분야의 넉스트 앱에 접근할 수 있게 해 준다는 것입니다. 때문에 context 내에는 서버사이드에서 사용 가능한 req와 res가 있고 스토어는 항상 가능합니다.

 

그러나 시간이 지나면 context는 다른 매우 유용한 변수들과 줄임말들로 확장 됩니다. 이제 우리는 context를 통해 환경 변수에 접근하는 옵션 만큼 개발모드에서HMR 기능, 현재 라우트, 페이지 매개변수와 쿼리에 접근할 수 있습니다.

 

 

Default로 제공되는 context keys:

{ app, store, route, params, query, env, isDev, isHMR, redirect, error, $config }

 

 

API 쿼리를 위해 페이지 매개변수 사용하기

Context는 context.params를 통해 직접적으로 동적인 파라미터를 노출시켜 줍니다. Api는 nuxt/http 모듈을 통해 호출가능합니다. Modules는 nuxt/http 모듈 처럼 context.app 객체를 통해 함수를 노출시킬 수 있습니다.

원래 try/catch로 api를 묶어 에러 핸들링을 하지만, context.error 로 직접적으로 에러 페이지를 보여줄 수 있고 에러를 전달할 수 있습니다.

 

Users 리다이렉팅 & 스토어 접근

Vuex 스토어에 접근하는 것 또한 context로 가능합니다. This.$store로 뷰 컴포넌트 내에서 스토어 객체를 사용할 수 있습니다. 또한, state가 인증되지 않았을 때 리다이렉팅 하기 위해 redirect 메소드도 사용할 수 있습니다.

 

---

Helpers

 

$nuxt: nuxt.js 헬퍼

$nuxt는 ux의 향상과 몇몇 상황에 대해 벗어나기 위해 디자인 됐다. This.$nuxt로 뷰 컴포넌트에서, window.$nuxt로 클라이언트 사이드에서 접근 가능하다.

 

-      Connection checker: 인터넷 연결 상태에 따른 isOffline과 isOnline의 불리언 값을 제공한다. (v-if=”$nuxt.isOffline”)

 

-      루트 인스턴스 접근: window.$nuxt로 $axios같은 뷰 컴포넌트 외부 모듈 메소드에 접근할 수 있게 합니다. 그러나 이건 최후의 상황에서 사용해야 합니다.

 

-      페이지 데이터 리프레쉬: 유저가 현재 보고있는 페이지를 리프레시 하고 싶을 때 this.$nuxt.refresh()로 데이터 부분만 리프레시 가능하다.

 

-      로딩바 컨트롤: this.$nuxt.$loading으로 로딩 바 컨트롤이 가능하다. this.$nuxt.$loading.start()

 

-      onNuxtReady helper: Nuxt 앱이 로드 되고 준비됐을 때 스크립트를 실행시키고 싶다면 window.onNuxtReady함수를 쓰면 됩니다. 웹에서 상호작용하는 시간 낭비 없이 클라이언트 쪽에서 함수를 실행시키고 싶을 때 유용하다.

 

-      프로세스 헬퍼: nuxt는 client, server 그리고 static이라는 세 가지 불리언 값을 글로벌 process 오브젝트에 넣는데 이것들은 해당 앱이 서버에서 렌더되는지 클라이언트에서 다 렌더되는지와 관계 없이 static 사이트 세대를 체크할 수 있게 결정해준다.( Nuxt.js injects three boolean values (client, server, and static) into the global process object which will help you to determine whether your app was rendered on the server or fully on the client, as well as checking for static site generation.) 이 헬퍼들은 앱 전체에서 사용할 수 있고 asyncData userland 코드(The term userland (or user space) refers to all code which runs outside the operating system's kernel. 사용자 공간에서 실행되는 모든 앱)에서 흔히 사용된다.