유튜브 API 키 발급받기

일단 이 글을 시작하기 전에 https://start.spring.io/ 여기서 뭘 다운받았는지 잘 기억이 안 나서 먼저 첨부파일을 배포하겠습니다 아마 잘 기억하면 생각이 날 것 같긴 한데 지금은 다른 게 급해서

streaming.zip

0.05MB

시작 툴입니다

 

그리고 지금 이 글을 적고 있는 시점은

StreamingProject.zip

0.32MB

이것부터 시작하고 있으니 참고해 주세요

---

YouTube API 키 발급받기

1. https://console.cloud.google.com/apis/dashboard?inv=1&invt=AbpNhQ&project=fakenewsproject-449801 접속

Google 클라우드 플랫폼

2. 접속하면 이런 화면이 뜰 텐데, 라이브러리를 들어가 줍니다.

3. 밑으로 쭉 내리다 보면 오른쪽처럼 Youtube Data API v3가 있을 텐데, 클릭해 줍니다.

4. 클릭하고, 새 프로젝트를 생성해 줍니다.

(맨 처음 프로젝트를 생성하는 것이 가장 좋은데, 저는 이미 다른 프로젝트 때문에 하나 생성했어서... 위에 네모 안에 동그라미 세 개가 있는 도형을 눌러 준 후, 새 프로젝트를 생성해 줍니다.)

그 후, 사용 버튼을 눌러 주면

이런 화면이 뜰 텐데,

5. 사용자 인증 정보 > API 키를 눌러 줍니다.

6. 키가 생성이 완료되었습니다.

자, 이제 API 키를 `application.properties` 또는 `application.yml`에 저장하면 됩니다.

저는 `application.properties`를 사용하기 때문에, 발급받은 키는 여기다 넣어 줄게요.

---

2. Spring Boot 프로젝트 구성

일단 구조는 이렇게 될 것 같습니다

/src/main/java/com/example/streaming
    ├── controller   → 유튜브 API 컨트롤러
    ├── service      → API 호출 서비스
    ├── repository   → 데이터 저장 (MyBatis 활용 가능)
    ├── model        → 데이터 객체 정의

---

3. YouTube API 연동 코드 작성

이제 Spring Boot에서 YouTube API를 호출하는 서비스 (`YoutubeService.java`)를 작성하겠습니다.

package com.example.streaming.service;

import lombok.RequiredArgsConstructor;
import org.json.JSONException;
import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.client.RestTemplate;

@Service
@RequiredArgsConstructor
public class YoutubeService {

    @Value("${youtube.api.key}")
    private String apiKey;

    private final RestTemplate restTemplate = new RestTemplate();

    public JSONObject getChannelStatistics(String channelId) throws JSONException {
        String url = "https://www.googleapis.com/youtube/v3/channels"
                + "?part=statistics"
                + "&id=" + channelId
                + "&key=" + apiKey;

        String response = restTemplate.getForObject(url, String.class);
        return new JSONObject(response);
    }

    public JSONObject searchVideos(String query) throws JSONException {
        String url = "https://www.googleapis.com/youtube/v3/search"
                + "?part=snippet"
                + "&q=" + query
                + "&key=" + apiKey;

        String response = restTemplate.getForObject(url, String.class);
        return new JSONObject(response);
    }
}

추가된 기능

1. `getChannelStatistics(String channelId)`

• 특정 채널의 통계를 가져오는 메서드
• 구독자 수, 조회수, 동영상 개수 확인 가능

2. `searchVideos(String query)`

• 특정 키워드로 유튜브 동영상을 검색하는 메서드

---

사실 제가 리액트는 정말 무지하고, 벡터 DB에 대해서도 잘 몰라서 이번 기회에 공부하고자 여기다 작성하겠습니다.

React, 벡터 DB, JSON 개념 정리 및 백엔드 변경 방향

1. React

기본 개념

"프론트엔드를 만들기 위한 라이브러리"

기존의 JSP처럼 서버에서 HTML을 만들어 보내는 방식이 아니라, 브라우저에서 동적으로 UI를 렌더링하는 방식

• JSP → React 변경 시
  • JSP: 서버(Spring Boot)가 HTML을 직접 만들어서 클라이언트(브라우저)에게 보냄
  • React: 클라이언트(브라우저)에서 실행되며, 데이터를 받아서 화면을 동적으로 그림
  • 백엔드는 JSON 형식의 데이터(API)를 제공하는 역할만 수행하면 됨

React의 핵심 동작 방식

1. 컴포넌트 기반 → UI를 작은 조각(Component)으로 나누어서 개발
2. 상태(State) 관리 → 데이터가 변경되면 자동으로 UI 업데이트
3. Cirtual DOM → 실제 DOM을 직접 변경하는 것이 아니라, 가상의 DOM을 변경하여 빠르게 업데이트

React 개발 시 필요한 것

• React + Vite 사용 추천

npm create vite@latest my-project --template react
cd my-project
npm install
npm run dev

