why
최근 팀에서 도메인 별 개발을 하게 되어서 프론트와 백엔드 개발자 구분이 없어졌다. 선배는 이에 대응해서 기존의 프론트, 백엔드로 구분 지어진 워크스페이스를 통합시키기 위해 express를 nuxt의 serverMiddleware를 통해 융합시켰다. 이에 영감을 받아서 nest를 nuxt에 융합시켜봤다.
how
Nuxt.js with Nest.js backend를 참조해서 진행했으며 등록 중에 에러가 생겼던 부분에 대해서 기록을 남긴다.
1. jest.config.js에 testEnvironment: 'jsdom'를 추가해주는 것이다. jsdom이 없으면 test:client할 때 오류가 발생한다.
2. jest 설정 관련해서 ts-jest:{tsConfig: ...}가 있는데 tsConfig만 tsconfig로 고쳐주자.
3. "experimentalDecorators": true로 tsconfig를 변경하더라도 아래와 같은 오류가 계속 되기도 한다. 
이럴 땐, 아래와 같이 JS/TS > Implicit Project Config: Experimental Decorators를 체크해주자 
위의 사항들만 수정을 해주면 정상적으로 잘 작동한다. 특이한 점은 development일 때는 nest 서버의 포트를 4000으로 해서 nuxt와 달리 했는데 production에서는 서버 포트를 3000으로 하고 serverMiddleware에 서버를 등록한 점이다. 서버를 외부에서 사용할 수 있도록 http adapter를 사용하는 nest.ts라는 파일을 따로 만들어 사용한다. development일 땐 백과 프론트 모두 로그를 확인해야하기 때문에 이렇게 분리한 게 아닐까 추측한다.
new
nuxt에서 decorator를 사용하기 위해서 vue-property-decorator를 설치해봤다. 평소엔 객체 형태로 뷰 컴포넌트를 지정했는데 덕분에 클래스로 컴포넌트를 만드는 방법을 배워봤다. 코딩코딩을 참조하자.
