TIL(Today I Learned) 5

2차 프로젝트 - 합동 오피스 아워

• 크롤링을 활용한 실시간 상태 업데이트는 다소 무리(대량의 데이터 트래픽과 잦은 서버 통신)
• 위의 이유로 인하여 open API를 제공하는 업체가 있다면 이를 최대한 활용하는 것이 모든 면에서 유리
• 지도 API를 사용하여서 마커를 찍을 때도 사이징에 따른 데이터 처리 방안도 심도 있게 고민 해볼 것
• 프론트는 공통 컴포넌트 생성(빌딩 블록 쌓기) - 레이아웃 구성 - 기능 구현의 작업 순서를 지님
• next.js, redux-recoil은 기본 소양!

크롤링(Crawling)

진행중인 2차 프로젝트에서 원하는 데이터를 얻고자 크롤링 기술을 활용하려 한다.
코치님들과의 피드백을 통해 실시간으로 상태를 업데이트 해주어야 하는 부분을 제외하고서 새로운 기획으로 서비스의 목적이 바뀌었다.
학부생 때, 토이 프로젝트에서 파이썬과 selenium 라이브러리 등을 활용하여 크롤링을 통해 자동 데이터 정리 프로그램을 만들었던 경험이 있다.
자바스크립트에서도 마찬가지로 selenium 라이브러리를 활용할 수 있었고 그 사용법 또한 크게 다르지 않았다.
다만, React를 사용하는 프론트 단에서는 해당 라이브러리를 제공하지 않아 selenium의 사용을 원한다면 반드시, 서버 측에서 해당 작업을 수행하여야 한다.

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

async function getMatchScheduleItems() {
  const options = new chrome.Options();
  options.addArguments('--headless'); // 브라우저를 헤드리스 모드로 실행하려면 주석을 제거하세요.

  const driver = new webdriver.Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    await driver.get('원하는 곳 url');

    await driver.wait(webdriver.until.elementLocated(webdriver.By.css('.list--match-schedule--item')), 5000);

    const scheduleItems = await driver.executeScript(() => {
      const items = document.querySelectorAll('.list--match-schedule--item');
      return Array.from(items)
        .slice(0, 10)
        .map(item => item.textContent.trim());
    });

    return scheduleItems;
  } finally {
    await driver.quit();
  }
}

getMatchScheduleItems()
  .then(scheduleItems => {
    console.log('Match Schedule Items:');
    console.log(scheduleItems);
  })
  .catch(error => {
    console.error('Error:', error);
  });

이와 같은 짧은 코드만으로도 원하는 url에서 원하는 만큼의 데이터를 가져올 수 있는 기능을 자동화 시킬 수 있다.
이 부분이 프로그래밍의 진 면목이 아닐까 한다.

사람이 하기 힘들고 귀찮은 업무의 자동화

극강의 귀차니즘으로 짧은 코드로도 자동화를 잘 할 수 있는 개발자가 되고싶다^^