위의 방식이 편하지만 맥북의 경우는 크롬이 아니라 사파리가 열린다. 물론 기본 브라우저를 바꾸면 되지만 시스템 설정을 바꾸지 않고 처리하는 방법은 opn 모듈을 설치해서 사용하는 것이다.
기본적인 사용방법은 아래와 같이 URL, 옵션 방식이다.
추가적인 정보와 옵션들은 위의 opn 링크를 참조하면 된다.
Nuxt에 적용하는 방법은 간단한다. nuxt.config.ts 파일에 opn 패키지를 import하고 nuxt의 hooks 를 이용해서 호스트의 변경이 발생하면 브라우저를 실행해 주는 방식이다.
nuxt.config.js (javascript 환경인 경우)
nuxt.config.ts (Typescript 환경인 경우)
Module parse failed: Identifier ‘installComponents’ has already been declared
위의 명령으로 개발환경으로 처리할 때는 문제가 없이 동작을 했지만 배포 테스트를 위해서 아래와 같이 빌드 명령을 수행하면 오류가 발생한다.
발생하는 오류는 다음과 같다.
Module parse failed: Identifier ‘installComponents’ has already been declared
오류를 해석해 보면 “installComponents”가 선언되었기 때문에 중복으로 선언되어 Moudle 파싱을 처리할 수 없다는 내용이다. 이런 문제가 발생하는 이유는 Vuetify가 두번 로드되고 있다고 생각하면 된다.
Nuxt에서는 Webpack이 내부적으로 구성되어 동작하고 Vuetify를 Module로 처리하고 있기 때문에 이런 중복에 관련된 것은 설정상의 문제 (nuxt.config.[js|ts]]) 뿐이 없다. 물론 Webpack을 커스텀하게 구성하고 있다면 다른 문제가 된다.
여기서는 기본적인 Nuxt를 사용하고 있다는 가정하게 아래와 같이 nuxt.config.[js|ts] 파일에 중복 설정된 것을 확인해 보면 된다.
위의 예시와 같이 buildModules, Modules 두 곳에 @nuxtjs/vuetify가 등록되어 있는 것을 확인할 수 있다. 이런 문제가 생기는 이유는 아마도 Vuetify 버전을 Upgrade 등을 수행하면서 처리된 것이다.
buildModules 에서 @nuxtjs/vuetify를 제거
해 주면 문제가 해결된다.
기본 폴더 재 정의하기
Nuxt는 기본적인 폴더 구조를 제공하고 있다. 그런데 실제 프로젝트를 진행하다 보면 이를 재 구성해서 의미론적으로 운영할 때가 많다. 예를 들면 “layout”과 “pages”를 모두 “Views”라는 폴더 밑의 서브 폴더로 통합운영하는 것 등이다.
위의 기본 폴더를 아래와 같이 기능별로 묶어서 구성할 수 있다.
위와 같이 폴더를 재 구성하는 경우는 아래와 같이 “nuxt.config.[js|ts]” 를 변경하면 된다.
“ERR_ACTION_ACCESS_UNDEFINED” 오류
nuxt.js에서 Store의 Action을 “vuex-module-decorators” 패키지를 이용해서 사용할 때 아래와 같은 오류가 발생할 수 있다.
Namespaces do not function. Throws “ERR_ACTION_ACCESS_UNDEFINED” when using namespaces
vuex-module-decorators 내부에서 처리하는 과정에 발생하는 것으로 설정에 따라서 다양한 원인으로 발생할 수 있다. 다만, 그 중에 한가지는 Store Action에서 사용자 정의 Error를 반환할 떄 발생하는 것이며, 아래와 같이 Action 선언을 처리해 주면 된다.
위의 코드에서와 같이
@Action({ rawError: true })
를 설정하면 해결된다. 단, 다른 원인에 의해서 발생하는 경우는 해당 원인을 파악해 본후에 적용해야 한다.
[갱신일자 : 2020/01/14]
만일 위의 증상을 해결해서 정상동작하고 있는 상태라고 해도 nuxt-auth 모듈 패키지를 설치해서 운영하는 경우라면 위와 같은 오류가 발생한다. 인증 부분을 처리하기 위해서 도입하고 설정해서 사용하는 중에 지속적으로 같은 오류가 발생한다. 따라서 결국은 들어내고 수동으로 구현하는 것이외에는 아직 해결 방법이 없는 것 같다.