edit 페이지 and check 페이지 이동 시 속도 개선

[robinyoon-dev]

Description

#50 이걸 참고하여 문제를 해결해보자.

Todo

• 기본적인 리팩토링
• 문서화

참고자료

https://ko.legacy.reactjs.org/docs/context.html
https://react.vlpt.us/basic/22-context-dispatch.html

[robinyoon-dev]

생각하기

"MongoClient.connect() 정보를 ContextAPI를 사용해서 앱 전체에서 사용할 수 없을까?"

=> 결론: 사용할 수 없다.
나는 client 정보를 api 파일에서만 쓴다. 즉 나는 서버사이드에서만 사용하는데 ContextAPI는 클라이언트 사이드에서 쓰는 거니까...

[robinyoon-dev]

console.log(cachedDb); 결과

type of cachedDb: object

-----cachedDb-----
Db {
  s: {
    client: MongoClient {
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      mongoLogger: [MongoLogger],
      s: [Object],
      topology: [Topology],
      [Symbol(kCapture)]: false,
      [Symbol(options)]: [Object: null prototype]
    },
    options: {
      enableUtf8Validation: true,
      forceServerObjectId: false,
      logger: [Logger],
      pkFactory: [Object],
      raw: false,
      readPreference: [ReadPreference],
      retryWrites: true,
      writeConcern: [WriteConcern]
    },
    logger: Logger { className: 'Db' },
    readPreference: ReadPreference {
      mode: 'primary',
      tags: undefined,
      hedge: undefined,
      maxStalenessSeconds: undefined,
      minWireVersion: undefined
    },
    bsonOptions: {
      raw: false,
      promoteLongs: true,
      promoteValues: true,
      promoteBuffers: false,
      ignoreUndefined: false,
      bsonRegExp: false,
      serializeFunctions: false,
      fieldsAsRaw: {},
      enableUtf8Validation: true
    },
    pkFactory: { createPk: [Function: createPk] },
    readConcern: undefined,
    writeConcern: WriteConcern { w: 'majority' },
    namespace: MongoDBNamespace { db: 'boards', collection: undefined }
  }
}

[robinyoon-dev]

현재 코드

api/edit-board.js

import { MongoClient, ObjectId } from "mongodb";
import config from "@/config/mongo.config";
// /api/edit-board
// POST /api/edit-board

async function handler(req, res) {
  if (req.method === "POST") {
    const data = req.body;
    const client = await MongoClient.connect(config.mongoClient);
    const db = client.db();

    const boardsCollection = db.collection("boards");

    const result = await boardsCollection.updateOne(
      { _id: ObjectId(data.id) },
      {
        $set: {
          title: data.title,
          bgColor: data.bgColor,
          cubeColor: data.cubeColor,
          value1: [
            data.value1.text,
            data.value1.isChecked,
            data.value1.isModifiedThisTime,
          ],
          value2: [
            data.value2.text,
            data.value2.isChecked,
            data.value2.isModifiedThisTime,
          ],
          value3: [
            data.value3.text,
            data.value3.isChecked,
            data.value3.isModifiedThisTime,
          ],
          value4: [
            data.value4.text,
            data.value4.isChecked,
            data.value4.isModifiedThisTime,
          ],
          value5: [
            data.value5.text,
            data.value5.isChecked,
            data.value5.isModifiedThisTime,
          ],
          value6: [
            data.value6.text,
            data.value6.isChecked,
            data.value6.isModifiedThisTime,
          ],
          value7: [
            data.value7.text,
            data.value7.isChecked,
            data.value7.isModifiedThisTime,
          ],
          value8: [
            data.value8.text,
            data.value8.isChecked,
            data.value8.isModifiedThisTime,
          ],
          value9: [
            data.value9.text,
            data.value9.isChecked,
            data.value9.isModifiedThisTime,
          ],
        },
      }
    );

    console.log("result");
    console.log(result);

    client.close();

    res.status(201).json({ message: "Board updated!" });
  }
}

export default handler;

api/load-shared.js

import { MongoClient, ObjectId } from "mongodb";
import config from "@/config/mongo.config";
async function handler(req, res) {
  const fromLinkId = req.query.id;

  const client = await MongoClient.connect(config.mongoClient);
  const db = client.db();

  const boardsCollection = db.collection("boards");

  const board = await boardsCollection.findOne({ _id: ObjectId(fromLinkId) });

  const usersCollection = db.collection("users");
  const user = await usersCollection.findOne({ email: board.user });

  client.close();

  res.status(201).json({
    nickname: user.nickname,
    id: fromLinkId.toString(),
    user: board.user,
    main: board.main,
    title: board.title,
    value1: board.value1,
    value2: board.value2,
    value3: board.value3,
    value4: board.value4,
    value5: board.value5,
    value6: board.value6,
    value7: board.value7,
    value8: board.value8,
    value9: board.value9,
    bgColor: board.bgColor,
    cubeColor: board.cubeColor,
    bingoCount: board.bingoCount,
    patternArray: board.patternArray,
  });
}

export default handler;

check/index.js의 일부
```javascript
export async function getServerSideProps(context) {
  let loginData = JSON.parse(context.query.routerLoginData);
  // fetch data from an API
  const client = await MongoClient.connect(config.mongoClient);
  const db = client.db();

  const boardsCollection = db.collection("boards");

  const mainBoard = await boardsCollection.findOne({
    user: loginData.email,
    main: true,
  });

  client.close();

  return {
    props: {
      mainBoardData: {
        id: mainBoard._id.toString(),
        user: mainBoard.user,
        main: mainBoard.main,
        title: mainBoard.title,
        value1: mainBoard.value1,
        value2: mainBoard.value2,
        value3: mainBoard.value3,
        value4: mainBoard.value4,
        value5: mainBoard.value5,
        value6: mainBoard.value6,
        value7: mainBoard.value7,
        value8: mainBoard.value8,
        value9: mainBoard.value9,
        bgColor: mainBoard.bgColor,
        cubeColor: mainBoard.cubeColor,
        bingoCount: mainBoard.bingoCount,
        patternArray: mainBoard.patternArray,
      },
    },
  };
}