Note13 React 클라이언트와 서버 데이터 통신하기 React 에서 client와 server가 통신하는 법이다. 서버에 데이터를 요청했을 때 프론트에서 데이터를 받으려면 기본 제공하는 api인 fetch를 이용하거나 라이브러리를 이용할 수 있다. 라이브러리는 axios를 사용해보겠다. 1. fetch 서버 주소와 HTTP 메서드만 있으면 된다. fetch('http://localhost:5000/api/todo') .then((response) => response.json()) .then((data) => console.log(data)); 이런식으로 작성하면 된다. 메서드를 입력하지 않으면 GET 요청이 기본값이다. react 개발 중인 client에 위 같이 입력을 한다면 server에 있는 데이터를 받아와서 콘솔창에 보여줄 것이다. 그러면 cli.. 2022. 8. 1. [npm] concurrently 사용하여 서버와 클라이언트 동시에 실행시키기 concurrently 는 여러 명령을 동시에 실행합니다. 1. concurrently 설치 npm install --save-dev concurrently 2. 사용법 package.json에서 scripts의 start에서 실행하고자 하는 명령을 아래와 같이 입력한다. //package.json { "script": { "client": "cd .. && cd client && yarn start", "server": "nodemon server.js", "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"", "start": "node server.js" } } 참고로 디렉토리 구조는 프로젝트 폴더 안에 client 폴.. 2022. 8. 1. [npm] Nodemon 사용하여 서버 자동으로 재시작하기 nodemon은 디렉토리의 파일 변경이 감지되면 노드 응용 프로그램을 자동으로 다시 시자하여 Node.js 기반 응용 프로그램을 개발하는데 도움이 되는 도구이다. 1. nodemon 설치 npm install --save-dev nodemon 2. 시작할 응용프로그램 파일을 node가 아니라 nodemon을 붙여 실행 ex) nodemon server.js 2022. 8. 1. 이전 1 2 3 4 5 다음
