보이보이

1. Toss 

Toss 개발자 센터 : https://developers.tosspayments.com/

토스 회원 가입 후 내 개발 정보 센터에 있는 API 키를 Application 에 사용할 예정입니다.

브랜드페이 탭이 최초 회원가입 시에는 비활성화 상태이지만, 토스 측 안내에 따라 메일을 보내면 활성화 상태가 됩니다.

브랜드페이 개발도 진행할 것이기 때문에 미리 활성화 상태로 만들어야 합니다.

전 업무 시간에 진행해서인지 메일을 보낸 후 한 시간도 되지 않아 활성화 되었습니다.

2. Nuxt 프로젝트 생성

다음과 같이 생성하시면 됩니다.

저는 인텔리제이에서 생성했는데, 어떻게 준비하셔도 상관은 없습니다.

저는 어떠한 라이브러리도 없는 상태로 앱을 생성했습니다.

해당 프로젝트 경로에서 npm run dev 명령어를 사용해 Nuxt App을 기동합니다.

기본 포트인 3000번 포트에 접속해서 정상 기동을 확인합니다.

오늘 하루도 고생하셨습니다.

감사합니다.

1. Nuxt.js 호스트 및 포트 특징

호스트는 기본적으로 호스트 머신에서만 접근 가능한 localhost 로 설정되어 있습니다.

외부 장치에서 접근하기 위해서는 호스트를 수정해야 합니다.

호스트를 '0.0.0' 이나 '0' 으로 설정 시 로컬 IP 주소가 Nuxt App 호스트에 할당되어 외부에서도 접근할 수 있게 됩니다.

포트는 기본적으로 3000번이 할당되지만,

Nuxt App 기동 이전에 이미 3000번 포트가 점유되어 있다면 점유되지 않은 포트 번호를 할당 받습니다.

포트에 문자열 값 '0' 이 할당되면 Nuxt App 에 임의의 포트 번호가 할당됩니다.

2. Nuxt.js 호스트 및 포트 수정

호스트와 포트 번호를 설정하는 방법에는 세 가지 방법이 있습니다.

각각 방식을 설명 드리겠습니다.

1) nuxt.config.js 설정

  // Server setup
  server: {
    host: '0',
    port: '0'
  }

다음은 실행 화면입니다.

IP Local IP 주소가 할당되고, 임의의 포트 번호가 할당된 것을 확인할 수 있습니다.

Local IP 주소는 가려놓은 점 양해 부탁드립니다.

nuxt.config.js 파일에서 수정할 수 있지만 사이트를 호스팅할 때 문제가 발생할 수 있습니다.

따라서 파일을 직접 수정하는 것은 권장되지 않습니다.

대신 명령어를 통해 호스트와 포트를 직접 설정하는 방식을 대안으로 사용할 수 있습니다.

2) 명령어 설정

서버를 기동할 때 명령어를 통해 호스트와 포트 정보를 직접 설정합니다.

HOST=0 PORT=8000 npm run dev

3) package.json 설정

매 번 명령어에 호스트와 포트 정보를 입력하는 것도 일입니다.

package.json 에 있는 명령어 설정 자체를 수정할 수 있습니다.

  "scripts": {
    "dev": "nuxt --hostname '0' --port 8000",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

본 문서는 Nuxt 공식 문서를 참고하여 작성되었습니다.

https://nuxtjs.org/docs/features/configuration/#edit-host-and-port

오늘도 행복한 하루 보내세요.

감사합니다.

캡틴판교 장기효 님의 Nuxt.js 시작하기 강의를 듣던 중

처음 Vue.js 와 Nuxt3 를 독학하면서 데이터를 받아오기 위해 Spring Boot 로 API 를 구성하면서,

배보다 큰 배꼽을 만들기 위해 사투를 벌이던 제가 생각이 났습니다.

그래서 저와 같은 상황에 놓여있는 개발자 분들을 위해 이 정리글을 작성했습니다.

이런 API 서버를 구성해주시고, 쉽게 Nuxt 를 설명해주시는 장사장님께 감사 드립니다.....

1. 이 글이 필요한 사람

프론트엔드 학습 중 데이터를 만지작거리며 실습하고 싶지만,

API 서버를 구성하기에는 상황이 여의치 않으신 분들입니다.

2. API 서버 구성

1) git clone

아래의 git 에서 프로젝트를 clone 합니다.

