2024.12.03

카테고리 없음

2024.12.03

zayn 2024. 12. 4. 21:05

자 오늘도 코드 체크리스트 분석해보기

짧게 쓰는 이유는 앉질 못해서 누워서 배위에서 써야하기때문....

Q1. axios를 사용하여 회원가입과 로그인 요청을 보내는 함수를 간단히 작성해보세요.

A :

회원가입 요청 함수

import axios from 'axios';

const signUp = async (email, password) => {
  try {
    const response = await axios.post('https://example.com/api/signup', {
      email,
      password,
    });
    console.log('회원가입 성공:', response.data);
    alert('회원가입이 완료되었습니다.');
  } catch (error) {
    console.error('회원가입 실패:', error.response?.data || error.message);
    alert('회원가입 실패! 다시 시도해주세요.');
  }
};

로그인 요청 함수

const login = async (email, password) => {
  try {
    const response = await axios.post('https://example.com/api/login', {
      email,
      password,
    });
    console.log('로그인 성공:', response.data);
    alert('로그인이 완료되었습니다.');
    return response.data.accessToken; // 로그인 성공 시 반환된 토큰
  } catch (error) {
    console.error('로그인 실패:', error.response?.data || error.message);
    alert('로그인 실패! 다시 시도해주세요.');
  }
};

사용 예시

// 예: 버튼 클릭 이벤트에서 사용
const handleSignUp = () => {
  const email = 'test@example.com';
  const password = 'password123';
  signUp(email, password);
};

const handleLogin = async () => {
  const email = 'test@example.com';
  const password = 'password123';
  const token = await login(email, password);
  console.log('받은 토큰:', token);
};

설명

axios.post:
- axios의 post 메서드를 사용해 서버에 데이터를 전송합니다.
- 첫 번째 매개변수는 API의 URL이고, 두 번째 매개변수는 전송할 데이터 객체입니다.
try-catch 블록:
- 요청 성공 시 try 블록에서 데이터를 처리하고, 실패 시 catch 블록에서 에러를 처리합니다.
응답 데이터:
- 서버에서 반환된 데이터를 response.data를 통해 확인할 수 있습니다.

Q2. axios 를 사용해 GET 요청을 보내는 코드를 간단히 작성해보세요.

GET 요청 함수

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://example.com/api/data'); // API URL
    console.log('데이터 가져오기 성공:', response.data);
  } catch (error) {
    console.error('데이터 가져오기 실패:', error.response?.data || error.message);
  }
};

사용 예시

// 컴포넌트 마운트 시 데이터 가져오기
import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    fetchData();
  }, []);

  return <div>데이터를 가져오는 중...</div>;
};

export default App;

설명

axios.get:
- GET 요청을 보내기 위해 사용됩니다.
- 첫 번째 매개변수로 API의 URL을 전달합니다.
response.data:
- 서버에서 반환된 데이터를 확인할 수 있습니다.
에러 처리:
- try-catch 블록을 사용해 에러를 처리하며, 실패 시 콘솔에 에러 메시지를 출력합니다.

Q3. axios 인스턴스를 사용해 API요청(GET)을 보내는 방법을 간단히 작성해 보세요.

1. axios 인스턴스 생성

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'https://example.com/api', // 모든 요청의 기본 URL
  timeout: 5000, // 요청 제한 시간 (5초)
  headers: {
    'Content-Type': 'application/json', // 기본 헤더 설정
  },
});

2. GET 요청 보내기

const fetchData = async () => {
  try {
    const response = await apiClient.get('/data'); // '/data'는 baseURL에 추가됨
    console.log('데이터 가져오기 성공:', response.data);
  } catch (error) {
    console.error('데이터 가져오기 실패:', error.response?.data || error.message);
  }
};

3. 사용 예시

import React, { useEffect } from 'react';

const App = () => {
  useEffect(() => {
    fetchData();
  }, []);

  return <div>데이터를 가져오는 중...</div>;
};

