리액트 _6_mongodb연결하기

1. 새 프로젝트 만들기- this window를 누른다.

2.  포트가 충돌했을 때 방어를 해주는 크로스 도메인을 설치한다.

이 코드가 포트 충돌을 막는 코드다.

 

3. package.json 에다가 

"request"랑 "express"랑 "mongodb"랑 서버를 연결할 때 쓰는 "axios"를 설치한다.

"path"도 깔고 "react-router-dom": "^5.2.0","react-router": "^5.2.0"도 설치한다.

xml을 json으로 바꿔주는 "xml2js"도 깔아준다.

저장하고 install 해주어야한다. 

4. movie-server 라는 js 파일을 만든다

5. 서버 js를 구성해준다. 

const express=require("express")
//express는 간단한 서버를 제작할 때 사용
const request=require("request")
//request는 다른 사이트 서버를 연결해서 데이터 읽는 역할을 한다.
const app=express();
//서버 생성
const port=3355;
//서버 포트번호는 0~65535 중에 하나를 선택해야 한다. (0~1023은 이미 사용중)
app.all('/*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    next();
});
//포트 충돌 방지 코드
//서버 대기중: .listen()
app.listen(port,()=>{
    console.log("Server Start...","http://localhost:3355")
})
//경로명 가져오기: .get
app.get("/",(request,response)=>{
    response.send("Hello Node Server!!")
})

서버스타트가 나오면 정상작동하는 것.

 

6. mongodb 연결을 위한 세팅을 해준다.

7. 아래부분에 몽고디비를 연결하는 것을 쓴다.

     * 특징*

    몽고디비 =>NoSQL
    find() => select * from movie 의미
    find({mno:1}) => select * from movie where mno=1 의미

// mongodb 연결
const Client=require("mongodb").MongoClient

// Client/movie라고 하면 아래 코드를 실행한다.
app.get("/movie",(request,response)=>{
    //url : mongodb 주소
    var url="mongodb://211.238.142.181:27017"
    Client.connect(url,(err,client)=>{
            var db = client.db("mydb");
             //db.collection("movie").find({}) => movie에 있는 모든 것을 뽑는다(조건이 없음)
             //db.collection("movie").find({cateno:1}) 이걸로 하면 cateno가 1번인 애들만 뽑는 것
             //한블록이 낱개로 되어있기 때문에 목록을 보기위해 toarray를 써서 뽑아야한다. 
             //db.collection("movie").find({cateno:1}).toArray()
             db.collection("movie").find({cateno:1}).toArray(function (err,docs) {//=> docs에 값이 배열로 묶인 것이다
            	//response.send() .send는 일반 문자 보낼 때 사용
                 response.json(docs)
                client.close();
            })
    })
})

8. terminal에 다시 node movie-server 를 해본다

9. 파란색 링크를 선택하면 화면이 나오는데 뒤에 /movie를 넣으면 값이 적힌 화면이 나온다. 성공한 것