• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 Node.js, Express 게시판 HTML에 DB데이터 꽂아 넣는법

HTML에 DB데이터 꽂아 넣는법

10 글 보임 - 1 에서 10 까지 (총 15 중에서)
  • 글쓴이
  • #5942

    김민성
    참가자

    리엑트로 개발했는데요 

    현재 리액트 소스는 <Card.Title>제목</Card.Title> 이렇고,

    데이터 베이스에는 제목이 저장되어있는 상태인데

    강의에서는 render함수를 쓰더라고요 인자에는 html파일이름이랑 변수이름 할당해서 쓰는 방식인거같은데

    리액트는 변수를 어떻게 넘겨야 하죠? 즉, 제목 저 부분에 어떤 변수를 써야합니까? 

    #5943

    codingapple
    키 마스터

    express + ejs 만으로 개발할 땐 "특정 페이지 방문시 DB에 있는데이터를 뽑아서 그걸 ejs파일에 꽂은 다음 고객에게 보내라"라고 코드를 짰습니다. 

    하지만 리액트를 사용하신다면 "특정페이지 방문시~" 부터 구현할 수 없습니다. 페이지가 index.html 하나니까요. 

    (리액트 라우터 쓴다고해도 그건 새로운 html 페이지가 아닙니다)

     

    그래서 리액트에서

    1. 제목 컴포넌트가 등장시

    2. 서버로 ajax 요청을 해서 DB에 있는 게시물 제목들을 뽑아옴 (이걸 처리하는 서버 API기능개발이 먼저 필요하겠군요)

    3. 받아온 제목들을 state로 저장하든 어디 저장하든 함

    4. 그 state를 HTML에 잘 꽂아놓으면 알아서 바뀜

     

    이렇게 ajax 요청으로 개발합니다. 

    #5945

    김민성
    참가자

    axios를 사용하고 싶은데 그럼 axios.get("???") 을 써야하는데 저 url에는 어떤걸 넣어야 하죠? 제 몽고디비관련된 뭔가를 넣어야될거같은데....모르겠네용

    #5947

    codingapple
    키 마스터

    서버에다가 

    어떤놈이 /title 로 get 요청하면 db에있는 데이터 뽑아서 send 해줘라 라고 코드를 짜놓으면 됩니다 

    그다음에 리액트에서

    axios.get('서버주소/title') 이렇게하면 될듯요

    #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'));
    });

    이렇게 라우팅해둔 소스가 있는데 이게 온거같기도하고 왜 이런거죠?

     

    #5960

    김민성
    참가자

    대충 어찌어찌해서 데이터가 오는거같은데 데이터가 텅텅 비어있네요.

    서버쪽 콘솔에는 잘 찍히는데 리엑트에서 못받고 있나봐요.

    useEffect(()=>{
    axios.get('/title').then((res)=>{console.log("성공"+res.data)}).catch(()=>{console.log("실패")});
    })

    res.data가 null 이라 그런지 성공만 계속 찍히고 있는 상황이에요

    #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이 보내지고 있는 상황 아닌가요? 

    아  너무 어렵네요 ㅜ 

    #5965

    codingapple
    키 마스터

    /title 그걸 * 보다 위쪽으로옮겨봅시다

    #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); }));

    #5967

    김민성
    참가자

    아 프록시 에러인거같아요 해결해 볼게요

10 글 보임 - 1 에서 10 까지 (총 15 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