비동기 및 json-server

비동기 프로그래밍

: 자바스크립트는 비동기 작업을 통해 긴 작업이 완료될 때까지 다른 코드가 멈추지 않고 실행되도록 한다.

 

 

 

 

동기(Synchronous)

• 특징: 작업이 순차적으로 진행되며, 하나의 작업이 끝나야 다음 작업을 수행할 수 있다.
• 문제점: 네트워크 요청이나 파일 읽기 같은 작업이 오래 걸리면, 그 작업이 끝날 때까지 나머지 코드가 실행되지 않는다.

 

비동기(Asynchronous)

• 특징: 오래 걸리는 작업이 끝나길 기다리지 않고, 다른 작업을 먼저 진행할 수 있다.
• 장점: UI가 멈추지 않고 사용자에게 빠르게 반응할 수 있는 애플리케이션을 만들 수 있다.

 

 

 

 

 

비동기 작업을 동기적으로 처리하기!

async / await 문법: 자바스크립트에서 비동기 작업을 처리하기 위한 최신 문법이다!

 

기본적인 작동 원리

• async 키워드가 붙은 함수 내부에서만 await 를 사용할 수 있다.
• await 키워드는 작업이 모두 끝날 때까지 코드 실행을 일시 중지 시킨다. 작업이 끝날 때까지 기다린 이후 코드를 계속 실행한다.

 

코드 예시

async function fetchData() {
  try {
    const response = await axios.get("https://jsonplaceholder.typicode.com/todos/1"); // (1)
    console.log("Fetched Data:", response.data); // (2)
  } catch (error) {
    console.error("Error fetching data:", error); // (3)
  }
}

fetchData();

 

 

async / await 의 장점

• 코드 가독성: 비동기 코드를 동기 코드처럼 작성할 수 있어 가독성이 훨씬 좋아지고, 콜백 함수나 then / catch 체인을 사용할 때보다 코드 흐름이 직관적이다.
• 간편한 에러처리: try / catch 블록을 사용하여 비동기 작업에서 발생하는 에러를 쉽게 처리 가능하고, 콜백 함수나 프로미스 체인의 catch 메서드보다 더 간단하다.
• 중첩된 비동기 작업 처리: 여러 개의 비동기 작업을 연속적으로 처리할 때, async / await 는 중첩된 콜백(콜백 지옥)을 방지하고, 프로미스 페인보다도 더 간결하게 작성할 수 있다.

 

then / catch 와 비교

axios.get("https://jsonplaceholder.typicode.com/todos/1")
  .then((response) => {
    console.log(response.data);
  })

async function fetchData() {
  const response = await axios.get("https://jsonplaceholder.typicode.com/todos/1");
  console.log(response.data);  
}

fetchData();

 

 

 

 

 

 

 

 

 

 

 

json- server⭐⭐⭐⭐⭐

: REST API 서버를 간단히 설정하고 실행할 수 있는 도구이다.

 

주요기능

• 간단한 설정: JSON 파일만으로 전체 API 서버를 설정할 수 있다,
• 자동으로 CRUD 기능 제공: GET, POST, PUT/PATCH, DELETE 요청을 JSON 파일에 기반해 처리한다.
• 로컬 환경 개발: 서버나 데이터베이스 없이도 RESTful API를 사용할 수 있는 환경을 제공한다.

 

 

사용 방법

1. db.json 파일을 생성

db.json 파일은 자바스크립트랑 문법이 조금 다르기 때문에 주의해야 한다.

{
  "todos": [
    { "id": "1", "text": "Buy milk", "completed": false },
    { "id": "2", "text": "Clean the house", "completed": false },
    { "id": "3", "text": "Go for a run", "completed": false },
    { "id": "4", "text": "Finish homework", "completed": false },
    { "id": "5", "text": "Call mom", "completed": false },
    { "id": "6", "text": "Buy groceries", "completed": false },
    { "id": "7", "text": "Walk the dog", "completed": false },
    { "id": "8", "text": "Read a book", "completed": false },
    { "id": "9", "text": "Do laundry", "completed": false },
    { "id": "10", "text": "Write code", "completed": false }
  ]
}

 

2. json-server 설치

yarn add json-server

 

 

3. json-server 실행

yarn json-server db.json

 

4. 터미널에 뜨는 링크로 접속

 

 

5. fetch로 json-server CRUD 구현하기

 

READ(조회)

// GET 요청: 모든 Todo 항목을 조회
async function getTodos() {
  const response = await fetch('http://localhost:3000/todos'); // (1)
  const data = await response.json(); // (2)
  console.log(data); // (3)
}

getTodos();

 

 

CREATE(생성)

// POST 요청: 새로운 Todo 항목 추가
async function addTodo() {
  const response = await fetch('http://localhost:3000/todos', {
    method: 'POST', // (1)
    headers: {
      'Content-Type': 'application/json', // (2)
    },
    body: JSON.stringify({
      text: 'Learn fetch API',
      completed: false,
    }), // (3)
  });

  const newTodo = await response.json(); // (4)
}

addTodo();

 

 

UPDATE(수정)

// PATCH 요청: 특정 Todo 항목의 일부 데이터를 수정
async function toggleTodo(id, completed) {
  const response = await fetch(`http://localhost:3000/todos/${id}`, {
    method: 'PATCH', // (1)
    headers: {
      'Content-Type': 'application/json', // (2)
    },
    body: JSON.stringify({
      completed, // (3) 부분 업데이트: 완료 상태만 변경
    }),
  });

  const updatedTodo = await response.json(); // (4)
}

updateTodoPartial(1); // ID가 1인 Todo 항목의 일부 데이터 수정

 

 

DELETE(삭제)

// DELETE 요청: 특정 Todo 항목 삭제
async function deleteTodo(id) {
  const response = await fetch(`http://localhost:3000/todos/${id}`, {
    method: 'DELETE', // (1)
  }); 
}

deleteTodo(1); // ID가 1인 Todo 항목 삭제

 

 

 

 

 

 

 

6. axios로 CRUD 구성하기 (fetch보다 추천⭐⭐⭐⭐⭐)

 

axios 설치

yarn add axios

 

 

axios client 생성

import axios from 'axios';

// Axios 클라이언트 설정
const todoClient = axios.create({
  baseURL: 'http://localhost:3000/todos', // (1) 기본 URL 설정  
});

export default todoClient;

 

axios READ(조회)

import todoClient from './todoClient';

// GET 요청: 모든 Todo 항목 조회
async function getTodos() {
  const response = await todoClient.get('/');
  console.log(response.data);
}

getTodos();

 

 

axios CREATE(생성)

import todoClient from './todoClient';

// POST 요청: 새로운 Todo 항목 추가
async function addTodo() {
  const response = await todoClient.post('/', {
    text: 'Learn Axios with Client', 
    completed: false,                
  });
  console.log('New Todo Added:', response.data);
}

addTodo();

 

 

axios UPDATE(수정)

import todoClient from './todoClient';

// PATCH 요청: 특정 Todo 항목의 'completed' 값을 수정
async function toggleTodoCompleted(id, completed) {
  const response = await todoClient.patch(`/${id}`, {
    completed,
  });
  console.log('Todo Completed Status Updated:', response.data); // (2)
}

toggleTodoCompleted(1, true);

 

 

axiot DELETE(삭제)

import todoClient from './todoClient';

// DELETE 요청: 특정 Todo 항목 삭제
async function deleteTodo(id) {
  const response = await todoClient.delete(`/${id}`);
  console.log(`Todo with id ${id} deleted`); 
}

deleteTodo(1);