Roopretelcham

프로젝트 폴더에서 node api 로 백엔드를 실행해본다

import dayjs from 'dayjs';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)

위와 같은 오류를 발견하면 해당 구문을 수정 후 다시 nuxt를 실행하면 된다. (혹은 package.json에 type moduel 지정 후 백엔드 소스 수정)

예시) 

변경 전

import dayjs from 'dayjs';
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';

dayjs.extend(isSameOrAfter);

export default dayjs;

변경 후

const dayjs = require('dayjs');
const isSameOrAfter = require('dayjs/plugin/isSameOrAfter');

dayjs.extend(isSameOrAfter);

module.exports = dayjs;

nvm은 노드 버전 매니저로 인스톨이나 버전관리, 스위칭 등을 편하게 할 수 있다. 윈도우에선 그냥 설치해서는 node exit status 1이나 5가 떠서 설치 성공 후 적는 글

기존에 오류로 nvm use가 안되었다면 node, nvm을 다 제거 후 환경변수도 모조리 삭제 후 아래 과정대로 설치한다.

https://nodejs.org/en/

에서 Node LTS 버전을 받아 설치 

* 설치 시 주의 점

- 설치 경로를 루트 (C:\) 로 잡는다. (예: C:\nodejs)

- 빈칸이 없도록 경로를 잡는다.

https://github.com/coreybutler/nvm-windows/releases

에서 nvm 받아 설치 (인스톨러인 nvm-setup을 받는게 편하다)

마찬가지로

* 설치 시 주의 점

- 설치 경로를 루트 (C:\) 로 잡는다. (예: C:\nodejs)

- 빈칸이 없도록 경로를 잡는다.

1. launch.json 파일 편집

- 디버깅 탭에서 launch.json 파일을 열 수 있다. 

launch.json (vs code 설정파일)

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "client: chrome",
        "url": "http://localhost:8082",
        "webRoot": "${workspaceFolder}"
      },
      {
        "type": "node",
        "request": "launch",
        "name": "server: nuxt",
        "args": ["dev"],
        "osx": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "linux": {
          "program": "${workspaceFolder}/node_modules/.bin/nuxt"
        },
        "windows": {
          "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
        }
      }
    ],
    "compounds": [
      {
        "name": "fullstack: nuxt",
        "configurations": ["server: nuxt", "client: chrome"]
      }
    ]
  }

2. nuxt 프로젝트 설정파일 수정

nuxt.config.js 에 extend 추가 

  build: {
    extend(config, ctx) {
      if (ctx.isDev) {
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    },

3. 기타

vs code는 Node.js와 크롬을 위한 자체 js디버거를 내장한다.

Nightly버전을 쓰려면 기존의 Javascript Debugger를 제거하고 확장 탭에서 아래의 이름으로 검색해 설치한다.

@id:ms-vscode.js-debug-nightly

이후 디버깅탭에서 fullstack:nuxt로 새 크롬창이 열리면 중단점이 적용되고 호출스택과 조사식을 통해 디버깅도 가능하다. (js파일 및 vue파일 포함)