728x90 반응형 WEB49 WEB 만들기 23 - Concurrently 지금까지 서버를 켰을 때 두개를 하나씩 켰는데 한번에 켜는 법에 대해서 알아보겠습니다 . npm install concurrently --save 이런식으로 우선 설치를 해줍니다. 우선 설치를 제일 상위 폴더에 해주시면 됩니다. 그리고 나서는 사용 방법은 위와 같습니다. 상위 폴더의 package.json 부분의 scripts 에서 "dev": "concurrently \"npm run backend\" \"npm run start --prefix client\"" 이렇게 추가를 해주시면 됩니다. --prefix cleint " 이렇게 하는것은 client 쪽에 start를 실행을 해줘야하기 때문입니다. npm run dev를 해주면 한번에 켜집니다. 2021. 1. 22. WEB 만들기 22 - Proxy Server 프록시 서버란 무엇인가? 클라이언트에서 REQUEST 하고 서버에서 RESPONSE 를 하는데 이 안에 Proxy Server라는게 들어가 있을 수 있는데 만약에 유저가 있고 인터넷이 있다고 한다면 유저가 무엇인가를 보냈을 때 프록시 서버에서 여러가지 할 수 있는데 1. 주소가 123.123.123.123 이라고 한다면 임의로 받는 사람한테는 ip를 임의로 바꿔서 모르게 할 수 있다. 2.아이피 주소 뿐만 아니라 데이터 역시도 바꿀 수 있다. 그리고 방화벽 기능과 웹 필터 기능 캐쉬 데이터, 공유 데이터 제공 기능을 한다. 어떤 사이트에 들어갔을때 static한 이미지나 그런 것들을 프록시 서버에 저장 할 수 있다. 그래서 무엇인가를 보고 싶을때 인터넷 까지 않아도 프록시서버에 담아져 있는걸을 볼 수가 .. 2021. 1. 22. WEB 20 - 데이터 Flow & Axios 어떤 유저가 로그인을 하고 싶다면 ] Client 부분에서 사용자의 이름과 비번을 넣고 로그인 버튼을 누르면 요청이 서버쪽으로 가서 서버에서는 데이터베이스에 로그인 아이디가 있는지 찾고 유저가 보낸 비번이 맞는지 까지 체크하는 것하고 맞으면 성공했다고 보내거나 틀리거나해도 보내는 식으로 움직여진다. 저번에는 Client부분이 없어서 postman을 이용했는데 이제는 Client부분이 있기때문에 React JS부분에서 Request를 보내면 되는데 그때 사용할게 AXIOS이다. jQeury를 사용할때 AJAX라고 보면됩니다. 우선 client 쪽으로 와서 설치를 해줍시다. npm install axios --save 해주면 됩니다. 그리고 나서 LandingPage 부분에 전체적으로 import React.. 2021. 1. 21. WEB 만들기 21 - CORS 이슈, Proxy 설정 저번 시간에 데이터를 전송했는데 오류가 생겼습니다. 그 이유는 일단 포트가 다르고 어떤 설정을 안 하면 cors 정책에 의해서 막혀버린다. cors란 Cross-Origin Resource Sharing 의 약자로 보안을 위해서 사용된다. 여러가지 방법이 있다. 개발자 도구를 이용하는 방법 그리고 프론트 엔드 부분만 고칠 수 있는 상황이면 jsonp 방식을 이용하여 모듈 request를 get request로 바꿔서 보냄으로 인해서 해결할 수 있는 방법이 있습니다. 그것도 제한적이기 때문에 우리가 백엔드 , 프론트 다 컨트롤 할 수 있으면 서로 오는것은 받거나 허용 할수 있게 전달해서 보내면 가능하고 proxy라는 방법이 있습니다. create-react-app.dev/docs/proxying-api-r.. 2021. 1. 21. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 728x90 반응형
