[Vue.js] API 서버 프로젝트 구성 및 실행 (캡틴판교 vue 강의)

1. 깃헙 레퍼지토리에서 프로젝트 템플릿으로 클론해오기

• 서버쪽 프로젝트를 먼저 구성해보자.
• 프로젝트를 담을 새폴더를 하나 생성한 후 해당 폴더 강의의 프로젝트 템플릿을 가져오고 npm 패키지도 설치해준다.

  1. vue-endgame > git clone [https://github.com/joshua1988/vue-til-server](https://github.com/joshua1988/vue-til-server)

2. npm install

• 폴더 구조: vue-endgame > vue-til-server
  
  
  

2. API 서버 실행

app.js 🔽

package.json 🔽
클론한 프로젝트 내에서 app.js 파일을 보면 포트번호가 3000번이다. 또 package.json 파일을 보면 다음과 같이 명령어가 설정되어있는데, 이를 통해 npm run dev ⇒ 즉 dev 라는 명령어로 API 서버를 실행할 수 있다.

실행결과:

(1) localhost:3000 번으로 접속: Cannot GET 이라는 문구가 뜬다.
(2) http://localhost:3000/api/docs/ 로 접속: API 문서로 접근할 수 있다.

3. 스웨거(Swagger)

스웨거란 Open Api Specification(OAS)를 위한 프레임워크 / Web API 문서화를 위한 도구이다.

• 개발자가 REST 웹 서비스를 설계, 빌드, 문서화, 소비하는 일을 도와주는 대형 도구 생태계의 지원을 받는 오픈 소스 소프트웨어 프레임워크
• nodejs 로 짜여진 API 로직들을 프론트엔드 개발자가 이해할 수 있는 형태로 문서화해줌
• 서버가 실행된 상태에서 API 문서가 올라오기 때문에 서버에 직접적인 데이터를 보내보고 응답까지 확인해 볼 수 있음

서버에 요청:

서버로부터 받은 응답:

출처: 인프런 강의 - 캡틴판교 [Vue.js 끝장내기 실무에 필요한 모든 것]