🧠 풀스택으로 전환: 백엔드 및 REST API 구축

Source: Dev.to

Hey fellow developers! 👋
안녕하세요, 개발자 여러분! 👋

In my last post I focused on upgrading the frontend UI and UX. It looked much better, but it still lacked the full‑stack feel of a real application. This post is all about the backend — where things actually started getting serious.
지난 글에서는 프론트엔드 UI와 UX를 개선하는 데 집중했습니다. 훨씬 보기 좋아졌지만 실제 애플리케이션의 풀스택 감각은 아직 부족했죠. 이번 글은 백엔드에 관한 내용으로, 본격적으로 진지해지기 시작한 부분입니다.

Why Adding a Backend Was Necessary

백엔드를 추가해야 했던 이유

Initially I wanted a backend to practice and improve my backend skills. From the app’s perspective, a backend was essential for:
처음엔 백엔드 실력을 연습하고 향상시키기 위해 백엔드를 만들고 싶었습니다. 앱 입장에서 백엔드는 다음과 같은 이유로 필수였습니다:

• 📚 Large amounts of quote data
• 📚 방대한 인용구 데이터
• 🤖 Future AI scalability
• 🤖 향후 AI 확장성
• 🗂️ Category‑based filtering
• 🗂️ 카테고리 기반 필터링

Handling all of this purely on the frontend would have been messy and unrealistic. With a backend the solution becomes clean and manageable.
이 모든 작업을 프론트엔드만으로 처리한다면 복잡하고 비현실적일 수밖에 없습니다. 백엔드를 두면 해결책이 깔끔하고 관리하기 쉬워집니다.

Backend Setup & Structure

백엔드 설정 및 구조

Stack
스택

• Node.js + Express → REST API
• Node.js + Express → REST API
• MongoDB (Compass locally) → Database
• MongoDB (로컬 Compass) → 데이터베이스
• Render → Backend deployment (more on this in the next post)
• Render → 백엔드 배포 (다음 글에서 자세히 다룹니다)

Project Structure

프로젝트 구조

/
├── index.html
├── style.css
├── script.js
├── backend/
│   ├── server.js
│   └── models/
│       └── Quote.js
└── README.md

Schema Creation

스키마 생성

The core of the backend is the quote schema:
백엔드의 핵심은 인용구 스키마입니다:

const quoteSchema = new mongoose.Schema({
  text: { type: String, required: true },
  author: { type: String, required: true },
  category: { type: String, required: true }
});

How it works
동작 방식

1. A category button is clicked on the frontend.
   프론트엔드에서 카테고리 버튼을 클릭합니다.
2. A request is sent to the backend.
   백엔드에 요청을 보냅니다.
3. The backend filters quotes by category.
   백엔드가 카테고리별로 인용구를 필터링합니다.
4. The text and author are sent back.
   텍스트와 저자를 반환합니다.
5. The quote is displayed to the user.
   인용구가 사용자에게 표시됩니다.

Connecting Backend to Frontend

백엔드와 프론트엔드 연결

Inside script.js (formerly index.js) I created a fetchQuotes() function:
script.js(이전 index.js) 안에 fetchQuotes() 함수를 만들었습니다:

async function fetchQuotes(category = null) {
  try {
    const url = category
      ? `${API_URL}/quotes/category/${category}`
      : `${API_URL}/quotes`;

    const res = await fetch(url);
    const quotes = await res.json();

    usedQuotes = [];
    usedColours = [];
    newQuote();
  } catch (err) {
    console.error("Backend not available:", err);
  }
}

fetchQuotes();

For now API_URL points to localhost. Later it will switch to the deployed backend URL, which leads perfectly into the next post.
현재 API_URL은 localhost를 가리키고 있습니다. 추후 배포된 백엔드 URL로 바뀔 예정이며, 이는 다음 글과 자연스럽게 연결됩니다.

Final Result (Locally)

최종 결과 (로컬)

Everything works perfectly on my local system:
내 로컬 환경에서 모든 것이 완벽히 동작합니다:

• Quotes are fetched from the backend.
  인용구가 백엔드에서 가져와집니다.
• Categories are filtered correctly.
  카테고리가 올바르게 필터링됩니다.
• No more hard‑coded data.
  하드코딩된 데이터가 더 이상 없습니다.

All that’s left is deployment.
이제 남은 것은 배포뿐입니다.

What’s Coming Next

다음에 다룰 내용

In the next post I’ll cover:
다음 글에서는 다음을 다룰 예정입니다:

• 🌐 Frontend deployment → GitHub Pages
• 🌐 프론트엔드 배포 → GitHub Pages
• ☁️ Backend deployment → Render
• ☁️ 백엔드 배포 → Render
• 🧪 Live‑data debugging
• 🧪 실시간 데이터 디버깅
• 🔄 MongoDB Compass → MongoDB Atlas
• 🔄 MongoDB Compass → MongoDB Atlas

Stay tuned for the next update! 😄🔥
다음 업데이트를 기대해 주세요! 😄🔥