1.4.1 API 스타일 🎨

1. REST

Rest Api를 학습한 코드는 devzip에 게시하였습니다.

1️⃣ React 상태 관리 (useState)

// 요청에 필요한 데이터
const [method, setMethod] = useState('GET');      // HTTP 메서드
const [url, setUrl] = useState('https://...');    // 요청 URL
const [headers, setHeaders] = useState('{...}');  // 헤더 (문자열)
const [body, setBody] = useState('');             // 바디

// 응답 결과 저장
const [response, setResponse] = useState(null);   // 응답 데이터
const [loading, setLoading] = useState(false);    // 로딩 상태
const [error, setError] = useState(null);         // 에러 메시지

핵심: 화면에 보여줄 데이터는 useState로 관리하고, set함수로 업데이트

2️⃣ fetch API 기본 구조

const res = await fetch(url, {
    method: method,        // 'GET', 'POST', 'PUT', 'DELETE' 등
    headers: headerObj,    // { "Content-Type": "application/json" }
    body: body             // POST/PUT일 때만 사용
});

핵심: fetch(URL, 옵션객체) 형태로 HTTP 요청을 보냄

3️⃣ async/await 비동기 처리

const executeRequest = async () => {  // async 함수 선언
    const res = await fetch(url);     // await로 응답 기다림
    const data = await res.json();    // await로 JSON 파싱 기다림
};

핵심:

async = “이 함수는 비동기 작업을 합니다”
await = “이 작업이 끝날 때까지 기다립니다”

4️⃣ try/catch/finally 에러 처리 패턴

try {
    // 성공할 수도 있는 코드
    const res = await fetch(url);

} catch (err) {
    // 실패했을 때 실행
    setError(err.message);

} finally {
    // 성공/실패 상관없이 항상 실행
    setLoading(false);
}

핵심: 네트워크 요청은 항상 실패할 수 있으므로 try/catch 필수!

5️⃣ 응답(Response) 처리

// 응답 객체에서 정보 추출
res.status        // 200, 404, 500 등 상태 코드
res.statusText    // "OK", "Not Found" 등
res.headers       // 응답 헤더들

// 응답 바디 파싱
await res.json()  // JSON 형태일 때
await res.text()  // 텍스트 형태일 때

핵심: res.json()도 비동기라서 await 필요!

6️⃣ HTTP 상태 코드 의미

200-299 → 성공 (초록색) 300-399 → 리다이렉트 (주황색) 400-499 → 클라이언트 오류 (빨간색) - 내 잘못 500-599 → 서버 오류 (보라색) - 서버 잘못

전체 흐름 요약

[전송 버튼 클릭]
↓
[로딩 시작, 이전 결과 초기화]
↓
[헤더 문자열 → JSON 객체로 변환]
↓
[fetch()로 HTTP 요청 전송]
↓
[응답 대기 (await)]
↓
[응답 헤더, 바디 파싱]
↓
[화면에 결과 표시]
↓
[로딩 종료]

2. JSON APIs

1️⃣ JSON 기본 개념

JSON이란?

JavaScript Object Notation
데이터를 저장하고 전송하기 위한 텍스트 형식
모든 프로그래밍 언어에서 사용 가능

JSON 데이터 타입

문자열: 쌍따옴표만 사용 “hello”
숫자: 42, 3.14
불리언: true, false
null: null
배열: [1, 2, 3]
객체: {“key”: “value”}

2️⃣ 핵심 메서드 두 가지

JSON.parse() - 문자열을 객체로 변환 const obj = JSON.parse(‘{“name”:”철수”}’); // obj.name === “철수”

JSON.stringify() - 객체를 문자열로 변환 JSON.stringify(obj) // 압축 (한 줄) JSON.stringify(obj, null, 2) // 포맷 (들여쓰기 2칸)

3️⃣ 구현 과정에서 배운 것들

try/catch 올바른 사용법 // 잘못된 예 - finally에서 성공 처리 try { JSON.parse(input); } catch (err) { setError(err.message); } finally { setResult(“성공”); // 에러가 나도 실행됨 }

// 올바른 예 - try 안에서 성공 처리 try { JSON.parse(input); setResult(“성공”); // 성공할 때만 실행 } catch (err) { setError(err.message); }

템플릿 리터럴 // 작은따옴표 - 변수 삽입 안 됨 ‘오류: ${err.message}’ // 그대로 출력됨

// 백틱 - 변수 삽입 가능 오류: ${err.message} // 실제 에러 메시지 출력

함수 반환값 사용하기 // 잘못된 예 - 결과를 버림 JSON.stringify(parsed); setInputJson(parsed); // 객체 전달 (오류)

// 올바른 예 - 결과를 변수에 저장 const result = JSON.stringify(parsed); setInputJson(result); // 문자열 전달 (정상)

React setState는 반환값이 없다 const result = setInputJson(x); // result는 undefined

4️⃣ 최종 구현 코드

유효성 검사 try { JSON.parse(inputJson); setResult({ type: ‘validate’, message: ‘유효한 JSON입니다.’ }); } catch (err) { setError(오류: ${err.message}); }

포맷터 try { const parsed = JSON.parse(inputJson); const formatted = JSON.stringify(parsed, null, 2); setInputJson(formatted); } catch (err) { setError(오류: ${err.message}); }

압축 try { const parsed = JSON.parse(inputJson); const minified = JSON.stringify(parsed); setInputJson(minified); } catch (err) { setError(오류: ${err.message}); }

5️⃣ 핵심 패턴 요약

JSON 처리는 항상 try/catch로 감싸기 (파싱 실패 대비)
성공 처리는 try 블록 안에서
함수 반환값은 변수에 저장해서 사용
문자열 안에 변수 넣을 때는 백틱 사용

3. SOAP API

SOAP API는 추후에 학습 예정입니다.

4. gRPC

gRPC (gRPC Remote Procedure Call)는 Google이 개발한 고성능 RPC 프레임워크이다.

RPC: 원격 프로시저 호출

5. GraphQL

GraphQL은 API를 위한 쿼리 언어이자, 그 쿼리를 실행하는 서버 측 런타임.

REST의 한계(여러 엔드포인트, 오버 페칭 등)을 극복하기 위한 쿼리 언어.

장점: 필요한 필드만, 한 번의 쿼리로 연관된 데이터를 묶어서.

Latest Docs