230330(목)

import * as express from 'express';
import * as bodyParser from 'body-parser'; // 요청에 대한 body를 파싱하는 역할
import * as dotenv from 'dotenv'; // .env 파일을 통해 보안상 가려야할 데이터를 따로 둔다.
import * as cors from 'cors'; // CORS 에러를 해결하기 위함
import * as mongoDb from 'mongodb'; // mongodb와 연결!

dotenv.config(); // 이제 아래에서 process.env로 어떤 값들을 가져올 수 있다.(숨길 수 있다.)

async function main() {
  const MongoClient = mongoDb.MongoClient;
  const client = new MongoClient(
      `mongodb+srv://${process.env.MONGO_USER_NAME}:${process.env.MONGO_PASSWORD}@${process.env.MONGO_CLUSTER_NAME}.jy2zpck.mongodb.net/?retryWrites=true&w=majority`,
  );
  await client.connect();
  const db = client.db('data-base-name');

  const app = express();
  app.use(bodyParser.urlencoded({ extended: true }));
  app.use(cors());

  app.listen(process.env.PORT, () => {
    console.log('listening on 1116');
  });

  app.get('/top10', (req, res) => {
    res.json('테스트 문자열');
  });

  app.get('/search', async (req, res) => {
    const query = req.query.q; // 요청의 query string에 담겨있는 값을 받아온다.
    const collection = db.collection('product');
    const result = await collection
        .find({ keywords: { $regex: `${query}`, $options: 'i' } })
        .toArray();
    if (result.length === 0) {
      res.json([{ keywords: '해당하는 상품이 없습니다.' }]);
    } else {
      res.json(result);
    }
  });
}

main();

export const debounce = (callback: (e: Event) => void, delay: number) => {
  let timerId: ReturnType<typeof setTimeout>;
  return (event: Event) => {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event);
  };
};

// 활용 예시
this.setEventListener(
    'click',
    debounce(() => {
      this.searchListComponent.deleteAllChild();
      if (this.searchListComponent.element.style.display !== 'flex') {
        this.searchListComponent.show();
        dimLayer.on();
      }

      fetch('http://localhost:1116/search?q=')
          .then((res) => res.json())
          .then((data) =>
              data.slice(0, 10).forEach((d: ProductData) => {
                this.searchListComponent.addChildHtml(`<li>${d.keywords}</li>`);
              }),
          );
    }, 300),
);