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

home2 게시판 React 게시판 react환경에서 DB 데이터 가져오기 관련

react환경에서 DB 데이터 가져오기 관련

7 글 보임 - 1 에서 7 까지 (총 7 중에서)
  • 글쓴이
  • #34087

    강의현
    참가자

    현재 게시판 기능 구현 중 질문이 생겨 글 올립니다.

    작성한 게시글을 DB에 저장하고 게시판 화면에 게시글 목록을 보여주는 단계입니다.

    문제는 DB에서 찾은 게시글 정보를 react 페이지로 어떻게 보내는지 모르겠습니다.

    find.toArray 함수로 데이터를 찾고 찾은 '결과'를 보내려면 어떤 코드를 써야하나요?

    원래는 응답.send({posts : 결과}) posts라는 이름으로 찾은 결과를 보내려고 했지만 보냈을 때 제대로 된 데이터가 나오지 않습니다.

    DB에서 찾은 데이터를 리액트 페이지로 보내는 코드 알려주시면 감사하겠습니다.

     

     

    #34168

    codingapple
    키 마스터

    응답.json() 안에 array아니면 object 넣으면 전송가능합니다 

    #34240

    강의현
    참가자

    말씀하신대로 응답.send가 아닌 응답.json()함수 활용해서 결과를 console로 찍으니 위와 같은 결과가 나옵니다.

    게시물 작성후 확인버튼을 누르면 받아온 데이터를 어레이형식으로 postTitle이라는 함수에 넣고 이를 map으로 돌려 list형식으로 보여주고싶은데 프론트에서 받아온 데이터를 어레이 형식으로 보여줄려면 어떻게 해야하나요?

    그리고 제가 받아온 콘솔창에 뜨는 저 데이터가 제대로 가져온 데이터인지도 궁금합니다.

    #34254

    codingapple
    키 마스터

    서버상단에

    app.use(express.json());

    var cors = require('cors')
    app.use(cors());

    이것도 추가합시다 서버에서 보낸게 html이면 뭔가 이상한겁니다

    #34306

    강의현
    참가자

    추가해도 여전히 똑같습니다.

    리액트 페이지에서 axios했을 때 처리는 잘되는데 server에서 DB에서 가져온 값을 콘솔로 찍어도 아무런 결과가 나타나질 않습니다. 

    서버 코드에 문제가 있는거같은데 한번 확인해주실 수 있을까요??

    const express = require('express');
    const path = require('path');
    const app = express();

    const http = require('http').createServer(app);
    http.listen(3000, function () {
    console.log('listening on 3000')
    });

    const MongoClient = require('mongodb').MongoClient;
    const bcrypt = require('bcrypt');
    const saltRounds = 10;

    app.use(express.json());
    var cors = require('cors')
    app.use(cors());

    MongoClient.connect('mongodb+srv://kangeuihyeon:dmlgus1127!@cluster0.4huto.mongodb.net/myFirstDatabase?retryWrites=true&w=majority', function(에러, client){
    if (에러) return console.log(에러);
    db = client.db('monkeytan');

    })

    app.use(express.static(path.join(__dirname, 'build')));

    app.get('/', function (요청, 응답) {
    응답.sendFile(path.join(__dirname, '/build/index.html'));
    });

    app.get('*', function (요청, 응답) {
    응답.sendFile(path.join(__dirname, '/build/index.html'));
    });

    app.post('/userinfo',function(요청, 응답){
    bcrypt.hash(요청.body.pw, saltRounds, function(err, hash) {
    db.collection('userinfo').insertOne( { id : 요청.body.id, pw : hash, name : 요청.body.name, phonenumber : 요청.body.phonenumber, email : 요청.body.email} , function(){
    응답.send('전송완료')
    });
    });
    });

    app.post('/post', function(요청, 응답){
    db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content}, function(){
    응답.send('전송완료')
    })
    })

    app.get('/post',function(요청,응답){
    db.collection('post').find().toArray(function(에러, 결과){
    if (에러){
    console.log(에러)
    } else {
    console.log(결과)
    응답.json(결과)
    }
     
    })
    })

    const passport = require('passport');
    const LocalStrategy = require('passport-local').Strategy;
    const session = require('express-session');

    app.use(session({secret : '비밀코드', resave : true, saveUninitialized: false}));
    app.use(passport.initialize());
    app.use(passport.session());

    app.post('/login', passport.authenticate('local', {failureRedirect : '/fail'}), function(요청, 응답){
    응답.redirect('/')
    });

    // app.get('/mypage', 로그인했니, function (요청, 응답) {
    // console.log(요청.user);
    // 응답.send('마이페이지 접속 성공')
    // })

    // function 로그인했니(요청, 응답, next) {
    // if (요청.user) {
    // next()
    // }
    // else {
    // 응답.send('로그인안하셨는데요?')
    // }
    // }

    // 이하 코드는 '/login'경로로 로그인 요청할 때만 실행되는 검증 코드
    passport.use(new LocalStrategy({
    usernameField: 'id',
    passwordField: 'pw',
    session: true,
    passReqToCallback: false,
    }, function (입력한아이디, 입력한비번, done) {
    console.log(입력한아이디, 입력한비번);
    db.collection('userinfo').findOne({ id: 입력한아이디 }, function (에러, 결과) {
    console.log(결과)
    if (에러) return done(에러)

    if (!결과) return done(null, false, { message: '존재하지않는 아이디요' })
    // 이하는 입력한비번과 결과.pw 모두 암호화된 상태에서 비교하는 문법
    bcrypt.compare(입력한비번, 결과.pw, function (에러, isMatch) {
    if (isMatch) {
    return done(null, 결과)
     
    } else {
    return done(null, false, { message: '비번틀렸어요' })
    }
    })
    })
    }));

    // 세션데이터 만들어 저장하는 코드(로그인 성공시 발동, 세션이 있어야 로그인 후 페이지 이용 가능)
    passport.serializeUser(function (user, done) {
    done(null, user.id)
    });

    passport.deserializeUser(function (아이디, done) {
    db.collection('userinfo').findOne({ id: 아이디 }, function (에러, 결과) {
    done(null, 결과)
    })
    });

     

    *참고로 주석처리 된 부분은 세션 생성 시 에러가 있어 잠시 미루기 위해 처리했습니다.

    #34308

    강의현
    참가자

    다른 글을 읽던 도중 app.get('*',  부분을 더 밑으로 옮기니 데이터를 잘 받아옵니다.

     

    *을 두는 건 라우트할 때 자유롭게 경로 설정을 하는 용도로 알고 있는데 이게 이문제라 무슨 연관이 있는지 설명해주실 수 있나요? 

    #34331

    codingapple
    키 마스터

    get요청들어왔을 때 서버에 있는 라우트중에 여러개가 일치하면 가장위의 것을 적용해줍니다 

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

About

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

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

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