728x90 반응형 리액트30 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. WEB 만들기 19 - React Router Dom 페이지를 이동 할때 React Router Dom 이란것을 사용합니다. 이것이 무엇인지 알아보기 위해서 이 사이트를 참고하면 됩니다. reactrouter.com/web/example/basic React Router: Declarative Routing for React Learn once, Route Anywhere reactrouter.com 이런식으로 데모 페이지가 잘되어 있습니다. 저기에 있는것을 토대로 페이지 전환하는것을 구현을 할것입니다. 그전에 React Router Dom을 설치를 해야합니다. cd client 부분으로 와서 npm install react-router-dom --save 이명령어로 설치를 해주시고 App.js 부분에 아까 사이트에 있는 코드를 복사해서 import { B.. 2021. 1. 20. WEB 만들기 18 -CRA to Boilerplate 앞으로 만든 페이지를 만들기에 앞서서 폴더를 수정할것입니다. 지금은 이런 상태라고 하면 이런식으로 바꿀 예정입니다. 여기서 보시면 src 폴더안에 LandingPage 부분은 처음에 나오는 페이지를 작성할것입니다. App.js 부분은 라우팅 관련일 처리를 할것인데 이부분은 무엇이냐면 내가 로그인 관련 페이지에 가고 싶다고 하면 로그인 페이지로 갈수있게 그렇게 분류를 시켜줄 수 있는 것 HOC 는 컴포넌트 안에 이것은 펑션인데 다른 컴포넌트를 갖는 펑션이라고 생각하면되는데 Auth라는게 있는데 이게 어떤사람이 자격이 되는지 체크를 하는 곳인데 어떤 컴포넌트가있는데 그곳은 관리자만 들어갈 수 있다고 하자. 이 Auth에서 어떤사람이 들어오려고 할때 이곳에서 들어올 수 있는 사람인지 아닌지 체크해서 들어올수 .. 2021. 1. 20. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
