게시판 만들기 (1)

학습 목표

이 강의를 통해 React에서 데이터를 비동기적으로 가져오고 처리하는 방법을 깊이 이해하고, fetch API와 axios 라이브러리를 활용하여 실제 게시판 애플리케이션을 구축하는 데 필요한 기술을 습득합니다. 특히 useEffect 훅과 함께 비동기 통신을 구현하는 패턴을 익히고, async/await 문법을 사용하여 코드를 더욱 간결하고 가독성 있게 작성하는 방법을 배웁니다.

핵심 개념

• 비동기 통신: 서버와 통신하여 데이터를 주고받는 과정에서 발생하는 비동기 처리를 이해합니다. Promise 객체의 개념과 동작 방식을 학습하고, then/catch 구문을 활용하는 방법을 배웁니다.
• useEffect 훅: 컴포넌트가 마운트될 때, 특정 상태가 변경될 때 비동기 작업을 수행하는 방법을 배웁니다. 의존성 배열의 중요성과 클린업 함수의 역할도 함께 학습합니다.
• fetch API: 브라우저 내장 API를 사용하여 HTTP 요청을 보내고 응답을 처리하는 방법을 배웁니다. 응답을 JSON으로 파싱하고 에러를 처리하는 과정을 실습합니다.

  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('There has been a problem with your fetch operation:', error));
  

  복사
• axios 라이브러리: 외부 라이브러리 axios를 설치하고 사용하여 HTTP 요청을 보내는 방법을 배웁니다. fetch와 달리 JSON 파싱이 자동으로 이루어지고, 더 간결한 문법을 제공하는 장점을 이해합니다.

  import axios from 'axios';
  
  axios.get('https://jsonplaceholder.typicode.com/todos/1')
    .then(response => {
      console.log(response.data);
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
  

  복사
• async/await: Promise 기반의 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 문법입니다. try...catch 구문과 함께 사용하여 에러 처리를 더욱 직관적으로 만듭니다.

  async function fetchData() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('There has been a problem with your fetch operation:', error);
    }
  }
  fetchData();
  

  복사
• REST API: 서버와 통신할 때 따르는 규칙인 RESTful API의 기본 원칙(URL은 자원, 메소드는 행위)을 이해합니다. 프론트엔드 라우팅과 백엔드 API 설계의 차이점을 인지합니다.
• React Router: 페이지 전환을 위한 react-router-dom 라이브러리를 설치하고, BrowserRouter, Routes, Route, Link 컴포넌트를 사용하여 기본적인 페이지 라우팅을 설정하는 방법을 배웁니다.
• Styled Components: 컴포넌트 기반 스타일링을 위해 styled-components 라이브러리를 활용합니다. 컴포넌트별 스타일을 분리하여 관리하고, 재사용 가능한 스타일 컴포넌트를 만드는 방법을 실습합니다.

공부 방향성

이 강의를 시청하기 전에 React의 기본 컴포넌트 구조와 상태 관리(useState)에 대한 이해가 있다면 학습에 도움이 됩니다. 강의 시청 후에는 json-placeholder와 같은 더미 API를 활용하여 게시글 목록 조회, 상세 조회, 작성, 수정, 삭제 기능을 직접 구현해보는 연습을 하는 것이 좋습니다. 또한, react-router-dom과 styled-components를 더 깊이 학습하여 복잡한 UI/UX를 가진 웹 애플리케이션을 설계하는 능력을 키울 수 있습니다.