Vue - Node로 서버 생성(Express)

1. VS code에서 백단으로 사용할 폴더 생성

2. npm init 명령어 실행(npm을 이용해 패키지를 사용하겠다는 의미)

3. npm install express 명령어 실행 (express 서버 패키지를 모두 받겠다는 의미)

4. 서버로 사용할 js 파일 생성(server.js 라고 하겠다.)

5. server.js 에서 다음과 같은 코드를 이용하여 셋팅 하기

const express = require(express)
const app = express()

//get Mapping ( '/' 경로로 올 경우 받는 로직 )
app.get('/', function(req,res){
	res.send('Hello World');
});

app.listen(3000); //3000포트를 사용하겠다는 의미

-------------------

[Front에서 Back으로 보내기 위한 설정]

1. axios 패키지 받기 (npm install axios)

2. localhost:8080(front) -> localhost:3000(back) 바로 가면 CORS 오류 발생

  localhost:8080(front) -> proxy(중간 거점) -> localhost:3000(back) 이렇게 가야함

3. proxy 설정하기

 Front의 vue.config.js 파일에서 다음 코드처럼 수정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave:false,
  
  //devServer영역시작
  //devServer는 axios에 대한 설정이다. 
  //axios로 요청할 때 가는 경로는 http://localhost:3000 이라는 뜻
  devServer:{
    proxy:{
      '/api':{
        target:'http://localhost:3000',
        changeOrigin: true
      },
    },
  }
  //devServer영역끝
})

6. back에서 받을 경로 동일하게 '/api'로 해주기

    back으로 사용하는 js파일을 다음 코드처럼 수정

const express = require('express')
const app = express()

//Front에서 axios로 요청한 경로 '/api'를 맞춰준다
app.get('/api',function(req, res){
    res.send("hello world");
});

app.listen(3000);