폴더 구조를 좀 바꿔보자.
HOC?
- higher order component
- 컴포넌트안에 다른 컴포넌트를 갖는 function
- 자격을 판단하여 다음 action을 취할 수 있게 함.
React-Router-Dom
이 페이지를 참고하면 되는데 v6는 실습을 제공하지 않는듯..
이건 v5 실습페이지인데 문법이 좀 바뀌어서 혼란이 생길 수도 있다.
사용하기 위해서 클라이언트로 디렉토리를 바꾼 후(cd client) npm i react-router-dom --save로 설치해준다.
강사님이 사용하는 코드는 v5버전이었기 때문에 그대로 쓰고싶지 않았는데 이 페이지가 다소 도움이 되었다.
이 중 링크를 폴더 구조를 바꿀 때 만들었던 LandingPage.js로 연결되게 하고 싶었는데, 이때 잠시 오류가 발생했었다.
... is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
검색해 보니 Route는 Route만을 자식으로 가질 수 있다고 함.. v6예시 코드에도 Route안에 Route가 자식으로 있다.
이런 식으로.
그래서 <Route path="/" element={LandingPage()} />이런식으로 그냥 닫아버렸음.
Data Flow & Axios
유저가 로그인을 하고 싶으면 클라이언트에서 사용자의 이름과 비밀번호를 적고 로그인 버튼을 누를 것이다(Request). 서버에서는 유저의 아이디가 있는지, 패스워드가 일치하는지를 보고 Response를 보낸다.
지금까지는 클라이언트 없이 postman으로 req를 보냈는데 이제는 react에서 req를 보낼 수 있다. 이때 Axios를 사용하려 한다.
Axios는 Jquery의 ajax와 비슷함.
npm i axios --save
그럼 req를 하나 보내보자.
LandingPage.js
import React from 'react';
import axios from 'axios';
function LandingPage(){
React.useEffect(()=>{
axios.get("/api/hello")
});
return <div>LandingPage</div>;
}
export default LandingPage;여기서 get을 사용했으니 index.js에서도 이를 처리해주자.
index.js
app.get("/api/hello", (req, res) => {
res.send("안녕하세요.");
})이제 요 res를 받아서 콘솔에 나타낼 수 있게 LandingPage axios부분에 .then(res => console.log(res.data))를 넣어주었다.
근데 왜 res뒤에 data를 붙여주는지는 모르겠다. 이건 이따 봐야지
문제는!
백엔드 서버를 켜려고 하는데 에러가 발생했다는 것이다.
Cannot find module
보통 오타가 원인이라고 하는데 이해가 안 된다. 오타고 뭐고 그냥 메인 루트폴더에서 시작한건데..?
찾아보니 node_modules를 지워라 어째라 하는 글이 많은데 백엔드/프론트엔드 해서 node_modules가 두 개가 된 건 맞지만 별로 지우고싶지는 않았다.. 지웠는데도 안되면 개손해니까.
다행히 강의 댓글에 비슷한 의문이 있어서 해결했다. 백엔드의 package.json에서 start랑 backend에 경로를 하나 추가했다.
이렇게
그래서 무사히 백엔드 서버를 켜고, 터미널을 추가한 다음 프론트엔드 서버까지 켰다.
하지만 에러!
이건 강사님이 에러 보여주려고 한것같아서 별로 걱정은 안됨
이유는 서버는 5000번 포트를, 클라이언트는 3000번 포트를 쓰고있어서이다.
그럼 axios요청에서 한번 axios.get('http://localhost:5000/api/hello')이렇게 바꿔보자.
..에러 문구는 달라졌지만 여전히 에러!
이걸 해결하고 끝날 줄 알았는데 다음 시간에(...)
떡밥 회수하러 가야할 듯
