깃허브에 json올려서 직접 호스팅

    
JSON 파일이 너무 커서 클라우드 플레어 페이지에 안올라가서 깃허브에 따로 올려서 그 페이지를 fetch해와서 썼다.

1. **GitHub에 파일 업로드**:
    - GitHub 저장소를 생성하거나 기존 저장소를 사용합니다.
    - `public/database` 디렉토리에 `dictionary_db.json` 파일을 업로드합니다.

2. **GitHub에서 파일의 Raw URL 가져오기**:
    - 파일을 업로드한 후, 해당 파일의 Raw URL을 가져옵니다. 예를 들어, `https://github.com/USERNAME/REPOSITORY/raw/BRANCH/public/database/dictionary_db.json`와 같은 URL이 됩니다.

3. **코드 수정**:
    - fetch 요청을 GitHub의 Raw URL로 변경합니다.

다음은 GitHub에 파일을 업로드하고 코드를 수정하는 과정입니다.

### 1. GitHub에 파일 업로드
- GitHub 저장소에 `public/database` 디렉토리를 생성합니다.
- `dictionary_db.json` 파일을 해당 디렉토리에 업로드합니다.

### 2. GitHub에서 Raw URL 가져오기
- 파일을 업로드한 후, 파일을 클릭하여 GitHub에서 파일을 엽니다.
- 파일 내용이 표시되는 페이지에서 `Raw` 버튼을 클릭하여 파일의 Raw URL을 가져옵니다.
  - 예시 URL: `https://github.com/USERNAME/REPOSITORY/raw/BRANCH/public/database/dictionary_db.json`

### 3. 코드 수정
```javascript
import "./App.css";
import React, { useEffect, useState } from "react";

function createBlankWordObject(word) {
  return {
    word,
    meanings: [
      {
        partOfSpeech: "",
        partOfSpeechSub: [],
        definition: "",
        examples: [
          {
            sentence: " ",
            translation: " ",
          },
        ],
      },
    ],
  };
}

function App() {
  const [data, setData] = useState({ list: [createBlankWordObject("type words to search")] });
  const [wordSearched, setWordSearched] = useState("#");

  useEffect(() => {
    fetch("https://github.com/USERNAME/REPOSITORY/raw/BRANCH/public/database/dictionary_db.json")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Network response was not ok");
        }
        return response.json();
      })
      .then(setData)
      .catch((error) => {
        console.error("Error fetching the data:", error);
        setData({ list: [createBlankWordObject("type words to search")] });
      });
  }, []);

  function handleInputChange(e) {
    setWordSearched(e.target.value);
  }

  function searchWord(word) {
    if (word === "#") {
      return createBlankWordObject("type words to search");
    }

    const foundWord = data.list.find((item) => item.word === word);
    return foundWord || createBlankWordObject("no word found");
  }

  return (
    <div className="app-container">
      <div className="dictionary-container">
        <div>
          <h1 className="title">Generated English-Korean Dictionary</h1>
          <a className="help-link" href="/info">
            help
          </a>
        </div>
        <br />
        <div className="search-container">
          <input
            type="text"
            onChange={handleInputChange}
            value={wordSearched}
            className="search-input"
          />
          <Word item={searchWord(wordSearched)} />
        </div>
      </div>
    </div>
  );
}

function Word({ item }) {
  return (
    <div>
      <h2>{item.word}</h2>
      {item.meanings.map((meaning, index) => (
        <Meaning key={index} {...meaning} />
      ))}
    </div>
  );
}

function Meaning({ partOfSpeech, partOfSpeechSub, definition, examples }) {
  return (
    <div>
      <div className="definition">{definition}</div>
      <div className="part-of-speech">
        {partOfSpeech} {partOfSpeechSub.length ? `(${partOfSpeechSub.join(", ")})` : null}
      </div>
      {examples[0].sentence.trim() && <Example examples={examples} />}
      <hr />
    </div>
  );
}

function Example({ examples }) {
  return (
    <div>
      {examples.map((example, index) => (
        <div key={index}>
          <div>- {example.sentence}</div>
          <div>- {example.translation}</div>
        </div>
      ))}
    </div>
  );
}

export default App;
```

이제 앱이 GitHub에 호스팅된 JSON 파일을 fetch하도록 설정되었습니다. 이 방법으로 클라우드 플레어 페이지의 파일 크기 제한을 우회할 수 있습니다.