🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

Node.js, express 서버 리팩토링

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();

위와 같은 흐름이 더 mongoDB와의 연결 및 express를 통한 서버를 띄우기의 흐름이 보이는 것 같아 수정하였다.

• MongoClient와 mongoDB url을 통해 client 객체를 만들어 준다.
• client 객체의 connect() 메서드로 연결해준다.
• client의 db 메서드를 통해 만들어놓은 database 이름을 문자열로 전달한다.
• 이제 이 db 객체에서 필요할 때마다 collection으로 접근하여 서버 api 로직과 함께 사용하면 된다.
  • 이 때, mongoDB에서 collection은 SQL의 테이블 하나와 같다고 생각하면 된다.

디바운스(Debounce)

• 이벤트를 그룹으로 묶고 특정시간이 지난 후, 마지막 하나의 이벤트만 발생하도록 하는 방법
• setTimeout과 clearTimeout으로 구현해볼 수 있다.

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),
);

• debounce를 이용하여 계속 되는 click 이벤트에 따른 fetch 발생을 마지막 1번만 발생하게 해주었다.

🍀 오늘의 고민 키워드

api 로직

서버 개발자는 아니지만, 좀더 복잡한 api 로직은 만들고 처리하는지 궁금하다. 내가 만든 api처럼 저렇게 간단하지는 않을 거 같은데..!

📝 요약 및 하루 간단 회고

어제까지만 해도 괜히 서버 띄우는 것도 해보겠다고 무리했나 싶었지만, 이렇게 직접 서버를 띄우고 api를 만들어서 요청에 대한 응답을 처리해보니 너무 재미있고 전체적인 흐름을 이해하는데 도움이 된 것 같다. 아직 UI쪽 구현이 미흡하고 받아온 응답 데이터를 어떻게 좀더 잘 가공할지가 고민이긴하지만..!

오늘의 잘한 점

• 간단한 api를 만들고 원하는 response를 전달한 것
• 디바운스를 통해 계속되는 이벤트를 막고 서버에 부하가 걸리지 않게 처리한점

오늘의 아쉬운 점

• 개발 속도가 빠르지 못한 것 같다.
• 앞으로 코드를 짤 때는 머릿속에 명확한 설계를 갖고 임해야겠다는 생각이 든다.

참고

• 강의
• express 공식문서

undefined