Router + API

SPA (Single Page Application)

• 단일 페이지로 구성된 웹 애플리케이션
• 여러 HTML 파일을 준비했다가 새로 렌더링하는 것이 아닌, 하나의 페이지 내에서 바뀔 부분, 필요한 부분만 동적으로 로딩하여 화면을 업데이트하는 방식

 

라우팅 (Routing)

• 사용자가 요청한 url에 따라 해당 url에 맞는 페이지를 보여주는 것
• SPA가  하나의 페이지만 존재하는 애플리케이션을 의미하는게 아니라, 여러 페이지 존재 가능
• 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고, 마치 하나의 페이지인 것처럼 처리하는 기술을 의미

react-router-dom 이란?

• react는 SPA이다.
• react에 router를 사용할 수 있는 즉, 화면 전환을 지원하는 모듈이다.
• 리액트로 SPA를 개발할 때 라우팅을 위해 react-router 라이브러리를 사용

 

REST API 란?

• http메서드를 사용하여 데이터를 요청/전송합니다. REST는 URI와 HTTP 프로토콜을 이용해서 접근하는 것이 특징이며 데이터포맷은 브라우저 호환성이 좋은 JSON을 사용

• HTTP API: HTTP만 쓰면 모두 포함
• REST API: HTTP API 중 REST 원칙을 지키는 것

 

동기 / 비동기 특징

 

• • 동기 특징
    • JS는 동기식 언어
    • 한번에 하나의 작업을 수행 (싱글스레드)
  • 비동기 특징
    
    • 동시에 여러 작업을 수행할 수 있다.
    • 무엇이 먼저 완료될 지 보장할 수 없다.

• 비동기 처리는 JS의 특징 중 하나. 특정 연산이 끝날 때 까지 코드의 실행이 멈추지 않고 다음 코드를 먼저 실행한다. 비동기 처리가 가진 문제점을 callback 함수가 해결함. 콜백 함수는 콜백 이후에 처리될 작업들을 콜백 함수 내에 작성함. 근데 이 과정이 반복되면 콜백 지옥이 발생함. 1번 코드의 정보를 바탕으로 2번 코드가 발생하고 또 3번코드는 2번 코드의 정보를 바탕으로 실행되다보면 발생하는 것임. ->이를 보완하기 위해 promise, async/await가 나타남

 

Promise

• 비동기 처리에 사용되는 객체
  
  • Pending(대기) : 코드는 실행 되었지만 결과를 아직 반환하지 않은 객체비동기 처리를 아직 수행하는 단계
  • Fulfilled(이행): 비동기 처리가 어떠한 이유에서 실패한 상태
  • Rejected(실패) : 비동기 처리가 어떠한 이유에서 실패한 상태
• reject가 호출되면 catch메소드의 동작만 실행됩니다.
• Promise가 끝난 후 동작을 설정할 수 있는데, 이는 then메소드와 catch메소드

 

async 와 await

• 자바스크립트 비동기 처리 방식 중 하나로 async와 await를 사용하면 비동기 처리를 동기 코드처럼 작성할 수 있어 가독성이 좋아지고 에러 처리가 간단해짐

async function fetchData() {
    try {
        let promise = new Promise((resolve, reject) => {
            setTimeout(() => resolve("데이터 완료!"), 1000);
        });
        let result = await promise; // promise가 완료될 때까지 기다림
        console.log(result); // "데이터 완료!"
    } catch (error) {
        console.error("오류 발생:", error);
    }
}
fetchData();

• await은 Promise가 fulfilled 또는 rejected이 될 때까지 기다리는 함수 - 비동기 처리 코드 앞에 붙임

 

C (Create) - POST 요청

POST: 새로운 리소스를 생성(create)할때 사용(예: 로그인,회원가입등 사용자가 생성한 파일을 서버에 업로드할때 사용)

//문법
import axios from "axios";
axios.post("url 주소", { 
	data 객체 
}, [config]);
//config에는 인증이나 쿼리파라미터등 네트워크요청에 필요한 다양한 옵션 추가가능

//사용예시
import axios from 'axios';

export const postLanternData = async ({ nickname, content, password, lanternColor }) => {
    try {
        const response = await axios.post("https://example.com/api/lanterns", {
            nickname: nickname,
            content: content,
            password: password,
            lanternColor: lanternColor
        });
        return response.data;
    } catch (error) {
        throw new Error("Failed to post lantern data");
    }
};

 

R (Read) - GET 요청

GET: 입력한 url에 존재하는 자원 조회 요청

//문법
axios.get(url, [,config])

import axios from 'axios';

const fetchData = async () => {
    try {
        const res = await axios.get("url 이름"); 
        if (res.status === 200) {
            console.log(res.data); 
        }
    } catch (err) {
        alert(err); 
    }
};
// 응답은 JSON 형태로 넘어옴

 

U (Update) - PUT / PATCH 요청

UPDATE: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용

import axios from 'axios';

const updateData = async () => {
    try {
        const res = await axios
        .put("url 이름", { //모든 데이터 수정 시 put
            userId: "likelion.com",
            userName: "멋쟁이"
        }); 
        if (res.status === 200) {
            console.log(res.data);
        }
    } catch (err) {
        alert(err);
    }
};

import axios from 'axios';

const updateData = async () => {
    try {
        const res = await axios
        .patch("url 이름", { // 일부 데이터 수정시 patch
            userId: "likelion.com",
        }); 
        if (res.status === 200) {
            console.log(res.data);
        }
    } catch (err) {
        alert(err);
    }
};

 

D (Delete) - DELETE 요청

Delete: REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용

import axios from 'axios';

const deleteData = async () => {
    try {
        const response = await axios.delete("/url 이름"); 
        if (response.status === 200) {
            console.log(response.data + "삭제되었습니다!!"); 
        }
    } catch (error) {
        alert(error);
    }
};