반응형

API 6

PHP와 React를 연동하여 Ajax(Fetch)로 데이터 목록 출력하기

PHP와 React를 함께 사용하는 간단한 예제를 소개해드리겠습니다.기존 PHP 기반 웹사이트에 React를 부분적으로 도입하고 싶은 분들께 도움이 될 내용입니다.목표PHP 백엔드에서 JSON 데이터를 제공합니다.React 프론트엔드가 Ajax(Fetch)를 통해 데이터를 받아 목록으로 출력합니다.1. PHP API 만들기우선 PHP에서 JSON 데이터를 반환하는 간단한 API를 만듭니다./api/data.php 파일에 아래와 같은 코드를 작성해주세요. 1, 'name' => '사과'], ['id' => 2, 'name' => '바나나'], ['id' => 3, 'name' => '포도']];echo json_encode($data);이제 /api/data.php 주소로 접속하면 아래와 같은 JSON..

Programming/React 2025.04.11

[Javascript] IndexedDB를 알아보자

IndexedDB란?IndexedDB는 웹 브라우저에서 대용량의 구조화된 데이터를 클라이언트 측에 저장할 수 있는 로우 레벨 API입니다. IndexedDB를 사용하면 네트워크 상태에 상관없이 데이터를 저장하고 검색할 수 있는 웹 애플리케이션을 만들 수 있습니다. 이는 웹 애플리케이션이 온라인과 오프라인 환경에서 모두 동작할 수 있게 해줍니다2.IndexedDB의 주요 특징은 다음과 같습니다.비동기 API: IndexedDB는 비동기 방식으로 동작하여 애플리케이션이 블록되지 않도록 합니다.객체 저장소: IndexedDB는 객체 저장소(Object Store)를 사용하여 데이터를 저장합니다. 이는 JavaScript 객체를 저장하고 검색할 수 있음을 의미합니다.트랜잭션: IndexedDB는 트랜잭션을 사용..

카테고리 없음 2025.03.06

[PHP] CURL을 이용한 API 데이터 전송

대부분 API 데이터 전송이라 함은 API Key 를 이용한 1:1 데이터 전송을 말한다 Api Key 는 누출이 되면 안되는 중요한 값으로 유출에 위험성이 있는 POST 및 GET으로는 전송하지 않는다. CURL의 Header 값을 통해 POST 및 GET 보다는 좀더 안전한 방법으로 Api key 를 체크하여 통신을 진행해보자. https://www.aaa.com 이라는 사이트에서 https://www.bbb.com 이라는 사이트의 데이터를 받아온다고 가정하자 이하 설명을 위해 도메인은 생략 aaa. bbb로 얘기하겠다. aaa 사이트의 result.php 페이지에서 curl 통신을 통해 bbb 사이트에서 미리 발급 받은 api key를 header 로 담아 전송을 시도한다. # 데이터를 받아올 페이..

Programming/PHP 2022.11.25

[PHP] YouTube Data API v3를 이용한 채널 최신 영상 불러오기

YouTube Data API v3 API를 이용하여 채널의 최신 영상 목록을 불러올 수 있다. API 적용 전 YouTube Data API v3 API 키 를 발급 받아야 한다. 2022.11.01 - [Web Programming/API] - [API] YouTube Data API v3 API키 발급받기 [API] YouTube Data API v3 API키 발급받기 유튜브 채널 정보를 받기 위한 YouTube Data API v3 API키 발급받기 1. https://console.cloud.google.com/ 페이지에 접속한다. 2. 서비스 약관에 동의하고 [동의 및 계속하기] 를 선택한다. 3. 왼쪽 메뉴중 API 및 서 dotiweb.tistory.com YouTube Data API |..

Programming/PHP 2022.11.01

[API] YouTube Data API v3 API키 발급받기

유튜브 채널 정보를 받기 위한 YouTube Data API v3 API키 발급받기 1. https://console.cloud.google.com/ 페이지에 접속한다. 2. 서비스 약관에 동의하고 [동의 및 계속하기] 를 선택한다. 3. 왼쪽 메뉴중 API 및 서비스 > 사용 설정된 API 및 서비스 를 선택한다. 4. 화면 오른쪽에 프로젝트 만들기를 선택한다. 5. 프로젝트 이름을 입력 후 만들기를 선택한다. (영문, 숫자, 작은따옴표, 하이픈, 공백 또는 느낌표 입력이 가능함) 6. 프로젝트가 생성되고, 왼쪽 메뉴에서 라이브러리를 선택한다. 7. API 라이브러리 검색란에 youtube data api v3 를 입력하고 검색을 한다. 8. 검색된 라이브러리 YouTube Data API v3 를 선..

Programming/API 2022.11.01
반응형