[DSC] 웹플랫폼 4주차 정리

참고 자료: [DSC] Node.js + React를 통한 웹플랫폼 제작기 - 4주차

간단한 프론트엔드 작업 후

Promise/Then 과 async await

둘 다 비동기처리를 위해 고안 된 것.

예전에는 콜백함수를 사용해서 비동기처리를 했는데 콜백 함수가 많아진다면 가독성이 뚝 떨어져버린다. 협업을 할 때 뿐만 아니라 자기 자신마저 알아보기 힘든 코드가 되어버릴지도 모른다.

그래서 고안 된 것이 Promise 이다.
Promise는 es6에 고안된 비동기처리를 위한 객체이다.

function printText(text){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(text);
            resolve(text);
        },1000);
    });
}

다음과 같이 만들 수 있으며 resolve에 넣어준 값을 then에서 받아 사용할 수 있다. 예를 들어

printText("ZZZ")
 .then(prev => console.log(prev))
 .catch(err => console.error(err));

이런 식으로 사용할 수 있다.

async await는 es8에 추가된 문법이다.
async를 함수에 붙여주면 된다. 그리고 Promise를 반환 하는 함수를 await로 기다리게하면 된다.

function printText(text){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log(text);
            resolve();
        },1000);
    });
}

async function printAllText(){
  await printText("만나서");
  await printText("반가워요");
  await printText("어떠신가요 다들");
}

이런 비동기처리를 해결하는 방법들을 사용한다고 해서 동기가 되는 것이 아니다. 그러면 await는 어떻게 이해를 해야 하는걸까 생각해보았는데 그냥 promise의 결과 값을 then이 콜백함수로 받을 수 있는 것처럼 await이 그 역할을 한다고 생각했다. 그래서 그 밑에는 then 안에 있는 로직이구나라고 이해했다. reject에 대해서는 try catch문을 사용해서 처리하면 된다.

promise then의 경우에 너무 많이 사용하면 이것 또한 promise 지옥에 빠질 수 있으니 async await을 잘 사용해보자!!

mongoose와 ODM 이란?

NOSQL은 SQL을 사용하지 않는다. 그렇지만 원하는 데이터를 가져오기 위해서 명령어를 사용해서 데이터를 입/출력을 해야하는 것은 마찬가지이다.
ODM은 js 코드로 NOSQL DB에 접근하도록 도와준다. Mongoose는 js에서 MongoDB를 관리해주는 ODM 라이브러리이다.

Mongoose는 다음과 같은 명령어로 설치할 수 있다.

npm install mongoose

model/index.js

const mongoose = require("mongoose");

try {
  mongoose.connect(
    "mongodb+srv://여러분의 몽고디비 주소를 입력하세요!",
    { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true }
  );
}catch(error){
    console.log("DB Connection Error", error);
}

const db = mongoose.connection;
db.on('error',()=>console.log("mognoose error!"));
db.once('open',()=>{
    console.log("DB Connection Success!");
});

module.exports = db;

password 부분은 자신이 설정한 password로 잘 바꿔주어야한다.

const mongoose = require('./model'); // <= 이 부분을 추가 시킵니다.

이렇게 해주고 난 후 npm start를 해주면 db연결이 되는 것을 볼 수 있다.

Bitly 데이터 모델 규정

짧은 URL을 입력했을 때 긴 URL로 매핑을 해주어야 한다.

MongoDB에서 데이터 구조를 정의하는 것을 Schema를 정의한다고 한다.

model/url.js

const mongoose = require("mongoose");

const {Schema} = mongoose;

const url = new Schema({
    shortUrl :{
        type : String,
        unique : true,
    },
    longUrl : {
        type : String,
        required : true,
    }
},{
    versionKey: false
});

module.exports = mongoose.model('url',url);

위를 간단히 설명하면 url Schema는 shortUrl은 중복을 허용하지 않는다., longUrl은 중복은 괜찮지만 필 수 요소다. 이런식이다.