fetch

Fetch API 소개 및 활용법

Fetch API는 브라우저에서 제공하는 모던한 방식의 HTTP 요청 라이브러리이다. 이 API를 사용하면 네트워크 요청을 쉽게 보내고 응답을 처리할 수 있다. Fetch는 자바스크립트의 Promise를 사용하여 비동기적으로 작동하므로, 비동기 HTTP 요청을 보다 쉽게 처리할 수 있다.

Fetch API의 기본 사용법

Fetch API를 사용하여 데이터를 요청하고 받는 기본적인 방법은 다음과 같다

fetch(url)
  .then(response => response.json())  // 응답을 JSON 형태로 파싱
  .then(data => console.log(data))     // 데이터 처리
  .catch(error => console.error('Error:', error));  // 에러 처리

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Failed to fetch data:', error));

Fetch API 사용하여 공공 데이터 접근하기

API 키와 URL 설정

const API_KEY = '87413ed49e7d4074a16f6657848c9c4c'; // API 접근을 위한 키
const API_URL = `https://data.gm.go.kr/openapi/Aptlesrent?key=${API_KEY}&Type=json`; // 요청할 URL 주소

API_KEY: API 서비스 제공자로부터 받은 고유한 키이다. 이 키는 API 사용 권한을 확인하는 데 사용된다.
API_URL: API 요청을 보낼 전체 URL입니다. URL 내에 API 키와 요청 데이터 형식(Type=json)을 명시하고 있다.

Fetch 요청 보내기

fetch(API_URL)
    .then(response => response.json()) // 응답을 JSON 형태로 파싱
    .then(data => console.log('Data:', data)) // 파싱된 데이터를 콘솔에 출력
    .catch(error => console.error('Failed to fetch data:', error)); // 에러 처리

fetch(API_URL): 설정된 URL로 네트워크 요청을 보낸다. Fetch는 Promise 기반으로 작동하므로, 요청의 성공 또는 실패를 then과 catch로 처리할 수 있다.
.then(response => response.json()): 서버로부터 받은 응답을 JSON으로 변환한다. response.json()은 또 다른 Promise를 반환하므로, 이를 다음 then 구문에서 처리할 수 있다.
.then(data => console.log('Data:', data)): JSON으로 변환된 데이터를 콘솔에 출력한다. 이 데이터는 API에서 제공하는 구조에 따라 다르게 나타난다.
.catch(error => console.error('Failed to fetch data:', error)): 네트워크 요청 중 발생한 에러를 콘솔에 출력한다. 이는 네트워크 연결 실패, 응답 파싱 오류 등 다양한 원인에 의해 발생한다.

오류 처리

오류 처리를 적절히 하지 않으면 예외가 발생했을 때 프로그램이 갑자기 중단될 수 있다 .catch를 통해 Promise 체인에서 발생한 예외를 잡아내 프로그램의 안정성을 높이고 오류의 원인을 쉽게 파악할 수 있다.
오류가 발생하더라도 추가적인 처리를 계속 진행하고 .catch 블록에 로깅 로직을 추가하여 오류의 원인을 쉽게 파악할 수 있다.

HTML 파일 준비

HTML 파일 (index.html)

HTML과 자바스크립트 코드를 분리하여 저장하고 HTML 파일에서 자바스크립트 파일을 참조하는 방식을 사용하였다

아래 코드들을 VScode에서 작성한 후 ALT + l + o를 사용해 live sever Extension으로 확인할 수 있다 아래 익스텐션을 VScode에 설치 후 실행하면 된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API 예제</title>
</head>
<body>
    <h1>Fetch API로 데이터 가져오기</h1>
    <script src="script.js"></script> 
    <!-- js파일 위치와 파일명에 따라 맞게 작성 -->
</body>
</html>