https://github.com/joshua1988/learn-nuxt

2) backend 디렉토리 복사 및 붙여넣기

cmd 를 실행하고, 다음 명령어를 입력합니다.

1. 클론 할 디렉토리를 생성합니다.
mkdir forApi

2. 생성한 디렉토리로 이동합니다.
cd forApi

3. 클론을 진행합니다. git clone (클론 주소) .(현재 디렉토리를 의미하는 .)
git clone https://github.com/joshua1988/learn-nuxt.git .

4. 복사할 backend 디렉토리를 편하게 확인할 수 있게 현재 디렉토리 창을 띄웁니다.
open .

backend 디렉토리를 복사합니다.

편하게 관리하기 위해 front 프로젝트에 붙여넣기 합니다.

3) 백엔드 API 서버 기동 확인

다음 명령어를 수행하며 backend 서버를 기동합니다.

1. cmd 에서 backend 디렉토리로 이동 후 모듈을 설치합니다.
npm install

2. 서버를 기동합니다. 서버 포트는 3000번 입니다.
npm run dev

브라우저를 통해 API 페이지로 접근합니다.

3. API 서버 사용안내

다양한 데이터 접근 방법이 있겠지만, 다음 예시는 그 중 가장 보편적인 axios 데이터 접근 예입니다.

GET 요청으로 API 서버에서 받아온 데이터를 console 에 찍어보겠습니다.

<script>
import axios from 'axios';

export default {
  async created() {
    const response = await axios.get('http://localhost:3000/products')
    console.log(response)
  },
}
</script>

<style scoped>

</style>

아래와 같이 GET 요청으로 받아온 데이터들을 확인할 수 있습니다.

더미 데이터들로 프론트엔드 기술들을 테스트할 수 있습니다.

보다 정교한 테스트용 API 서버 주소

https://github.com/typicode/json-server

오늘도 행복한 하루 보내세요.

감사합니다.

1. 에러 상황

Nuxt.js App 수정 중 다음 에러 발생했습니다.

TypeError: this.libOptions.parse is not a function
    at ESLint8Plugin.<anonymous> (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:139:64)
    at step (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:44:23)
    at Object.next (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:25:53)
    at /Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:15:12)
    at ESLint8Plugin.invokeESLint (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:133:16)
    at ESLint8Plugin.<anonymous> (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:120:44)
    at step (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:44:23)
    at Object.next (/Applications/IntelliJ IDEA.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint8-plugin.js:25:53)
Process finished with exit code -1

2. 에러 원인

ESLint 의 버전 8.23 에서 도입된 변경 사항으로 해당 에러가 발생합니다.

3. 에러 해결책

ESLint 의 버전을 8.22.0 이하의 버전으로 다운그레이드를 진행합니다.

cmd 에서 해당 Nuxt App 경로로 이동 후 다음 명령어를 실행합니다.

npm install eslint@8.22.0 --save-exact

package.json 에서 변경 된 ESLint 의 버전을 확인합니다.

  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxtjs/eslint-config": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "eslint": "8.22.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "prettier": "^2.7.1"
  }

에러 해결은 다음 페이지를 참고하여 진행했습니다.

https://youtrack.jetbrains.com/issue/WEB-57089/ESLint823-TypeError-thislibOptionsparse-is-not-a-function

행복한 하루 보내세요.

감사합니다.

1. 에러 상황

Nuxt.js App 기동 중 다음 에러 발생했습니다.

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/parkjinseong/learn-nuxt/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/parkjinseong/learn-nuxt/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/parkjinseong/learn-nuxt/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/parkjinseong/learn-nuxt/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/parkjinseong/learn-nuxt/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/parkjinseong/learn-nuxt/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/parkjinseong/learn-nuxt/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/parkjinseong/learn-nuxt/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

2. 에러 원인

Nuxt.js App 에서 지원하는 Node.js 버전과 상이한 버전 사용 중으로 에러 발생했습니다.

3. 에러 해결책

Node.js 버전 변경으로 해결했습니다.

Node.js 버전을 변경하는 방법은 여러가지가 있습니다.

굳이 기설치된 버전을 삭제하고, 다시 설치할 필요없이 Node.js 버전 관리 App인 NVM 설치 후 버전을 변경하고 에러를 해결했습니다.

행복한 하루 보내세요.

감사합니다.