Leetcode To Blogpost : 리트코드 문제를 블로그 글로 바꾸기

요약

• 📙 프로젝트명 : Leetcode To Blogpost
• ⚙️ 주요 기능 : 리트코드의 문제를 블로그 포스트로 올릴 HTML 문서로 변환함
• 🚩 목적 : 블로그 글 작성을 쉽게 하기 위해
• 📆 제작 기한 : 2024년 7월 23일 ~ 7월 24일 (2일간)
• 🛠️ 사용 툴 : HTML, CSS, JavaScript
• 🔗 GitHub 링크 : https://github.com/dobbyjang0/LeetcodeToBlogpost

 

만들게 된 계기

'🖥️ 문제 풀이/리트코드(Leetcode)' 카테고리의 글 목록

LeetCode의 문제를 풀면서 블로그에 해법을 쓰고 있었는데, 문제를 옮기는데 시간이 너무 오래 걸렸었다. 따라서 문제 내용을 가져와 블로그 글을 쓰기 쉽게 해주는 프로그램이 필요했다.

 

기능설명

문제 제목 코드를 입력하면 다음과 같이 블로그 글 제목과 내용을 만들어준다,

배웠던 점

Leetcode GraphQL

import { request, gql } from "graphql-request";

const LEETCODE_URL = "https://leetcode.com/graphql/";

async function getQuestionInfo(titleSlug) {
  const query = gql`
    query questionTitle($titleSlug: String!) {
      question(titleSlug: $titleSlug) {
        questionFrontendId
        title
        difficulty
        content
      }
    }
  `;

  const variables = {
    titleSlug,
  };

  try {
    const data = await request(LEETCODE_URL, query, variables);
    const { questionFrontendId, title, difficulty, content } = data.question;

    return {
      id: +questionFrontendId,
      title,
      difficulty,
      contentRaw: content,
    };
  } catch (error) {
    console.error(`Error fetching problem slug: ${error}`);
  }
}

 Cheerio 모듈로 웹페이지를 파싱하는 대신, leetcode GraphQL을 https://github.com/akarsh1995/leetcode-graphql-queries에 나온대로 사용하여 문제정보를 가져와봤다. 파싱처럼 웹사이트 구조에 대해 고민하지 않고 필요한 부분만 한번에 다 불러올 수 있어서 좋았다. 또 이렇게 하면 파싱보다 더 오가는 데이터가 적어 경제적일 것이다. postman에 json 형태로 import하는 것도 해보고 graphql-request라는 모듈도 이용해보았다.

 

구글 번역 API

import dotenv from "dotenv";
import axios from "axios";

const TRANSLATE_API_URL =
  "https://translation.googleapis.com/language/translate/v2";
dotenv.config();

async function translateText(text) {
  try {
    const response = await axios.post(
      TRANSLATE_API_URL,
      {},
      {
        params: {
          q: text,
          target: "ko",
          key: process.env.GOOGLE_TRANSLATE_API_KEY,
        },
      }
    );
    const { translatedText } = response.data.data.translations[0];
    return translatedText;
  } catch (error) {
    console.error("Error during translation:", error);
    throw error;
  }
}

 구글 번역 API를 이용해보았다. Google Cloud에 등록 후 API 키를 받고 POST를 보내 번역 결과를 받았다. json 파일 형태의 서비스 계정 key를 만들고 '@google-cloud/translate' 모듈을 이용하는 방법은 basic(v2) 기능만 이용할 것이라 필요없다 판단하여 하지 않았다.

 

정규식 또 정규식

Cheerio 모듈로 html 문서를 읽는 대신 정규식으로 필요한 정보를 뽑고 가공을 하였다. 구조가 Cheerio 모듈로 dom tree를 만들어 다루기보단 그냥 뽑는게 더 편해보여서였다.

 

readline 모듈

import * as readline from 'node:readline/promises'
import { stdin as input, stdout as output } from 'node:process'

async function inputTitle() {
    const rl = readline.createInterface({ input, output })
    const titleSlug = await rl.question('leetcode 타이틀명 :')
    rl.close();

    return titleSlug
}

 

readline 모듈을 promise 형태로 이용하는 방법을 해보았다. 이쪽이 기존 방식보다 훨씬 더 편했다.

 

추후에 추가하고픈 내용

• 사용하기 편하도록 웹페이지로 만들기? 복사버튼 만들기?
• 번호로 탐색 넣기?
• api 사용 가능한 블로그로 옮겨서 작성하기?