아래 API는 공공데이터 포털 ( https://www.data.go.kr/) 오픈 API -> 경기도 광명시_아파트 전월세 자료 현황 -> 바로가기
Open API 클릭 -> 인증키 신청을 통해서 인증키를 신청받으면 URL을 통해서 url?key=인증키&Type=json 을 통해서 JSON형식으로 데이터를 변환 받은것이다

자바스크립트 파일 (script.js)

const API_KEY = '신청하여 받은 인증키 입력';
const API_URL = `https://data.gm.go.kr/openapi/Aptlesrent?key=${API_KEY}&Type=json`;

fetch(API_URL)
    .then(response => response.json())
    .then(data => console.log('Data:', data))
    .catch(error => console.error('Failed to fetch data:', error));

위 두 파일을 작성후 live server로 확인하면

위와 같이 Data가 확인된다

JavaScript에서 fetch API를 사용하여 데이터를 가져온 결과를 콘솔에 출력한 것이다. 스크린샷에는 JSON 데이터가 배열과 객체의 형태로 구성되어 있다.

웹페이지에 JSON 테이블 형태로 출력하기

주어진 데이터를 위와 같이 정리하여 출력하고 싶다면, JavaScript에서 fetch API를 사용하여 데이터를 가져오고, 웹 페이지에 표시하거나 콘솔에 출력할 수 있다. 아래 코드는 웹 페이지에 테이블 형태로 데이터를 보여주는 예제이다

1. HTML 파일 생성

HTML 파일을 만들고, 데이터를 표시할 공간을 마련한다. index.html 파일에 아래 내용을 입력한다

<!DOCTYPE html> <!-- HTML5 문서 유형 선언 -->
<html lang="en"> <!-- HTML 문서의 루트 요소로 언어를 영어로 설정 -->
<head>
    <meta charset="UTF-8"> <!-- 문자 인코딩을 UTF-8로 설정 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 디자인을 위한 뷰포트 설정 -->
    <title>Apartment Rental Data Display</title> <!-- 웹 페이지 제목 설정 -->
    <style>
        table, th, td {
            border: 1px solid black; /* 테이블과 셀의 테두리 스타일 설정 */
            border-collapse: collapse; /* 테이블의 테두리를 합쳐서 보여줌 */
        }
        th, td {
            padding: 8px; /* 셀 안의 내용과 테두리 사이의 패딩 설정 */
            text-align: left; /* 테이블 내용을 왼쪽 정렬 */
        }
    </style>
</head>
<body>
    <h1>Apartment Rental Information</h1> <!-- 페이지 제목 -->
    <table id="data-table"> <!-- 데이터를 표시할 테이블, 고유 ID로 접근 가능 -->
        <tr>
            <!-- 테이블의 헤더 설정, 각 컬럼의 제목을 나타냄 -->
            <th>Building Year</th>
            <th>Year</th>
            <th>Month</th>
            <th>Day</th>
            <th>Legal Dong Name</th>
            <th>Lot No</th>
            <th>Apartment Name</th>
            <th>Floor Count</th>
            <th>Assurance Amount</th>
            <th>Rent Amount</th>
            <th>Private Use Area</th>
        </tr>
        <!-- 이 곳에 JavaScript를 통해 동적으로 행이 추가됩니다 -->
    </table>

    <script src="script.js"></script> <!-- JavaScript 파일을 HTML에 연결 -->
    <!-- 파일명과 파일위치에 맞춰서 작성! -->
</body>
</html>

2. JavaScript 파일 생성

script.js라는 JavaScript 파일을 생성하고, 아래 내용을 추가하여 API에서 데이터를 가져와 테이블에 추가하는 로직이다

document.addEventListener('DOMContentLoaded', function() { // DOM이 완전히 로드된 후 함수를 실행
    fetch('https://data.gm.go.kr/openapi/Aptlesrent?key=(()없이 공공데이터포털에서 받은 인증키 입력)&Type=json') // 데이터를 가져오기 위해 fetch API 사용
        .then(response => response.json()) // 서버로부터 응답을 JSON 형식으로 변환
        .then(data => {
            const rows = data.Aptlesrent[1].row; // 응답 데이터에서 'row' 배열 접근
            const table = document.getElementById('data-table'); // ID를 사용하여 HTML의 테이블 요소 선택
            rows.forEach(row => { // 각 'row'에 대해 반복
                const tr = document.createElement('tr'); // 새로운 테이블 행 생성
                tr.innerHTML = `
                    <td>${row.BUILD_YY}</td> <!-- 건축년도 -->
                    <td>${row.YY}</td> <!-- 년도 -->
                    <td>${row.MT}</td> <!-- 월 -->
                    <td>${row.DE}</td> <!-- 일 -->
                    <td>${row.LEGALDONG_NM}</td> <!-- 법정동 이름 -->
                    <td>${row.LOTNO}</td> <!-- 대지 번호 -->
                    <td>${row.APT_NM}</td> <!-- 아파트 이름 -->
                    <td>${row.FLOOR_CNT}</td> <!-- 층 수 -->
                    <td>${row.ASSURNC_AMT}</td> <!-- 보증금 -->
                    <td>${row.MTRENT_AMT}</td> <!-- 월세 -->
                    <td>${row.PRVTUSE_AR}</td> <!-- 전용 면적 -->
                `; // 행 내용 설정
                table.appendChild(tr); // 완성된 행을 테이블에 추가
            });
        })
        .catch(error => console.error('Failed to fetch data:', error)); // 데이터 로드 중 에러 발생 처리
});

코드 상세 설명

DOM

DOM은 "Document Object Model"의 약자로, 웹 문서의 구조를 객체 기반의 표현 방식으로 나타낸 것을 말한다. 웹 페이지의 모든 요소(HTML 태그, 스타일, 스크립트 등)를 트리 구조로 표현하며, 이를 통해 자바스크립트 같은 스크립트 언어가 문서 구조, 스타일, 내용 등을 읽고 수정할 수 있는 방법을 제공한다.

1. 이벤트 리스너 설정하기

우선, JavaScript가 DOM 구조를 모두 로드한 후에 실행되도록 하기 위해 DOMContentLoaded 이벤트 리스너를 사용한다. 이는 HTML 문서의 파싱이 완료되고 DOM 트리가 완전히 구성된 직후에 실행되어, 스크립트 실행이 HTML 요소의 로딩을 기다리지 않도록 한다.

document.addEventListener('DOMContentLoaded', function() {
    // 함수 내 코드는 DOM 로드 완료 후 실행됩니다.
});

2. Fetch API 사용하여 데이터 가져오기

fetch 함수를 사용하여 웹 API로부터 데이터를 요청한다.

fetch는 프로미스를 반환하므로, .then() 메소드를 체이닝하여 비동기적으로 응답을 처리할 수 있습니다.

체이닝(Chaining)

체이닝은 프로그래밍에서 일련의 메소드 호출이나 함수 호출을 연속적으로 연결하는 패턴을 말한다. JavaScript에서 프라미스(Promises)와 jQuery와 같은 라이브러리에서 매우 유용하게 사용된다.

fetch('https://data.gm.go.kr/openapi/Aptlesrent?key=87413ed49e7d4074a16f6657848c9c4c&Type=json')
    .then(response => response.json()) // 응답을 JSON 형식으로 파싱
    .then(data => {
        // 데이터 처리 로직
    })
    .catch(error => console.error('Failed to fetch data:', error)); // 에러 처리

fetch('https://data.gm.go.kr/openapi/Aptlesrent?key=인증키&Type=json')

fetch 함수는 주어진 URL에서 데이터를 요청 여기서는 공공 데이터 포털의 특정 API 주소를 사용한다.

.then(response => response.json())

서버로부터 받은 응답을 JSON 형식으로 변환 fetch는 Promise를 반환하므로 .then() 메소드를 사용하여 비동기 결과를 처리할 수 있다.

.then(data => { ... });

변환된 JSON 데이터에서 필요한 부분을 추출하여 화면에 표시합니다.
data.Aptlesrent[1].row는 필요한 데이터가 들어 있는 배열 경로입니다.
배열의 각 요소를 순회하면서, 각 데이터의 세부 사항을 테이블의 행(tr)으로 생성하고, 이를 테이블에 추가합니다.

3. 데이터를 테이블에 표시하기

.then(data => { ... }); ...부분 설명

응답으로 받은 데이터는 JSON 형식이며, 이 중 특정 배열에 접근하여 테이블의 각 행으로 추가한다. 이 예제에서는 data.Aptlesrent[1].row 배열에 각 행 데이터가 존재한다.

각 데이터 항목을 HTML 테이블의 행(<tr>)으로 생성하고, 해당 행에 필요한 데이터를 셀(<td>)로 추가한다.

.then(data => {
            const rows = data.Aptlesrent[1].row; // 응답 데이터에서 'row' 배열 접근
            const table = document.getElementById('data-table'); // ID를 사용하여 HTML의 테이블 요소 선택
            rows.forEach(row => { // 각 'row'에 대해 반복
                const tr = document.createElement('tr'); // 새로운 테이블 행 생성
                tr.innerHTML = `
                    <td>${row.BUILD_YY}</td> <!-- 건축년도 -->
                    <td>${row.YY}</td> <!-- 년도 -->
                    <td>${row.MT}</td> <!-- 월 -->
                    <td>${row.DE}</td> <!-- 일 -->
                    <td>${row.LEGALDONG_NM}</td> <!-- 법정동 이름 -->
                    <td>${row.LOTNO}</td> <!-- 대지 번호 -->
                    <td>${row.APT_NM}</td> <!-- 아파트 이름 -->
                    <td>${row.FLOOR_CNT}</td> <!-- 층 수 -->
                    <td>${row.ASSURNC_AMT}</td> <!-- 보증금 -->
                    <td>${row.MTRENT_AMT}</td> <!-- 월세 -->
                    <td>${row.PRVTUSE_AR}</td> <!-- 전용 면적 -->
                `; // 행 내용 설정
                table.appendChild(tr); // 완성된 행을 테이블에 추가
            });
        })

3-1. 응답 데이터 접근:

const rows = data.Aptlesrent[1].row;

data 객체에서 Aptlesrent 배열의 두 번째 요소(인덱스 1)의 row 속성에 접근 row는 API 응답에서 주어진 데이터 항목들의 배열을 포함

3-2. HTML 테이블 요소 선택:

const table = document.getElementById('data-table');

document.getElementById는 주어진 ID를 가진 HTML 요소를 찾아 반환한다. 여기서는 'data-table'이라는 ID를 가진 테이블 요소를 찾아 table 변수에 저장함.

3-3. 데이터 배열 순회:

rows.forEach(row => { ... });

//위 코드 부분
rows.forEach(row => { // 각 'row'에 대해 반복
                const tr = document.createElement('tr'); // 새로운 테이블 행 생성
                tr.innerHTML = `
                    <td>${row.BUILD_YY}</td> <!-- 건축년도 -->
                    <td>${row.YY}</td> <!-- 년도 -->
                    <td>${row.MT}</td> <!-- 월 -->
                    <td>${row.DE}</td> <!-- 일 -->
                    <td>${row.LEGALDONG_NM}</td> <!-- 법정동 이름 -->
                    <td>${row.LOTNO}</td> <!-- 대지 번호 -->
                    <td>${row.APT_NM}</td> <!-- 아파트 이름 -->
                    <td>${row.FLOOR_CNT}</td> <!-- 층 수 -->
                    <td>${row.ASSURNC_AMT}</td> <!-- 보증금 -->
                    <td>${row.MTRENT_AMT}</td> <!-- 월세 -->
                    <td>${row.PRVTUSE_AR}</td> <!-- 전용 면적 -->
                `; // 행 내용 설정
                table.appendChild(tr); // 완성된 행을 테이블에 추가
            });

forEach 메소드를 사용하여 rows 배열의 각 row 객체를 순회한다. 이 메소드는 배열의 각 요소에 대해 정의된 콜백 함수를 실행함.

3-4. 테이블 행 생성 및 내용 설정:

const tr = document.createElement('tr');
tr.innerHTML = `
    <td>${row.BUILD_YY}</td> <!-- 건축년도 -->
    <td>${row.YY}</td> <!-- 년도 -->
    <td>${row.MT}</td> <!-- 월 -->
    <td>${row.DE}</td> <!-- 일 -->
    <td>${row.LEGALDONG_NM}</td> <!-- 법정동 이름 -->
    <td>${row.LOTNO}</td> <!-- 대지 번호 -->
    <td>${row.APT_NM}</td> <!-- 아파트 이름 -->
    <td>${row.FLOOR_CNT}</td> <!-- 층 수 -->
    <td>${row.ASSURNC_AMT}</td> <!-- 보증금 -->
    <td>${row.MTRENT_AMT}</td> <!-- 월세 -->
    <td>${row.PRVTUSE_AR}</td> <!-- 전용 면적 -->
`;

document.createElement('tr')을 호출하여 새로운 테이블 행(tr) 요소를 생성한다.
tr.innerHTML에 템플릿 리터럴을 사용하여 각 row 객체의 속성을 테이블 데이터 셀(td)에 할당. 각 셀은 특정 데이터를 표시한다.

3-5. 테이블에 행 추가:

table.appendChild(tr);

appendChild 메소드를 사용하여 생성된 tr 요소를 앞서 선택한 table 요소의 자식으로 추가. 이 과정을 통해 동적으로 테이블이 구성되고 페이지에 데이터가 표시됨.

4. 오류 처리

데이터 로드 과정에서 오류가 발생할 경우, 콘솔에 에러 메시지를 출력한다.

.catch(error => console.error('Failed to fetch data:', error));

이번 글에서는 JavaScript의 Fetch API를 활용해 서버로부터 데이터를 비동기적으로 가져오고, 이를 활용해 웹 페이지에 동적으로 테이블을 구성하는 방법에 대해 살펴보았다 글을 읽고 https://www.data.go.kr/ 데이터 포털에서 인증키를 받아 실행해보면 이 글을 이해하는데 도움이 될것이다.

[예제에 쓰인 데이터 경로]

공공데이터 포털 ( https://www.data.go.kr/) 오픈 API -> 경기도 광명시_아파트 전월세 자료 현황 -> 바로가기
Open API 클릭

[인증키 신청 경로]

공공데이터 포털 ( https://www.data.go.kr/) 오픈 API -> 경기도 광명시_아파트 전월세 자료 현황 -> 바로가기
Open API 클릭 -> 인증키 신청

'백엔드 > Node.js' 카테고리의 다른 글

Node.js 프로젝트 시작하기: 효율적인 파일 구조와 라우팅 관리 (20)	2024.11.13
package.json 파일 생성 및 설정 방법 (0)	2024.11.13
Node.js (2)	2024.11.08
async와 await (8)	2024.11.07
Promise (0)	2024.11.07

hyunji.blog

fetch

Fetch API 소개 및 활용법

Fetch API의 기본 사용법

Fetch API 사용하여 공공 데이터 접근하기

API 키와 URL 설정

오류 처리

HTML 파일 준비

웹페이지에 JSON 테이블 형태로 출력하기

1. HTML 파일 생성

2. JavaScript 파일 생성

코드 상세 설명

DOM

1. 이벤트 리스너 설정하기

2. Fetch API 사용하여 데이터 가져오기

3. 데이터를 테이블에 표시하기

4. 오류 처리

'백엔드 > Node.js' 카테고리의 다른 글

티스토리툴바

fetch

Fetch API 소개 및 활용법

Fetch API의 기본 사용법

Fetch API 사용하여 공공 데이터 접근하기

API 키와 URL 설정

오류 처리

HTML 파일 준비

웹페이지에 JSON 테이블 형태로 출력하기

1. HTML 파일 생성

2. JavaScript 파일 생성

코드 상세 설명

DOM

1. 이벤트 리스너 설정하기

2. Fetch API 사용하여 데이터 가져오기

3. 데이터를 테이블에 표시하기

4. 오류 처리

'백엔드 > Node.js' 카테고리의 다른 글

관련글

티스토리툴바