export default App;

설명

axios.create():
- 공통 설정을 가진 axios 인스턴스를 생성합니다.
- baseURL, timeout, headers와 같은 기본값을 설정할 수 있습니다.
인스턴스 사용:
- apiClient.get('/data')를 호출하면 실제 요청은 https://example.com/api/data로 보내집니다.
장점:
- 재사용성: 같은 설정으로 여러 API 요청을 처리할 수 있습니다.
- 유지보수성: 기본 설정을 변경해야 할 경우 한 번만 수정하면 됩니다.

Q4. Promise가 무엇인지 작성하시고, Promise의 응답 및 에러는 어떻게 처리하는지 예시코드를 작성해보세요.

Promise란?

Promise는 비동기 작업의 완료 또는 실패를 나타내는 자바스크립트 객체입니다. 작업의 결과는 나중에 제공되며, 이를 처리하기 위해 then, catch, finally 메서드가 사용됩니다.

Promise는 세 가지 상태를 가집니다:

pending (대기): 작업이 아직 완료되지 않은 상태.
fulfilled (이행): 작업이 성공적으로 완료된 상태.
rejected (거부): 작업이 실패한 상태.

Promise 사용법

기본 문법

const promise = new Promise((resolve, reject) => {
  // 비동기 작업 수행
  const success = true; // 작업 성공 여부
  if (success) {
    resolve('작업 성공!'); // 성공 시 호출
  } else {
    reject('작업 실패!'); // 실패 시 호출
  }
});

Promise 응답 및 에러 처리

promise
  .then((result) => {
    console.log(result); // resolve에서 전달된 값 출력
  })
  .catch((error) => {
    console.error(error); // reject에서 전달된 에러 출력
  })
  .finally(() => {
    console.log('작업이 완료되었습니다.'); // 성공 또는 실패와 관계없이 실행
  });

실제 예제: 비동기 데이터 가져오기

const fetchData = () => {
  return new Promise((resolve, reject) => {
    const success = true; // 성공 여부 (테스트용)
    setTimeout(() => {
      if (success) {
        resolve('데이터를 성공적으로 가져왔습니다.');
      } else {
        reject('데이터를 가져오는 데 실패했습니다.');
      }
    }, 2000); // 2초 후 결과 반환
  });
};

// Promise 처리
fetchData()
  .then((data) => {
    console.log(data); // 성공 메시지 출력
  })
  .catch((error) => {
    console.error(error); // 에러 메시지 출력
  })
  .finally(() => {
    console.log('요청 종료'); // 항상 실행
  });

설명

resolve(value):
- 작업이 성공했을 때 호출되며, then 블록에서 값을 처리할 수 있습니다.
reject(reason):
- 작업이 실패했을 때 호출되며, catch 블록에서 에러를 처리합니다.
finally:
- 작업이 성공 또는 실패했든 관계없이 항상 실행됩니다(예: 로딩 상태 종료).

실제 활용 예제: axios와 함께 사용

import axios from 'axios';

const fetchData = () => {
  return axios.get('https://jsonplaceholder.typicode.com/posts');
};

fetchData()
  .then((response) => {
    console.log('데이터 가져오기 성공:', response.data); // 성공 시 데이터 출력
  })
  .catch((error) => {
    console.error('데이터 가져오기 실패:', error.message); // 에러 메시지 출력
  })
  .finally(() => {
    console.log('요청 종료'); // 항상 실행
  });

Q5. API 응답에 따라 컴포넌트 상태를 업데이트하는 방법은 어떻게 구현 할 수 있을지 간단히 적어보세요.

1. 상태(state) 설정

React의 useState 훅을 사용하여 데이터를 저장할 상태를 정의합니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]); // 상태 변수 정의
  const [loading, setLoading] = useState(true); // 로딩 상태
  const [error, setError] = useState(null); // 에러 상태