• 백엔드(Spring Boot)와 통신 방식
  • React는 JSP를 사용하지 않고, 백엔드에서 JSON 형식의 데이터만 받아서 사용
  • Spring Boot는 REST API를 만들어서 React와 통신

---

2. JSON이란?

JSON 기본 개념

• JSON(제이슨, JavaScript Oject Notation)은 데이터를 저장하고 전송하는 데 사용하는 텍스트 형식의 데이터 구조
• 브라우저, 서버, 데이터베이스 어디서든 사용 가능

JSON 예시

{
  "channelId": "-",
  "channelName": "Google Developers",
  "subscribers": 1500000,
  "totalViews": 50000000
}

• JSON은 `키:값` 쌍으로 데이터를 표현(Java의 `Map<string, Object>`와 유사)
• React가 백엔드(Spring Boot)에서 데이터를 받을 때 JSON 형식 사용

JSON을 Spring Boot에서 다루는 방법

@RestController
@RequestMapping("/api/youtube")
@RequiredArgsConstructor
public class YoutubeController {
    private final YoutubeService youtubeService;

    @GetMapping("/channel/{channelId}")
    public ResponseEntity<?> getChannelStats(@PathVariable String channelId) {
        JSONObject result = youtubeService.getChannelStatistics(channelId);
        return ResponseEntity.ok(result.toString());
    }
}

• Spring Boot는 JSON을 기본으로 반환(React가 받을 수 있음)

---

3. 벡터 DB란?

벡터 DB(Vector Database) 기본 개념

• 벡터 DB는 AI/머신러닝 모델이 사용하는 데이터를 저장하고 검색하기 위한 특화된 데이터베이스
• 기존의 SQL(MariaDB, PostgreSQL)처럼 테이블 기반이 아니라, 벡터(숫자 배열)로 데이터 저장
• 유사한 데이터(예: 비슷한 영상, 키워드 기반 검색)를 빠르게 찾을 때 유용

벡터 DB가 필요한 이유

• 유튜브 데이터를 다룰 때, "비슷한 영상 추천" 기능을 만들고 싶다면 벡터 검색(Vector Search) 필요
• 텍스트, 이미지, 오디오 같은 데이터를 AI가 분석하여 벡터로 변환하고 저장하는 방식
• 기존 SQL DB는 WHERE 조건으로 검색하지만, 벡터 DB는 코사인 유사도 (Cosine Similarity)등을 활용해 검색

벡터 DB 예시

• Pinecone(클라우드 기반, 간편한 API)
• Weaviate(오픈소스, 강력한 기능)
• FAISS(Facebook에서 만든 벡터 검색 라이브러리)

---

4. Spring Boot에서 React와 연동하는 방법

기존 JSP → REST API 제공 방식 변경

• 백엔드(Spring Boot)는 데이터를 JSON 형태로 제공
• 프론트엔드(React)는 API를 호출해서 데이터를 받아 화면 렌더링

API 예제

Spring Boot에서 REST API 제공 (`YouTubeController.java`)

@RestController
@RequestMapping("/api/youtube")
@RequiredArgsConstructor
public class YoutubeController {
    private final YoutubeService youtubeService;

    @GetMapping("/channel/{channelId}")
    public ResponseEntity<?> getChannelStats(@PathVariable String channelId) {
        JSONObject result = youtubeService.getChannelStatistics(channelId);
        return ResponseEntity.ok(result.toString());
    }
}

React에서 API 호출(`YoutubeComponent.jsx`)

import { useEffect, useState } from "react";

function YoutubeComponent() {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch("http://localhost:8080/api/youtube/channel/UC_x5XG1OV2P6uZZ5FSM9Ttw")
            .then(response => response.json())
            .then(data => setData(data))
            .catch(error => console.error("Error fetching data:", error));
    }, []);

    return (
        <div>
            <h1>유튜브 채널 정보</h1>
            {data ? (
                <div>
                    <p>채널명: {data.channelName}</p>
                    <p>구독자 수: {data.subscribers}</p>
                    <p>총 조회수: {data.totalViews}</p>
                </div>
            ) : (
                <p>데이터를 불러오는 중...</p>
            )}
        </div>
    );
}

export default YoutubeComponent;

• React는 API를 호출하여 데이터를 가져오고 화면 업데이트
• Spring Boot는 백엔드(API 제공) 역할, React는 프론트엔드(UI 처리) 역할

5. 정리(무엇을 해야 하는가?)

1. React 환경 설정하기

• `npm create vite@latest my-project --template react`
• `npm install` 후 `npm run dev` 실행

2. Spring Boot에서 API 제공(JSP 제거)

• `YoutubeController.java`를 만들어 JSON 데이터 반환

3. JSON 이해하고 React에서 API 호출하기

• Raect의 `fetch()` 또는 `axios`를 사용하여 Spring Boot API 호출

4. 벡터 DB 학습 및 연동

• 벡터 DB를 선택하고 AI 기반 검색 기능 추가
• (예: Pinecone, Weaviate, FAISS)