나는 이제 server and client 동시실행을 위해 concurrently를 사용할 예정이다.
일단 concurrently를 사용하려면 어떻게 해야되는지 하나씩 알아보자
concurrently를 모듈을 깔아보자
npm install concurrently
이렇게 모듈을 다깔면 json에 최신버전의 concurrently이 깔릴것이다.
위치는 한번더 곱씹자면 메인 제일 하위 폴더이다. 왜냐하면 server와 client를 동시에 시작해야되는데 server따로 client 따로 이 모듈을 굳이 설치 할 필요가 없기 때문이다.
모듈을 다 설치했다고한다면 이제는 scripts에 무슨 명령어를 어떻게 시작해서 어떻게 실행할것인지 적어주자
"scripts": {
클라이언트 명령어 시작시 client파일로 이동해 npm start해달라
"client": "cd client && npm start",
서버 명렁어 시작시 server파일로 이동해 app.js start해달라
"server": "cd server && node app.js",
이명령어를 쳤을때 이전에 켜져있던것들은 죽여주고 server와 client를 동시해 실행시켜주라
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
},
이를 통해 우리는 server와 client가 동시해 바로 실행되는줄알았다.
] Proxy error: Could not proxy request /favicon.ico from localhost:3000 to http://localhost:5000/. 하지만 우리는 마주한다 이런 애러에 대해서 proxy port colide 포트의 충돌이라고 한다.
proxy를 통하여 이 충동을 피해주고 Axios의 무난한 작동을 위해 우리는 코드를 작성해줄것이다.
proxy.js
const proxy = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
proxy("/api/**", {
// https://github.com/chimurai/http-proxy-middleware
target: "http://localhost:5000",
secure: false,
})
);
};
이렇게 코드를 작성한후 우리는 middleware라는 모듈과 마주친다. 이모듈을 깔아주자
npm install --save http-proxy-middleware
그리고 이렇게 작성한 proxy는 다른 json파일에서 다시 언급되면 똑같이 애러가 발생되니 지워준다.
그리고 우리는 명령어를 입력할것이다.
yarn run