2. API 호출 함수

API 요청을 보내는 비동기 함수를 작성합니다. axios 또는 fetch를 사용해 데이터를 가져옵니다.

  const fetchData = async () => {
    try {
      const response = await axios.get('https://api.example.com/data');
      setData(response.data); // 응답 데이터를 상태에 저장
      setLoading(false); // 로딩 상태 업데이트
    } catch (err) {
      setError(err); // 에러 상태 업데이트
      setLoading(false); // 로딩 상태 종료
    }
  };

3. useEffect로 API 호출

useEffect를 사용해 컴포넌트가 마운트되었을 때 API 호출을 실행합니다.

  useEffect(() => {
    fetchData(); // 컴포넌트가 렌더링될 때 API 호출
  }, []);

4. 상태에 따라 UI 렌더링

API 응답에 따라 로딩 중, 성공, 실패 상태를 UI에 반영합니다.

  if (loading) return <p>로딩 중...</p>; // 로딩 상태
  if (error) return <p>에러 발생: {error.message}</p>; // 에러 상태

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

동작 요약

초기 상태 설정:
- 데이터를 저장할 상태 변수와 로딩 및 에러 상태를 정의합니다.
API 호출:
- axios 또는 fetch로 데이터를 가져오고, 응답에 따라 상태를 업데이트합니다.
상태에 따라 UI 업데이트:
- loading, error, data 상태를 기반으로 조건부 렌더링을 수행합니다.

장점

비동기 데이터 가져오기를 직관적으로 관리할 수 있습니다.
에러와 로딩 상태를 명확하게 처리할 수 있습니다.
상태 변화에 따라 React의 자동 리렌더링으로 UI가 즉시 업데이트됩니다.

Q6. 이번과제에서 JSON Server를 이용하셨을 텐데요. 이게 무엇이며, 모의 REST API 생성은 어떻게 하는지 작성해보세요.

JSON Server란?

JSON Server는 간단한 JSON 파일을 기반으로 빠르게 모의(Mock) REST API를 생성할 수 있는 개발 도구입니다. 이는 프론트엔드 개발에서 실제 백엔드가 구현되지 않은 상태에서 API와 상호작용을 테스트하거나 UI를 빠르게 개발하기 위해 자주 사용됩니다.

JSON Server의 주요 특징

간단한 설치 및 사용:
- JSON 파일만으로 완전한 CRUD(Create, Read, Update, Delete) API를 제공합니다.
RESTful 엔드포인트 제공:
- GET, POST, PUT, DELETE 요청을 즉시 사용할 수 있습니다.
데이터베이스 시뮬레이션:
- JSON 파일을 데이터베이스처럼 사용합니다.
미들웨어 및 커스터마이징 가능:
- 추가적인 요청 처리 로직을 커스터마이징할 수 있습니다.

JSON Server 설치

JSON Server 설치:
npm install -g json-server
프로젝트 디렉토리에 db.json 파일 생성:
{ "posts": [ { "id": 1, "title": "첫 번째 게시글", "author": "Alice" }, { "id": 2, "title": "두 번째 게시글", "author": "Bob" } ], "comments": [ { "id": 1, "body": "첫 번째 댓글", "postId": 1 } ], "profile": { "name": "John Doe" } }

JSON Server 실행

JSON Server 시작:
json-server --watch db.json --port 3000
API 엔드포인트 자동 생성:
- GET /posts → 모든 게시글 가져오기
- GET /posts/1 → ID가 1인 게시글 가져오기
- POST /posts → 새 게시글 추가
- PUT /posts/1 → ID가 1인 게시글 수정
- DELETE /posts/1 → ID가 1인 게시글 삭제

모의 REST API 생성 예시

1. 데이터 가져오기(GET)

import axios from 'axios';

const fetchPosts = async () => {
  try {
    const response = await axios.get('http://localhost:3000/posts');
    console.log('게시글 데이터:', response.data);
  } catch (error) {
    console.error('데이터 가져오기 실패:', error.message);
  }
};

