2024.01.30

멋사 웹 프로젝트 회의를 진행했다. 

아직까지는 순조롭게 진행되고 있다. 

대표님께서 github actions를 이용해 CI/CD pipeline을 구축해보라 하셨다. 

이와 관련해 지식이 전무하기에(...) 일단 시도해보겠다고 말을 했다. 

금요일까지 과연 할 수 있을지 걱정이다. 

 

 

---

name: Build on PR to main

on:
  pull_request:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '14'

    - name: Install dependencies
      run: npm install

    - name: Build
      run: npm run build

 

GPT의 도움으로 main 브랜치에 PR 시 자동으로 빌드해주는 workflow를 작성했다. 

on: 부분은 이 workflow를 trigger 할 작업을 정의해준다. 

job은 step들이 모여 이루는 하나의 작업이고, 

최신 ubuntu 환경에서 동작한다. 

repository의 코드를 가져와서 node.js를 세팅하고(version 20을 사용하고 있어서 이 부분은 수정했다)

의존성 패키지들을 설치한 뒤 빌드한다. 

생각외로 그리 어렵지는 않다. 

 

시험삼아 PR을 넣어봤는데 사용되지 않는 변수가 있다는 오류가 생겨 빌드가 이루어지지는 않았다. 

각자 맡은 파트의 작업이 완료되면 다시 시도해보는 편이 좋을 것이다. 

 

---

어제 진행하던 크롤링 프로젝트는..

망했다. 

망해버리고 말았다. 

 

 

농담이고, 망하지는 않았다.

로그인 관련 코드를 전부 작성 완료하고 크롤링 코드를 작성중이었는데 자꾸 오류가 생겼다. 

import * as cheerio from "cheerio";
import axios from "axios";
import { useEffect } from "react";

const HomeCrawler = () => {
  const crawl = async () => {
    const url = "https://cse.yu.ac.kr/main/intro/yu-news.do";
    await axios.get(url).then((res) => {
      let crawled = [];
      const html = res.data;
      const $ = cheerio.load(html);
      const $itemlist = $("tbody".find("tr"));

      $itemlist.each((i) => {
        crawled[i] = {
          title: $(this)
            .find("tr > .b-td-left > .b-title-box > a > span")
            .text(),
          link: $(this).find("tr > .b-td-left > .b-title-box > a").attr("href"),
        };
      });
      console.log($("body").html());
    });
  };

  useEffect(() => {
    crawl();
  });

  return (
    <>
      <h1>hello</h1>
    </>
  );
};

export default HomeCrawler;

 

코드상으로는 전혀 문제가 없지만.. 

전혀 다른 곳에 치명적인 문제가 있었다. 

클라이언트가 다른 URL로 request를 보내면 CORS 오류가 발생한다는 사실을 잊고있었다.

결국 서버측에서 크롤링을 해줘야한다. 

백엔드 코드 없이 프로젝트를 진행하기 위해서 firebase를 학습했는데, 내가 하고자 하는 일은 백엔드 코드가 필수적이라니...?

말도안되는 실수에 조금 허탈했다. 

 

하지만 방법을 찾았다. 

node.js로 간단한 api를 만들고 firebase로 배포한 후 client에서 그 api를 사용하는 것이다.

인증, database 등과 같은 기능들은 firebase를 사용하되 크롤링 관련 기능들은 모두 node.js를 사용하는 것이다. 

프로젝트를 두 번 배포해야하는 단점이 있지만 이것이 최선인 듯 하다. 

게다가 node.js를 사용해본 적 없어서 원활한 사용은 어렵겠지만.. 야매로 어떻게든 해보자. 

ui부터 구축하고 나중에 node.js 코드를 작성해야겠다.