[ Next.js ] Axios

1. Metadata

페이지에 대한 정보를 브라우저나 검색엔진에게 알려주는 역할

html로 rendering될 때 head의 title과 meta를 생성하는 기능

---

• server component임 (client component: useState 등의 함수)
• page or layout에 metadata를 생성할 수 있다.
• 전역으로 app에 설정할 수 있고 local로 각 routing 마다 설정할 수 있다.

---

1. Metadata 종류

 

 

HTML의 <input>과 <textarea> 요소를 TypeScript로 다룰 때 정확한 타입을 지정하기 위한 용도

• app > layout > ,,,중첩돼서 들어감 > {children}
• HTMLINputElement / HTMLTextraElement

---

2. 타입 대상 HTML 태그 주요 속성

HTMLInputElement	<input />	.value, .checked, .type
HTMLTextAreaElement	<textarea />	.value, .rows, .readOnly 등

 

• 암기]

  className={`${!isEditMode ? styles.readonly : styles.input}`}
  

  구조 분해 할당: [state, setState]
  📌 useState는 배열을 반환해 → [현재값, 변경함수]
  
  const [isEditMode, setIsEditMode] = ...
  isEditMode: 현재 상태 값 (불리언 값, true 또는 false)
  
  setIsEditMode: 상태를 변경하는 함수
  예: setIsEditMode(true) 하면 isEditMode는 이제 true
  

const titleRef = useRef<HTMLInputElement>(null);
const authorRef = useRef<HTMLInputElement>(null);
const priceRef = useRef<HTMLInputElement>(null);
const describeRef = useRef<HTMLInputElement>(null);

---

2. Axios

직접 값을 넣어주던 UI와 달리 비동기적 방식으로 데이터를 불러와 주는 클라이언트이며

내부적으로는 Promise를 사용해 비동기 통신을 처리

 

Axios는 promise 기반의 HTTP 클라이언트로
브라우저와 Node.js 환경 모두에서 사용 가능 fetch보다 간단하고, 에러 처리도 더 직관적

 

• 변수 isEditMode : false readOnly, ture !readOnly "현재 상태가 편집 모드인지 아닌지 나타내는 boolean값"
• axios 의 메서드 get/ post/ then/ catch항목 GET POST

용도	서버에서 데이터 "가져오기"	서버에 데이터 "보내기"
데이터 위치	URL 쿼리 (예: ?name=dohee)	요청 body에 담김
예시 상황	게시글 목록 보기	게시글 작성하기
보안성	낮음 (주소창에 보임)	상대적으로 높음 (body에 감춰짐)

---

1. .then과 .catch 개념메서드 역할

.then()	요청이 "성공"했을 때 실행할 코드 작성
.catch()	요청이 "실패(에러)"했을 때 실행할 코드 작성

---

2. HTTP 메서드: GET vs POST

• 그 외의 메서드들메서드 역할 예시 상황 

  axios.get()	데이터 조회	게시글 목록 가져오기
  axios.post()	데이터 생성/등록	회원가입, 새 글 작성
  axios.put()	데이터 전체 수정	유저 정보 전체 수정
  axios.patch()	데이터 일부 수정	게시글 제목만 변경
  axios.delete()	데이터 삭제	게시글 삭제

• ✅ Axios에서 지원하는 주요 HTTP 메서드
• 비동기 통신 Ajax의 특징 중 하나로 데이터 응답을 기다리는 동안 화면은 계속 작동됨

---

3. Axios의 주요 특징

• GET, POST, PUT, DELETE 등 HTTP 메서드 지원
• JSON 자동 처리
• 요청과 응답에서 인터셉터 기능 제공
• async/await과 함께 쓰기 편리함

---

기본 예시]

// axios 사용을 위해 import
import axios from 'axios';

// GET 요청
axios.get('<https://jsonplaceholder.typicode.com/posts>')
  .then(response => {
    console.log(response.data); // 데이터 출력
  })
  .catch(error => {
    console.error('에러 발생:', error);
  });

---

3. async/await 개념

async/await는 비동기 처리를 더 깔끔하게 작성할 수 있도록 도와주는 문법

• 가독성도 좋고, 에러 처리도 try-catch로 깔끔

1. asyn 비동기 함수 정의
2. await Promise가 완료될 때까지 기다림

< 개념 요약 >

- async 함수 안에서만 await를 사용할 수 있음
- await는 Promise가 끝날 때까지 기다렸다가 결과를 반환해 줌
- 코드가 동기식처럼 읽히는 비동기 처리 방식이라 직관적임

---

async/await를 이용한 axios 예시]

import axios from 'axios';

async function fetchPosts() {
  try {
    const response = await axios.get(API_BASE_URL);
    // await로 서버 잠시 멈춤?
    console.log('데이터:', response.data);
  } catch (error) {
    console.error('에러 발생:', error);
  }
}

fetchPosts();

---

const axios = localAxios();
  const searchAllBooks = useCallback(async () => {}, []);