소개

이 기사는, 총 18회로 연재한 Rails 6에서 인증 승인 게시판 API 구축 의 프런트 엔드측을 구축하는 기사 연재가 됩니다.

전제로 Rails 편으로 구축한 백엔드 API가 필요하므로 주의해 주십시오.
(그 때문에, 실질 #19입니다)

목차

전 6회, 매일 갱신입니다.

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #1 환경 구축

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #3 개별 기사 페이지 작성

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분을 구축하는 #4 가입 페이지 만들기

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분을 구축하는 #5 로그인 로그 아웃 구현

Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축 #6 기사 게시 양식 만들기

환경 구축

Rails 편과 같은 환경에 구축합니다.
단순히 환경을 하나 더 만드는 것이 귀찮을 뿐입니다

yarn 도입

우선 yarn을 넣습니다.

$ curl -o- -L https://yarnpkg.com/install.sh | bash

일단 터미널 창을 닫았다가 다시 열면 yarn 명령을 사용할 수 있습니다.

$ yarn -v
1.22.5

create nuxt-app 실행

$ cd ~/environment/
$ yarn create nuxt-app bbs_nuxt_app

UI Framework에서 Vuetify.js를 선택하고 modules에서 Axios, Lint에서 EsLint를 선택합니다 (Space에서 선택). 그렇지 않으면 기본값을 유지합니다.

$ cd bbs_nuxt_app/
$ yarn dev
ℹ NuxtJS collects completely anonymous data about usage.                                 04:44:17
  This will help us improving Nuxt developer experience over the time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participation? (Y/n)

익명 데이터를 보내거나 듣기 때문에 직접 선택하십시오.

실행하면 서버가 시작되지만, 8080 포트가 아마 rails로 묻혀 있기 때문에 적당한 포트가 흔들립니다.
하지만 cloud9에서 적당한 포트는 연주되므로 브라우저에서 포트 지정하여 열어도 볼 수 없을 것입니다.

Cloud9 공식 문서에 따라 사용할 수 있는 포트는 8080, 8081, 8082와 같으므로 8081을 지정합니다.

nuxt.config.js

 export default {
...
   build: {
-  }
+  },
+  server: {
+    port: 8081,
+  }
 }

$ yarn dev

이제 8081 포트에서 일어날 것입니다!
Preview를 눌러 Pop Out Into New Window 아이콘을 누르면 다른 탭에서 열리므로 URL의 끝에 포트 번호 지정으로 Nuxt의 Welcome 페이지가 나옵니다....cloud9.ap-northeast-1.amazonaws.com:8081 ← URL 말미 이런 느낌

eslint 이동

모처럼 eslint를 넣었으므로 움직여 보겠습니다.

$ yarn run lint
/home/ec2-user/environment/bbs_nuxt_app/nuxt.config.js
  69:15  error  Unexpected trailing comma  comma-dangle

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.

분명히 지금 방금 추가 한 nuxt.config.js에서 마지막 요소에 쉼표가 있기 때문에 화가났습니다.
--fix 옵션을 붙이면 자동 수정해 줍니다.

nuxt.config.js

 export default {
...
   build: {
   },
   server: {
-    port: 8081,
+    port: 8081
   }
 }

github에 push

프런트 엔드와 백엔드는 밀접하게 결합되는 것을 피하기 위해 동일한 리포지토리가 아닌 분리하는 것이 좋습니다.
그래서 프런트 엔드에 대한 새로운 리포지토리를 만듭니다.



그리고는 git push하면 OK.
공개키의 설정이나 무엇인가는, Rails#2 로 쓴 방법으로 대응해 주세요.

$ git add -A
$ git ci -m 'init'
$ git remote add origin https://github.com/{YOUR_ACCOUNT}/{YOUR_REPOSITORY}.git
$ git branch -M master
$ git push -u origin master

계속

→ Nuxt.js에서 인증 승인 게시판 API의 프런트 엔드 부분 구축하기 #2 Nuxt와 Rails 간의 소통 테스트
【 연재 목차로 】