fetchPosts();

2. 데이터 추가하기(POST)

const addPost = async () => {
  try {
    const response = await axios.post('http://localhost:3000/posts', {
      title: '새로운 게시글',
      author: 'Charlie',
    });
    console.log('새로운 게시글 추가 성공:', response.data);
  } catch (error) {
    console.error('게시글 추가 실패:', error.message);
  }
};

addPost();

3. 데이터 수정하기(PUT)

const updatePost = async () => {
  try {
    const response = await axios.put('http://localhost:3000/posts/1', {
      title: '수정된 게시글',
      author: 'Alice',
    });
    console.log('게시글 수정 성공:', response.data);
  } catch (error) {
    console.error('게시글 수정 실패:', error.message);
  }
};

updatePost();

4. 데이터 삭제하기(DELETE)

const deletePost = async () => {
  try {
    await axios.delete('http://localhost:3000/posts/1');
    console.log('게시글 삭제 성공');
  } catch (error) {
    console.error('게시글 삭제 실패:', error.message);
  }
};

deletePost();

JSON Server의 장점

빠른 프로토타이핑:
- 복잡한 백엔드 설정 없이 UI와 API 연동을 빠르게 테스트할 수 있습니다.
간단한 설정:
- 단순한 JSON 파일만 준비하면 실행 가능합니다.
유연성:
- 커스터마이징 가능한 미들웨어와 다양한 옵션 제공.
로컬 개발 환경 최적화:
- 프론트엔드 개발 중 실제 서버처럼 동작하므로 테스트에 용이합니다.

결론

JSON Server는 실제 백엔드 개발 전 UI와 API 통합 테스트를 빠르고 효율적으로 수행할 수 있도록 도와주는 강력한 도구입니다. 위의 방법으로 JSON Server를 설정하고 API를 활용하여 개발 생산성을 높인다.

오늘은 여기까지 내일 마무리!

현재글2024.12.03

제인의 블로그

이것저것 요것조것 작성중

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

2024.12.03

Q1. axios를 사용하여 회원가입과 로그인 요청을 보내는 함수를 간단히 작성해보세요.

회원가입 요청 함수

로그인 요청 함수

사용 예시

설명

Q2. axios 를 사용해 GET 요청을 보내는 코드를 간단히 작성해보세요.

GET 요청 함수

사용 예시

설명

Q3. axios 인스턴스를 사용해 API요청(GET)을 보내는 방법을 간단히 작성해 보세요.

1. axios 인스턴스 생성

2. GET 요청 보내기

3. 사용 예시

설명

Q4. Promise가 무엇인지 작성하시고, Promise의 응답 및 에러는 어떻게 처리하는지 예시코드를 작성해보세요.

Promise란?

Promise 사용법

기본 문법

Promise 응답 및 에러 처리

실제 예제: 비동기 데이터 가져오기

설명

실제 활용 예제: axios와 함께 사용

Q5. API 응답에 따라 컴포넌트 상태를 업데이트하는 방법은 어떻게 구현 할 수 있을지 간단히 적어보세요.

1. 상태(state) 설정

2. API 호출 함수

3. useEffect로 API 호출

4. 상태에 따라 UI 렌더링

동작 요약

장점

Q6. 이번과제에서 JSON Server를 이용하셨을 텐데요. 이게 무엇이며, 모의 REST API 생성은 어떻게 하는지 작성해보세요.

JSON Server란?

JSON Server의 주요 특징

JSON Server 설치

JSON Server 실행

모의 REST API 생성 예시

1. 데이터 가져오기(GET)

2. 데이터 추가하기(POST)

3. 데이터 수정하기(PUT)

4. 데이터 삭제하기(DELETE)

JSON Server의 장점

결론

'카테고리 없음'의 다른글

티스토리툴바