-
글쓴이글
-
2021년 1월 11일 16:50 #5942
김민성참가자리엑트로 개발했는데요
현재 리액트 소스는 <Card.Title>제목</Card.Title> 이렇고,
데이터 베이스에는 제목이 저장되어있는 상태인데
강의에서는 render함수를 쓰더라고요 인자에는 html파일이름이랑 변수이름 할당해서 쓰는 방식인거같은데
리액트는 변수를 어떻게 넘겨야 하죠? 즉, 제목 저 부분에 어떤 변수를 써야합니까?
2021년 1월 11일 17:16 #5943
codingapple키 마스터express + ejs 만으로 개발할 땐 "특정 페이지 방문시 DB에 있는데이터를 뽑아서 그걸 ejs파일에 꽂은 다음 고객에게 보내라"라고 코드를 짰습니다.
하지만 리액트를 사용하신다면 "특정페이지 방문시~" 부터 구현할 수 없습니다. 페이지가 index.html 하나니까요.
(리액트 라우터 쓴다고해도 그건 새로운 html 페이지가 아닙니다)
그래서 리액트에서
1. 제목 컴포넌트가 등장시
2. 서버로 ajax 요청을 해서 DB에 있는 게시물 제목들을 뽑아옴 (이걸 처리하는 서버 API기능개발이 먼저 필요하겠군요)
3. 받아온 제목들을 state로 저장하든 어디 저장하든 함
4. 그 state를 HTML에 잘 꽂아놓으면 알아서 바뀜
이렇게 ajax 요청으로 개발합니다.
2021년 1월 11일 18:15 #5945
김민성참가자axios를 사용하고 싶은데 그럼 axios.get("???") 을 써야하는데 저 url에는 어떤걸 넣어야 하죠? 제 몽고디비관련된 뭔가를 넣어야될거같은데....모르겠네용
2021년 1월 11일 18:47 #5947
codingapple키 마스터서버에다가
어떤놈이 /title 로 get 요청하면 db에있는 데이터 뽑아서 send 해줘라 라고 코드를 짜놓으면 됩니다
그다음에 리액트에서
axios.get('서버주소/title') 이렇게하면 될듯요
2021년 1월 11일 22:37 #5958
김민성참가자제 리액트 소스가
useEffect(()=>{
axios.get('/title').then((res)=>{console.log(res.data)}).catch(()=>{console.log("실패")});
})이렇게 되어있고 서버쪽 소스는
app.get('/title', function(req,res){
res.send(db.collection('post').find().toArray());
});이렇게 되어있는데 네트워크보니깐 성공적으로 받아는 와지는데 이상한 html 이 오더라고요
서버소스 위쪽에
app.get('/', function(req, res){
res.sendFile(path.join(__dirname,'project-react/build/index.html'));
});app.get('*', function(req,res){
res.sendFile(path.join(__dirname,'project-react/build/index.html'));
});이렇게 라우팅해둔 소스가 있는데 이게 온거같기도하고 왜 이런거죠?
2021년 1월 11일 23:15 #5960
김민성참가자대충 어찌어찌해서 데이터가 오는거같은데 데이터가 텅텅 비어있네요.
서버쪽 콘솔에는 잘 찍히는데 리엑트에서 못받고 있나봐요.
useEffect(()=>{
axios.get('/title').then((res)=>{console.log("성공"+res.data)}).catch(()=>{console.log("실패")});
})res.data가 null 이라 그런지 성공만 계속 찍히고 있는 상황이에요
2021년 1월 11일 23:59 #5962
김민성참가자아 이게 두개가 겹치는거 같아요.
app.get('*', function(req,res){
res.sendFile(path.join(__dirname,'project-react/build/index.html'));
});app.get('/title', function(req,res){
res.send(db.collection('post').find().toArray(function(err,res){
}));
});생각해보니깐 두개가 겹쳐서 어떤 다른 경로로 get요청을해도 *이것때문에 계속 html이 보내지고 있는 상황 아닌가요?
아 너무 어렵네요 ㅜ
2021년 1월 12일 12:57 #5966
김민성참가자옮겼는데 html은 안 오거든요? 근데 데이터가 텅텅 비어있어요
useEffect(()=>{
axios.get('/title').then((res)=>{console.log(res)}).catch(err=>{console.log('err')});
})제가 get요청을 보내고 못받고 있는건가요? 서버 콘솔에는 데이터가 이쁘게 잘 나오는데...
이건 서버쪽 소스에요
res.send(db.collection('post').find().toArray(function(err,res){
console.log(res); })); -
글쓴이글
- 답변은 로그인 후 가능합니다.