💡 Props(프롭스)는 컴포넌트에 전달하는 값(데이터)을 의미해. 즉, 부모 컴포넌트에서 자식 컴포넌트로 값을 전달할 때 사용하는 것!

🔍 1️⃣ Props 타입 정의란?

📌 Props 타입 정의를 하는 이유

코드를 더 명확하게 작성할 수 있음 (어떤 값이 들어와야 하는지 예측 가능) 잘못된 데이터가 전달되는 걸 방지할 수 있음 (예: 숫자여야 하는데 문자열이 들어오는 경우 방지) 예제: Props 타입을 정의하지 않은 경우

const Button = (props) => {
  return <button>{props.label}</button>;
};

export default Button;

🚨 문제점:

props.label이 문자열일지, 숫자일지, 객체일지 명확하지 않음 label이 필수인지, 선택인지 불분명

🔍 2️⃣ Props 타입을 정의하는 방법

✅ TypeScript에서는 interface 또는 type을 사용해 Props의 타입을 정의할 수 있어!

📌 interface를 사용한 Props 타입 정의

interface ButtonProps {
  label: string; // ✅ label은 문자열이어야 함
  onClick: () => void; // ✅ onClick은 함수여야 함
}

이제 위에서 만든 Button 컴포넌트에 적용해보자!

const Button = ({ label, onClick }: ButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};

export default Button;

✅ 이렇게 하면, label이 string이어야 하고, onClick이 함수여야 함을 보장할 수 있어! 💡 이제 onClick에 숫자를 넣거나 label을 number로 설정하면 TypeScript가 오류를 잡아줌.

🔍 3️⃣ BottomSheetProps 이해하기

아까 본 BottomSheet.tsx에서도 Props 타입을 정의했었지? 다시 보면서 이해해보자!

interface ButtomSheetProps {
  onClose: () => void;  // ✅ 모달을 닫는 함수 (반환값 없음)
  options: {            // ✅ 버튼 목록 (배열)
    title: string;      // 버튼에 표시될 텍스트
    onClick: () => void; // 버튼을 클릭했을 때 실행할 함수
    type?: string;      // (선택적) 버튼 스타일 ('primary', 'danger' 등)
  }[];
}

✅ BottomSheetProps를 사용한 컴포넌트

const ButtomSheet = ({ onClose, options }: ButtomSheetProps) => {
  return (
    <div>
      <button onClick={onClose}>닫기</button>
      {options.map((option, index) => (
        <button key={index} onClick={option.onClick}>
          {option.title}
        </button>
      ))}
    </div>
  );
};

🚀 이제 onClose는 반드시 함수여야 하고, options는 배열 형태의 데이터여야 함을 보장할 수 있어!

📌 최종 정리

먼저, NextAuth 설치

pnpm add next-auth

1️⃣ NextAuth 설정 파일 (app/api/auth/[...nextauth].ts)

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

✔️ GoogleProvider, FacebookProvider → 소셜 로그인 Provider 추가 ✔️ callbacks.session → 로그인 후 세션 정보를 설정 ✔️ NEXTAUTH_SECRET → 보안을 위한 암호화 키

2️⃣ NextAuth 설정 파일 (app/api/auth/[...nextauth].ts)

"use client";

import { signIn } from "next-auth/react";

const LoginButton = () => {
  return (
    <div className="flex flex-col gap-2">
      <button
        onClick={() => signIn("google")}
        className="bg-red-500 text-white px-4 py-2 rounded"
      >
        Google 로그인
      </button>
      <button
        onClick={() => signIn("facebook")}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Facebook 로그인
      </button>
    </div>
  );
};

export default LoginButton;

✔️ signIn("google") → 구글 로그인 실행 ✔️ signIn("facebook") → 페이스북 로그인 실행

3️⃣ 로그인 페이지 (app/(auth)/login/page.tsx)

"use client";

import LoginButton from "@src/components/LoginButton";

const LoginPage = () => {
  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <h1 className="text-2xl font-bold mb-4">로그인</h1>
      <LoginButton />
    </div>
  );
};

export default LoginPage;

4️⃣ 로그인 후 대시보드 페이지 (app/dashboard/page.tsx)

"use client";

import { useSession, signOut } from "next-auth/react";

const Dashboard = () => {
  const { data: session } = useSession();

  if (!session) {
    return <p>로그인이 필요합니다.</p>;
  }

  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <h1 className="text-2xl font-bold">환영합니다, {session.user?.name}님!</h1>
      <button
        onClick={() => signOut()}
        className="mt-4 bg-gray-500 text-white px-4 py-2 rounded"
      >
        로그아웃
      </button>
    </div>
  );
};

export default Dashboard;

✔️ useSession() → 현재 로그인 상태 확인 ✔️ signOut() → 로그아웃 기능

5️⃣ 환경변수 설정 (.env.local)

GOOGLE_CLIENT_ID=구글에서_발급받은_client_id
GOOGLE_CLIENT_SECRET=구글에서_발급받은_client_secret
FACEBOOK_CLIENT_ID=페이스북에서_발급받은_client_id
FACEBOOK_CLIENT_SECRET=페이스북에서_발급받은_client_secret
NEXTAUTH_SECRET=임의의_랜덤_문자열
NEXTAUTH_URL=http://localhost:3000

✔️ 환경변수를 설정해 보안 강화 ✔️ NEXTAUTH_SECRET → 보안 강화를 위해 필수

웹사이트나 앱에서 별도의 회원가입 없이 기존의 소셜 계정을 사용하여 로그인할 수 있게 하는 기능이야.

🔍 소셜 로그인 Provider의 개념

1. 사용자(User) → 로그인 버튼 클릭
2. 웹사이트(Client) → 해당 소셜 로그인 Provider로 인증 요청
3. 소셜 로그인 Provider(Google, Facebook 등) → 사용자의 정보를 확인한 후, 액세스 토큰(access token) 발급
4. 웹사이트(Client) → 발급된 토큰을 받아 사용자 인증을 완료하고, 로그인 처리

👉 소셜 로그인 Provider는 패스트푸드점의 키오스크 같은 역할이야!

• 직접 주문(회원가입)하지 않고, 기존 계정(카드)로 바로 결제(로그인) 가능
• 여러 브랜드(구글, 페이스북 등)를 지원
• 인증이 끝나면 음식(로그인 정보)이 제공됨

🔍 소셜 로그인 Provider의 핵심 개념

• OAuth 2.0 → 로그인 과정에서 토큰(Token) 을 이용한 인증 방식
• Access Token → 로그인 후 발급되는 사용자 인증 정보
• Refresh Token → Access Token이 만료되면 재발급하는 역할
• Redirect URI → 로그인 후 사용자를 다시 보낼 웹사이트 주소
• Scope(권한 요청) → 로그인 시, 사용자의 어떤 정보를 가져올지 결정

🔍 소셜 로그인 Provider의 동작 방식

(예) 구글 로그인, NextAuth 사용

1. 구글 로그인 버튼 클릭
2. OAuth 2.0 인증 요청 → 사용자가 로그인 허용하면, Google이 Access Token을 발급
3. 발급된 Access Token을 서버로 전송
4. 서버에서 토큰을 검증 후, 사용자 로그인 처리
5. 로그인 완료 후, 홈페이지로 리디렉트

🔍 NextAuth에서 Provider 설정 예제

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

✔️ clientId, clientSecret → 구글 콘솔에서 발급받은 키 ✔️ callbacks.session → 로그인 후 세션 정보를 설정

대표적인 DBMS 6개를 쉽고 빠르게 알아보자!

1️⃣ MySQL (마이SQL)

✔️ 가장 많이 쓰이는 무료 데이터베이스 ✔️ 속도가 빠르고, 웹사이트, 앱에서 많이 사용됨 ✔️ 유명한 사용처: 네이버, 카카오, 유튜브, 페이스북 일부

📌 예시: 네이버에 가입하면 내 정보(이름, 이메일, 비밀번호 등)를 저장할 곳이 필요해. 👉 이런 사용자 정보를 저장하는 데 MySQL이 사용될 수 있어!

2️⃣ MariaDB (마리아DB)

✔️ MySQL과 거의 똑같지만, 더 자유롭게 쓸 수 있음 ✔️ MySQL이 오라클(Oracle)에 인수된 후, 오픈소스로 만든 DB ✔️ 기업에서도 많이 사용함

📌 예시: 카카오톡 같은 서비스가 있고, MySQL을 쓰던 회사가 비용 부담 없이 더 자유롭게 운영하고 싶다면? 👉 MariaDB로 바꾸면 됨! 기능이 거의 동일해.

3️⃣ PostgreSQL (포스트그레SQL)

✔️ 데이터를 정밀하게 관리해야 할 때 사용 ✔️ 데이터를 안전하게 보호하는 기능이 뛰어남 ✔️ 은행, 금융, 연구소에서 많이 사용 ✔️ 무료인데도 강력한 기능 제공

📌 예시: 은행에서 고객의 계좌 잔액을 정확하게 관리해야 해. 👉 PostgreSQL은 실수 없이 데이터를 저장하고 보호하는 데 강점이 있어!

4️⃣ Microsoft SQL Server (MS SQL)

✔️ 마이크로소프트(Microsoft)에서 만든 DB ✔️ 윈도우 환경에서 최적화되어 있음 ✔️ 기업에서 많이 사용하며, 보안이 강력함

📌 예시: 회사 내부에서 직원 정보, 매출 데이터를 관리하려면? 👉 MS SQL이 많이 사용됨. 특히 MS Office(엑셀, 워드)와도 연동이 쉬움!

5️⃣ MongoDB (몽고DB)

✔️ 엑셀처럼 칸(표)으로 데이터를 저장하지 않고, JSON 형태로 저장 ✔️ 빠르게 변경할 수 있는 데이터에 적합 ✔️ SNS, 쇼핑몰, 게임 데이터에 많이 사용됨

📌 예시: 인스타그램 같은 SNS에서 게시글, 댓글, 좋아요 수가 계속 바뀌지? 👉 이런 데이터를 MongoDB가 빠르게 저장하고 관리할 수 있어.

6️⃣ SQLite (에스큐라이트)

✔️ 가장 가벼운 DB, 설치 없이 파일 하나로 동작 ✔️ 스마트폰, 작은 앱, 소규모 프로젝트에서 사용됨 ✔️ 네트워크 연결 없이 단독으로 동작

📌 예시: 휴대폰 앱에서 메모 앱 같은 간단한 기능을 만들 때, 서버가 없어도 저장이 필요할 때! 👉 SQLite는 별도 서버 없이 파일 하나로 DB를 쓸 수 있음.

** 🚀 진짜 쉬운 설명**

🗂 엑셀처럼 칸으로 정리할 거면? → MySQL, PostgreSQL, MS SQL 📄 자유롭게 저장하고 싶다면? → MongoDB 📱 작은 앱에서 쓴다면? → SQLite

• 웹사이트, 앱 → MySQL, MariaDB
• 기업용 데이터, 금융 서비스 → PostgreSQL, MS SQL
• SNS, 쇼핑몰, 게임 → MongoDB
• 모바일 앱, 간단한 데이터 저장 → SQLite

데이터베이스 한눈에 비교!

** ✏️ 더 알아가기 **

1️⃣ DBMS가 필요한 이유는?

✅ 데이터 정리 & 관리 → 파일로 저장하면 관리하기 어려움 ✅ 빠른 검색 & 수정 → 필요한 정보를 빠르게 찾고, 수정 가능 ✅ 동시 접속 & 보안 → 여러 사람이 동시에 사용할 수 있고, 보안 설정 가능 ✅ 데이터 무결성 보장 → 잘못된 데이터가 들어가는 걸 방지

예를 들어, 📌 웹사이트 회원 정보를 파일에 저장하면? → 파일이 커지고, 검색이 느려짐 📌 DBMS를 사용하면? → 데이터가 체계적으로 정리되고, 빠르게 찾을 수 있음!

2️⃣ DBMS의 기본 개념

DBMS를 이해하려면, 데이터가 어떻게 저장되는지 먼저 알아야 해.

📌 1. 데이터베이스 (Database) ✔️ 여러 개의 테이블(표)로 구성된 데이터 저장 공간 ✔️ 하나의 웹사이트(서비스)는 하나의 데이터베이스를 가짐

💡 예시:

KINS_DB (KiNS 서비스의 데이터베이스) E_COMMERCE_DB (쇼핑몰 데이터베이스)

📌 2. 테이블 (Table)

✔️ 데이터가 저장되는 표 형태의 구조 ✔️ 행(Row) = 데이터 한 줄, 열(Column) = 속성(이름, 나이, 이메일 등)

💡 예시: 회원 테이블(User Table)

📌 3. SQL (Structured Query Language)

✔️ 데이터베이스와 소통하는 언어 ✔️ 데이터를 추가, 수정, 삭제, 조회하는 데 사용됨

💡 예시

-- 회원 테이블에서 모든 데이터 조회
SELECT * FROM users;

-- 회원 추가
INSERT INTO users (이름, 나이, 이메일) VALUES ('박철수', 28, 'park@example.com');

-- 회원 정보 수정
UPDATE users SET 나이 = 29 WHERE ID = 1;

-- 회원 삭제
DELETE FROM users WHERE ID = 2;

3️⃣ DBMS의 주요 기능

💡 트랜잭션(Transaction)이란? ✅ 데이터의 일관성을 유지하기 위해 작업 단위를 묶어서 처리하는 것 ✅ 중간에 오류가 나면 모두 취소(ROLLBACK) 되거나, ✅ 성공하면 완전히 저장(COMMIT) 됨.

예시: 은행 송금

A의 계좌에서 100만 원을 출금 B의 계좌에 100만 원을 입금 ✔️ 둘 다 성공해야 완료! (트랜잭션이 보장됨) ✔️ 하나라도 실패하면? 다시 원상복구(Rollback)

** 🚀 진짜 쉬운 설명**

🔹 RDBMS(MySQL, PostgreSQL 등) = 엑셀 ➡️ 칸(테이블) 안에 데이터를 정리해서 저장 ➡️ 모든 데이터가 체계적이고 명확한 관계를 가짐

🔹 NoSQL(MongoDB, Redis 등) = 포스트잇 ➡️ 자유롭게 데이터를 붙이고 수정 가능 ➡️ 빠르게 저장하고 변경해야 할 때 유용

데이터베이스는 우리가 사용하는 모든 웹 서비스의 핵심이야! 🚀 DBMS를 이해하면, 데이터를 더 효율적으로 다룰 수 있어! 💡

모바일 네비게이션에 최적화된 단계별 상태 관리 라이브러리야. @use-funnel

** 📍핵심 설명**

• useFunnel은 **엘리베이터 버튼이라고 생각해봐! 단계를 배열(steps)로 관리하고, nextStep()과 previousStep()을 사용하여 손쉽게 단계 이동을 할 수 있도록 도와주는 훅이야.
  - **useFunnel의 핵심 기능** - 여러 단계를 배열로 저장 (steps) - nextStep()을 호출하면 다음 단계로 이동 - previousStep()을 호출하면 이전 단계로 이동 - 현재 단계를 step으로 반환 (step === steps[currentIndex]) - 마지막 단계(isLastStep), 첫 번째 단계(isFirstStep) 여부 확인 가능

🔍 use-funnel의 사용 예제

1️⃣ use-funnel 설치

2️⃣ useFunnel.ts 생성 (hooks/useFunnel.ts)

import { useState } from 'react';

const useFunnel = (steps: string[]) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  const nextStep = () => {
    setCurrentIndex((prev) => (prev < steps.length - 1 ? prev + 1 : prev));
  };

  const previousStep = () => {
    setCurrentIndex((prev) => (prev > 0 ? prev - 1 : prev));
  };

  return {
    step: steps[currentIndex],
    nextStep,
    previousStep,
    isLastStep: currentIndex === steps.length - 1,
    isFirstStep: currentIndex === 0,
  };
};

export default useFunnel;

🙌 단계를 배열(steps)로 관리, nextStep(), previousStep()을 이용하여 이동

3️⃣ SignupPage.tsx에서 useFunnel 적용

import useFunnel from '@src/hooks/useFunnel';
import AgreementList from '@src/components/AgreementList';
import NameInputStep from '@src/components/NameInputStep';
import PhoneInputStep from '@src/components/PhoneInputStep';
import SignupSuccessPage from '@src/components/SignupSuccessPage';

const SignupPage = () => {
  const { step, nextStep, previousStep } = useFunnel([
    'agreement',
    'name-input',
    'phone-input',
    'success'
  ]);

  return (
    <div>
      {step === 'agreement' && <AgreementList onNext={nextStep} />}
      {step === 'name-input' && <NameInputStep onNext={nextStep} />}
      {step === 'phone-input' && <PhoneInputStep onNext={nextStep} />}
      {step === 'success' && <SignupSuccessPage onNext={nextStep} />}

      {/* 이전 단계 버튼 */}
      {step !== 'agreement' && (
        <button onClick={previousStep} className="mt-4 px-4 py-2 bg-gray-300 rounded">
          이전 단계
        </button>
      )}
    </div>
  );
};

export default SignupPage;

** 🚀 진짜 쉬운 설명**

useFunnel 적용 순서 1️⃣ 프로젝트 구조 설정 → hooks/, components/, pages/ 폴더 구성 2️⃣ 커스텀 훅 useFunnel.ts 생성 → 단계별 관리 (nextStep(), previousStep()) 3️⃣ SignupPage.tsx에서 useFunnel 사용 → 단계별 UI 적용 4️⃣ 단계 이동 로직 추가 → 버튼 클릭 시 nextStep() & previousStep() 실행

** ✏️ 더 알아가기 **

• 어떤 경우에 어떤 방식이 좋을까?

1️⃣ useState가 더 적합한 경우 모든 체크박스가 한 화면에서 한 번에 보여야 하는 경우 필수/선택 항목이 단계별로 구분될 필요가 없는 경우 체크박스를 사용자가 자유롭게 조작할 수 있어야 하는 경우

2️⃣ useFunnel이 더 적합한 경우 필수 항목을 먼저 체크하고, 이후 선택 항목을 보여줘야 하는 경우 체크박스를 단계를 나눠서 점진적으로 사용자에게 보여주고 싶은 경우 폼(회원가입, 동의 과정)이 여러 단계로 나뉘어 있는 경우

✔️ useState : 체크박스를 항상 한 화면에 보이게 하고, 개별적으로 체크할 때 적합 ✔️ useFunnel : 체크 단계를 진행하면서 필요한 체크박스만 보이게 하고 싶을 때 적합

체크박스가 한 번에 다 보여야 하면 useState, 단계별로 나눠서 진행해야 하면 useFunnel을 선택하면 돼!

• 한눈에 비교하기

프로젝트에 들어가기 앞서, 아이콘을 먼저 공통화 할일이 생길거야.

🔍 아이콘 설정 순서

1️⃣ 폴더 구조 설정 피그마에서 내보낸 아이콘과 로고 파일을 재사용 가능하고 유지보수하기 쉽게 관리하려면 다음과 같은 폴더 구조를 추천해.

src/
├── assets/
│   ├── icons/
│   │   ├── search.svg
│   │   ├── user.svg
│   │   └── home.svg
│   ├── logos/
│   │   ├── main-logo.svg
│   │   └── secondary-logo.svg
│   └── index.ts

• icons/: 작은 크기의 아이콘들(예: 검색, 사용자, 홈 등)을 저장.
• logos/: 회사 로고 또는 브랜드를 대표하는 큰 이미지를 저장.
• index.ts: 각 파일을 import/export하는 코드로 작성해 아이콘과 로고를 한 곳에서 관리.

2️⃣ 피그마에서 내보내기

• 아이콘 및 로고 정리

  1. 피그마에서 아이콘 및 로고를 선택: 사용하는 모든 아이콘과 로고를 한 곳에 모아 프레임(Frame)으로 그룹화. 각 아이콘/로고에 의미 있는 이름을 부여하세요(예: search, home, main-logo).

  2. SVG 형식으로 내보내기: 아이콘과 로고를 벡터 형식(SVG)으로 내보내면 화면 크기에 상관없이 선명하게 유지해.

• 피그마 내보내기 설정

1. 아이콘과 로고를 선택: 내보낼 아이콘 또는 로고 선택.

2. Export 설정: 오른쪽 패널에서 Export 섹션 클릭. SVG 형식으로 설정.

3. 내보내기 실행: 내보내기를 실행하면, 선택한 아이콘/로고를 .svg 파일로 저장할 수 있어.

4. SVG 최적화 (선택 사항): 내보낸 SVG 파일이 불필요하게 큰 경우 SVGO와 같은 도구로 최적화할 수 있어.

3️⃣ VSCode에 아이콘 및 로고 추가

1. 내보낸 파일 이동 피그마에서 내보낸 .svg 파일을 다음 폴더로 옮겨.

아이콘: src/assets/icons/
로고: src/assets/logos/

2. index.ts 파일로 관리 index.ts 파일을 생성하여 아이콘과 로고를 모듈화해. 이렇게 하면 파일 경로를 단축하고, 쉽게 가져다 쓸 수 있어!

// src/assets/index.ts

// 아이콘
export { default as SearchIcon } from './icons/search.svg';
export { default as UserIcon } from './icons/user.svg';
export { default as HomeIcon } from './icons/home.svg';

// 로고
export { default as MainLogo } from './logos/main-logo.svg';
export { default as SecondaryLogo } from './logos/secondary-logo.svg';

3. 컴포넌트에서 사용하기 SVG 파일을 컴포넌트에서 직접 사용하려면 @svgr/webpack 또는 next/image를 사용해.

• SVG를 컴포넌트로 사용: Next.js에서는 SVG 파일을 컴포넌트처럼 사용할 수 있습니다

  import { SearchIcon, MainLogo } from '../assets';
  

const Header = () => { return (

export default Header;

 - 이미지 파일로 처리하기 (Next.js next/image):
SVG 파일 대신 PNG/JPG를 사용하는 경우
```ts
import Image from 'next/image';
import MainLogo from '../assets/logos/main-logo.png';

const Header = () => {
  return (
    <header className="flex items-center p-4">
      <Image src={MainLogo} alt="Main Logo" width={128} height={64} />
    </header>
  );
};

export default Header;

** 🚀 진짜 쉬운 설명**

• 파일 이름 규칙: 파일 이름은 소문자-케밥-케이스(search-icon.svg)를 사용하여 명확하게 구분.
• 아이콘 시스템 구축: 같은 크기(예: 24x24px)로 내보내 아이콘 크기 일관성 유지.
• 피그마 업데이트와 동기화: 아이콘/로고가 변경되었을 때, 같은 방식으로 업데이트하고 VSCode에 반영.

1. 피그마에서 SVG 형식으로 아이콘과 로고를 내보내기.
2. VSCode에서 assets/icons와 assets/logos 폴더로 관리.
3. index.ts를 활용해 한 곳에서 import/export 관리.
4. 컴포넌트에서 쉽게 가져다 사용.

이 방식으로 작업하면 아이콘과 로고를 체계적으로 관리하고, 프로젝트의 일관성을 유지할 수 있어!

** ✏️ 더 알아가기 **

• index.ts로 모듈화란? 로고 파일을 여러 곳에서 사용하려면, 각 파일을 직접 import할 수도 있지만 index.ts로 관리하면 더 편리해! index.ts는 폴더의 모든 파일을 한 곳에서 모아 가져올 수 있는 역할을 하는거지.

//src/assets/logos/index.ts
import MainLogo from './main-logo.svg';
import SecondaryLogo from './secondary-logo.svg';

export { MainLogo, SecondaryLogo };
//index.ts 파일에서 로고 파일들을 import하고, 다시 export하여, 다른 파일에서는 index.ts를 통해 로고를 가져올 수 있어.

• 왜 편리한가?
  • 모듈화하지 않은 경우

    import MainLogo from '@/assets/logos/main-logo.svg';
    import SecondaryLogo from '@/assets/logos/secondary-logo.svg';

• 모듈화한 경우

  import { MainLogo, SecondaryLogo } from '@/assets/logos';

  🙌 경로가 짧아지고 관리하기 쉬워져!

• 질문의 요점을 잘 정리해서 검색해 봐.

  • ex) express.js 라우터 xxx 에러 문제

• 그냥 검색하는 것보다 구글 검색연산자를 활용해봐.

  • ex) typeorm site:stackoverflow.com

• 한글로만 검색하지말고 영어로 검색해 봐.

  • ex) nest.js 프리즈마 연동(x) → nest.js prisma example(o)

🔍 github 검색

• All github 으로 검색하여 reference 확인
• 우리가 고민하는 건 100% 남이 고민한 것.(all gitHub으로 변경)

🔍 예시 찾는 키워드

사용하고자 하는 라이브러리나 프레임워크가 있을 때 아래 키워드를 사용하면 예시를 쉽게 찾을 수 있어.

• OOO sample
• OOO tutorial
• OOO example
• OOO reference
• OOO best practices
• OOO not working
• OOO documentation
• how to OOO

ex) nestjs google OAuth2.0 example

🔍 참고 Document

• [Error | javascript MDN] (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Error)

• [연산자를 이용하여 검색 범위 좁히기] (https://support.google.com/cloudsearch/answer/6172299?hl=ko&co=GENIE.Platform%3DDesktop)

• [6개월간의 TIL회고] (https://wayhome25.github.io/til/2017/08/14/TIL-for-6-months/)

컴퓨터 기본 단축키 정리

Mac 사용자는 아래 표에 보이는것 처럼, Ctrl을 Command로 Alt를 Option으로 알아들으면 돼!

여기에서 소개할 기능들은 사용자 경험을 향상시키기 위해 꼭 알아야 하는 핵심 옵션이야!

🔍 Optimistic Updates (낙관적 업데이트)

• 서버 응답 전에 화면을 먼저 업데이트하는 기능.
• 사용자가 변경 사항을 즉시 확인할 수 있어 빠르고 부드러운 경험을 제공.
• (예제)

  const mutation = useMutation(
  (newLike) => axios.post('/api/like', newLike),
  {
    onMutate: (newLike) => {
      queryClient.setQueryData(['likes'], (oldLikes) => [...oldLikes, newLike]);
    },
    onError: () => {
      queryClient.invalidateQueries(['likes']); // 실패 시 상태 복구
    },
  }
  );

  🙌 쉽게 비유하자면: 좋아요 버튼을 누르자마자 숫자가 올라가는 것처럼, 결과를 믿고 미리 보여주는 경험이야!

🔍 Prefetching (미리 가져오기)

• 사용자가 요청하기 전에 데이터를 미리 가져오는 기술.
• 사용자가 특정 페이지나 데이터를 클릭하기 전에 데이터를 준비해 두어 로딩 없이 즉시 표시.
• (예제)

  queryClient.prefetchQuery(['posts', postId], () =>
  axios.get(`/api/posts/${postId}`).then((res) => res.data)
  );

  🙌 쉽게 비유하자면: "미리 데운 음식"과 같아요. 손님이 주문하기 전에 음식을 준비해 두면, 빠르게 제공할 수 있어!

🔍 keepPreviousData

• 데이터가 변경되더라도 이전 데이터를 유지해 깜빡임을 방지하는 기능.
• 사용자 경험을 매끄럽게 만들기 위해 중요한 옵션.
• (예제)

  const { data, isFetching } = useQuery(
  ['posts', page],
  () => fetchPosts(page),
  { keepPreviousData: true }
  );

  🙌 쉽게 비유하자면: "대기열 유지"와 같아요. 새로운 데이터를 가져오는 동안 기존 데이터를 유지해 화면이 깜빡이지 않아.

🔍 useInfiniteQuery (무한 스크롤 구현)

• 데이터를 페이지 단위로 가져오면서, 사용자가 스크롤할 때마다 데이터를 추가로 로드하는 기능.
• 무한 스크롤을 쉽게 구현할 수 있어.
• (예제)

  const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
  ['posts'],
  ({ pageParam = 1 }) => fetchPosts(pageParam),
  {
    getNextPageParam: (lastPage) => lastPage.nextPage || undefined,
  }
  );

  🙌 쉽게 비유하자면: "자동 밥 리필"과 같아요. 밥그릇이 비면 자동으로 밥을 채워주는 것처럼 데이터를 제공해.

** 🚀 진짜 쉬운 설명**

• Optimistic Updates: 서버 요청 전에 결과를 먼저 화면에 표시.
• Prefetching: 필요한 데이터를 미리 가져와 빠른 로딩 경험 제공.
• keepPreviousData: 데이터 변경 시에도 기존 데이터를 유지.
• useInfiniteQuery: 무한 스크롤로 데이터를 동적으로 로드.

React Query의 이 옵션들을 활용하면 사용자 경험을 대폭 향상시킬 수 있어!

** ✏️ 더 알아가기 **

• 페이지네이션 vs 무한 스크롤 페이지네이션과 무한 스크롤은 사용자가 데이터를 탐색하는 방법을 제공하는 두 가지 주요 패턴이야.

• 페이지네이션은 명확한 데이터 구분이 필요한 경우, 특히 검색 결과나 쇼핑몰에서 적합.
• 무한 스크롤은 사용자가 데이터를 자연스럽게 소비해야 하는 SNS나 뉴스 앱에 유리.

React Query를 사용할 때 꼭 알아야 하는 주요 옵션들이야! 이 옵션들은 데이터를 어떻게 가져오고, 캐싱하며, 새로고침할지 등을 설정하는 데 사용돼. React Query의 똑똑한 데이터 관리를 위해 꼭 이해하고 활용해야 하는 옵션이지.

🔍 staleTime

• "데이터가 신선하다고 간주되는 시간"을 설정.

• 기본값: 0 (항상 오래된 데이터로 간주).

• 설정된 시간 동안 캐시 데이터를 "신선한 상태(fresh)"로 간주하므로, 서버 요청 없이 캐시 데이터를 바로 사용해.

• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { staleTime: 1000 * 60 }); // 1분

  🙌 쉽게 비유하자면: "음식이 상하지 않는 기간"과 같아, staleTime 동안은 데이터를 새로 가져오지 않고, 기존 데이터를 재사용해.

🔍 cacheTime

• "캐시 데이터를 유지하는 시간"을 설정.
• 기본값: 5분(inactive 상태에서 5분간 캐시 유지).
• 이 시간이 지나면 캐시삭제.
• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { cacheTime: 1000 * 60 * 10 }); // 10분

  🙌 쉽게 비유하자면: "냉장고에 음식을 얼마나 오래 보관할지"와 같아. cacheTime이 지나면 음식(데이터)이 삭제돼.

🔍 refetchOnMount

• 컴포넌트가 마운트될 때 데이터를 다시 가져올지 설정.
• 기본값: true(마운트 시 stale 데이터는 자동으로 새로고침).
• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { refetchOnMount: false });

  🙌 쉽게 비유하자면: 집에 돌아올 때마다 냉장고 문을 열어 음식을 확인할지"와 같아. false로 설정하면 마운트할 때 데이터를 다시 가져오지 않아.

🔍 refetchOnWindowFocus

• 브라우저가 포커스를 받을 때 데이터를 새로고침할지 설정.
• 기본값: true (브라우저로 돌아올 때 stale 데이터 새로고침).
• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { refetchOnWindowFocus: false });

  🙌 쉽게 비유하자면: "다시 방으로 돌아왔을 때 냉장고 문을 열어 음식을 확인할지"와 같아. false로 설정하면 브라우저로 돌아와도 데이터를 다시 가져오지 않아.

🔍 refetchOnReconnect

• 네트워크가 다시 연결되었을 때 데이터를 새로고침할지 설정.

• 기본값: true(재연결 시 자동 새로고침).

• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { refetchOnReconnect: false });

  🙌 쉽게 비유하자면: "인터넷이 끊겼다가 다시 연결되었을 때 데이터를 새로 확인할지"와 같아.

  
  

🔍 retry

• 데이터 요청이 실패했을 때 재시도 횟수를 설정.
• 기본값: 3 (최대 3번 재요청).
• (예제)

  const { data } = useQuery(['todos'], fetchTodos, { retry: 2 }); // 2번만 재요청

  🙌 쉽게 비유하자면: "음식을 배달했는데 실패하면 몇 번까지 다시 배달 시도할지"와 같아. 요청이 실패했을 때, 자동으로 재시도해서 데이터를 가져오려고 노력.

** 🚀 진짜 쉬운 설명**

** ✏️ 더 알아가기 **

enabled와 select란? React Query의 옵션 중 하나로, 데이터를 가져오는 방식이나 쿼리의 동작을 세밀하게 제어하는 데 사용해.

• enabled란?

• 쿼리를 활성화하거나 비활성화*하는 옵션이야. 마치, "스위치"와 같아! enabled: false는 쿼리를 꺼두는 것이고, 특정 조건에서만 켜는거지.

  • enabled: false로 설정하면 쿼리가 자동으로 실행되지 않아.

  • 데이터 요청을 조건부로 실행하고 싶을 때 사용해. (예) 특정 상태나 변수가 준비된 이후에 데이터를 가져오고 싶을 때.

  • (예시)

    import { useQuery } from '@tanstack/react-query';
    import axios from 'axios';
    

function UserProfile({ userId }) { const { data, isLoading } = useQuery( ['user', userId], () => axios.get(/api/users/${userId}).then((res) => res.data), { enabled: !!userId, // userId가 있을 때만 쿼리 실행 } );

if (!userId) return

사용자 ID가 필요합니다.

로딩 중...

return

사용자 이름: {data.name}

- **select란?**
**쿼리 응답 데이터를 변환**할 수 있는 옵션이야.
마치, **필터링 작업**과 같아! 서버에서 가져온 데이터를 전부 사용하지 않고, 필요한 부분만 골라서 사용하지.
  -  서버에서 가져온 원본 데이터를 사용자가 원하는 형태로 가공할 때 유용해.
  - 서버에서 받은 데이터가 필요 이상으로 많을 때, 필요한 정보만 골라내고 싶을 때 사용해.
(예) 특정 상태나 변수가 준비된 이후에 데이터를 가져오고 싶을 때.

  - (예시)
```js
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function UserProfile({ userId }) {
  const { data, isLoading } = useQuery(
    ['user', userId],
    () => axios.get(`/api/users/${userId}`).then((res) => res.data),
    {
      select: (data) => ({
        name: data.name,
        email: data.email,
      }), // 필요한 데이터만 추출
    }
  );

  if (isLoading) return <p>로딩 중...</p>;

  return (
    <div>
      <p>이름: {data.name}</p>
      <p>이메일: {data.email}</p>
    </div>
  );
}
//서버에서 가져온 데이터에 사용자가 원하는 가공 로직(select)을 적용.
//데이터 가공은 클라이언트에서 이루어지므로 서버 로직에 영향을 주지 않음.

🎯 enabled와 select 차이

• enabled: 쿼리 실행 여부를 조건부로 제어.
• select: 서버에서 가져온 데이터를 가공해서 필요한 데이터만 반환.

React Query(=TanStack Query)는 서버 상태 관리를 간편하게 만들어주는 도구야. 서버에서 데이터를 가져오고, 캐시에 저장하며, 이를 다시 사용할 수 있도록 관리하는 것을 도와줘. 특히, 비동기 작업(데이터 요청, 응답 처리, 상태 관리)을 자동화해서 개발자 경험을 크게 향상시켜주지!

** 📍핵심 설명**

• 데이터 패칭 (Fetching): 서버에서 데이터를 가져오는 작업. (예) API 호출로 게시글 목록을 가져오기.

• 캐싱 (Caching): 한 번 가져온 데이터를 메모리에 저장해서, 같은 요청을 다시 보낼 필요가 없게 만듦. 빠른 성능과 효율적인 데이터 관리를 제공.

• 자동 리프레시 (Refetching): 데이터가 오래되면 자동으로 새로고침하거나, 수동으로 요청할 수 있음.

• 요청 상태 관리: 로딩 중, 에러 발생, 성공 등 요청의 상태를 자동으로 관리.

• SWR 전략: "오래된 데이터를 사용하면서 새 데이터를 가져오는(Stale-While-Revalidate)" 방식으로, 화면을 빠르게 렌더링하고 최신 데이터를 유지.

  
  

🔍 React Query 사용 예제

1️⃣ React Query설치

2️⃣ 기본 설정 (QueryClientProvider) React Query는 QueryClient라는 관리자를 추가해야해.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

3️⃣ 데이터를 가져오기 (useQuery) useQuery는 데이터를 가져오는 데 사용해.

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

function MyComponent() {
  const { data, isLoading, error } = useQuery(['posts'], async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    return response.data;
  });

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

  return (
    <div>
      <h1>게시글 목록</h1>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

🔍 Mutation이란?

데이터 변경 작업(예: POST, PUT, DELETE 요청)을 처리할 때 사용하는 훅이야. 데이터를 가져오는 useQuery와는 반대로, 데이터를 변경하는 데 사용해!

import { useMutation, useQueryClient } from '@tanstack/react-query';
import axios from 'axios';

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(
    (newPost) => axios.post('https://jsonplaceholder.typicode.com/posts', newPost),
    {
      onSuccess: () => {
        // 성공 후 기존 데이터를 다시 가져오게 함
        queryClient.invalidateQueries(['posts']);
      },
    }
  );

  const addNewPost = () => {
    mutation.mutate({ title: '새 게시글', body: '내용입니다.' });
  };

  return (
    <div>
      <button onClick={addNewPost} disabled={mutation.isLoading}>
        게시글 추가
      </button>
      {mutation.isLoading && <p>추가 중...</p>}
      {mutation.isError && <p>에러 발생: {mutation.error.message}</p>}
      {mutation.isSuccess && <p>추가 완료!</p>}
    </div>
  );
}

🔍 invalidateQueries란?

invalidateQueries는 React Query의 캐시를 무효화(Invalidate)하는 기능이야. 예를 들어, 새로운 데이터를 추가하거나 삭제한 후 이전에 가져온 데이터를 새로고침할 때 사용해.

queryClient.invalidateQueries(['posts']); // 'posts' 키로 캐시된 데이터를 새로고침

🔍 React Query의 SWR 전략

SWR은 Stale-While-Revalidate(오래된 데이터를 사용하면서 새 데이터를 가져옴)의 약자야.

• 캐시 데이터 제공 (빠르게 화면 표시) 먼저, React Query는 캐시에 저장된 데이터를 화면에 표시해. 화면이 빨리 보여서 사용자 경험이 좋아져.

• 새 데이터 가져오기 (최신 데이터 유지) 동시에 서버에서 새 데이터를 가져와 캐시를 업데이트해. 화면에 최신 데이터가 반영돼.

React Query: 서버 상태 관리에 특화된 강력한 도구. SWR: 데이터 페칭과 캐싱을 단순하게 처리하는 도구.

React Query는 SWR 전략을 기본으로 제공해, 먼저 캐시에서 데이터를 보여주고, 서버에서 새 데이터를 가져와 화면을 업데이트함.

** 🚀 진짜 쉬운 설명**

React Query는 서버 데이터를 효율적으로 관리하고, 캐싱과 상태 관리를 자동화해 개발을 더 빠르고 쉽게 만들어주는 도구야!

• 자동화: 데이터를 가져오고, 상태를 관리하며, 새로고침까지 자동으로 처리.
• 효율성: 캐싱으로 동일한 요청을 반복하지 않아 성능이 좋아짐.
• 간결한 코드: useQuery와 useMutation으로 간단하게 API를 처리.

🎯 쉽게 비유하기 React Query를 자동 음식 배달 서비스라고 생각해봐!

• 음식 주문(데이터 요청): 사용자가 음식(데이터)을 주문. React Query가 자동으로 서버에서 데이터를 가져와 제공.

• 배달 상태 관리(요청 상태 관리): 음식이 배달 중인지, 배달 완료되었는지, 실패했는지 상태를 자동으로 관리. "데이터를 가져오는 중..." 같은 로딩 메시지를 쉽게 표시할 수 있어.

• 음식 보관소(캐싱): 가져온 음식(데이터)을 보관소(캐시)에 저장. 같은 데이터가 다시 필요하면 서버에 요청하지 않고, 보관소에서 꺼내줘.

• 유통기한 관리(자동 리프레시): 데이터가 오래되면 자동으로 새로 가져오거나, 사용자가 요청했을 때 데이터를 새로고침해.

** ✏️ 더 알아가기 **

• React Query에서 쿼리 데이터의 여러 상태(state)

• React Query에서 상태 사용하는 이유. React Query는 서버 상태(server state)를 자동으로 관리하면서도 다음과 같은 세부 상태를 제공해.
  • 데이터를 가져올지 결정(stale vs fresh).
  • 데이터를 캐시에 유지할지, 삭제할지 결정(inactive vs deleted).
  • 사용자가 요청 중인지, 결과를 기다리는 중인지 파악(fetching). 이 상태들을 이해하면, 데이터 요청, 캐싱, 새로고침 등 React Query의 핵심 기능을 효율적으로 사용 가능해!

• React Query의 기본 설정 옵션

• React Query의 기본 설정 옵션 설명
  • staleTime: 데이터가 stale(오래된 상태)로 간주되기 전까지의 시간을 설정.
  • refetchOnMount: 컴포넌트가 다시 마운트될 때 데이터를 자동으로 새로 가져올지 결정.
  • refetchOnWindowFocus: 사용자가 브라우저로 돌아왔을 때 데이터를 새로고침할지 설정.
  • refetchOnReconnect: 네트워크가 복구되었을 때 데이터를 새로고침할지 설정.
  • gcTime (cacheTime): 데이터가 캐시에서 삭제되기 전까지의 시간.
  • retry: 데이터 요청이 실패했을 때 자동으로 재요청을 몇 번 시도할지 설정.

🎯 헷갈리는 개념 정리

1. staleTime vs gcTime

• staleTime: 얼마의 시간이 흐른 뒤에 stale 취급할 건지 (default: 0)

• gcTime: inactive 된 이후로 메모리에 얼마만큼 있을건지 (default: 5분, gcTime 0되면 삭제처리)

• staleTime 과 stale/fresh 의 관계

  • staleTime > 0 이면, fresh data
  • staleTime = 0 이면, stale data

2. isPending vs. isFetching

• isPending : 새로운 캐시 데이터를 서버에서 받고 있는 지 여부.

  • 캐시 데이터가 있는 경우 isPending은 false, isFetching은 true

• isFetching: 서버에서 데이터를 받고 있는 지 여부.

1️⃣ 인증 (Authentication): 누구인지 확인하는 과정이야. (예) "이 사용자가 정말 로그인하려는 계정의 주인인지 확인." 로그인: ID와 비밀번호 입력. 결과: "당신은 누구인지 확인했습니다."

2️⃣ 인가 (Authorization): 권한을 확인하는 과정이야. (예) "이 사용자가 특정 작업(예: 관리자 페이지 접근)을 할 수 있는 권한이 있는지 확인." 결과: "이 작업을 할 수 있는 사람입니다/아닙니다."

** 📍핵심 설명**

인증과 인가를 구현할 때 사용하는 기술은 쿠키(Cookie), 세션(Session), 토큰(Token), JWT이 있어.

• ** 쿠키 (Cookie)** 웹 브라우저에 저장하는 작은 정보 조각이야. 서버가 브라우저에게 데이터를 저장하도록 요청하고, 브라우저는 이 데이터를 이후 요청마다 서버에 다시 보여줘.

• 마치 극장 입장권과 같아! 입장권(쿠키)은 극장(브라우저)에 저장해. 입장권을 보여주면 서버가 "아, 이 사람은 이미 인증받았군!" 하고 신원을 확인해.
• 특징: 클라이언트(브라우저)에 데이터 저장. 로그인 정보, 장바구니 상태 등을 유지할 때 사용. 만료 시간이 설정되어 있어, 시간이 지나면 쿠키가 삭제.

• 세션 (Session) 서버에 저장되는 사용자 상태 정보야. 사용자가 서버에 접속하면 세션 ID를 생성하고, 이를 쿠키에 저장해.

• 마치 호텔 키카드와 같아! 키카드(세션 ID)가 발급되고, 이를 가지고 있을 때만 방(서버 데이터)에 접근할 수 있고, 키카드는 호텔(서버)에 상태 정보를 저장하므로, 잃어버려도 큰 문제가 없어.
• 특징: 데이터가 서버 저장. 서버가 사용자의 상태를 기억할 수 있어. 서버 리소스를 사용하기 때문에 많은 사용자가 접속하면 부담이 될 수 있어.

• 토큰 (Token) 사용자 정보를 포함한 인증 데이터야. 서버는 사용자가 로그인하면 토큰을 발급하고, 이후 요청마다 이 토큰을 사용해 인증해.

• 마치 회원증과 같아! 회원증(토큰)을 가지고 있으면, "이 사람이 인증된 회원이구나"라고 확인할 수 있고, 회원증에는 사용자의 정보가 포함되어 있어.
• 특징: 클라이언트에 저장.(쿠키, 로컬 스토리지 등) 상태를 서버에 저장하지 않으므로 서버 부하가 적어.

• JWT (JSON Web Token) JSON 형식으로 된 토큰이야. 토큰 안에 인증 정보(예: 사용자 ID, 권한)를 담아서 서버가 이를 해석해 인증해.

• 마치 비행기 탑승권과 같아! 탑승권(JWT)에는 승객 이름, 좌석 번호 등 정보가 포함되어 있고, 항공사는 탑승권만 보고 신원을 확인하고, 서버에 추가 저장이 필요 없어.
• JWT 구조는 헤더(Header): 어떤 종류의 토큰인지와 어떤 알고리즘으로 서명되었는지에 대한 정보가 들어있어. 본문(Payload): 실제로 중요한 데이터가 들어있는 부분이야. 예를 들어, 사용자 ID, 토큰의 만료 시간 등이 여기에 포함.(민감한 정보는 넣지 않아야해!) 서명(Signature): 토큰이 위조되지 않았는지 확인하는 역할을 해. 서버만이 알 수 있는 비밀 키로 서명되어 있어, 이 서명 때문에 토큰의 무결성이 보장돼.
• 특징: 데이터를 직접 토큰에 포함하여 서버는 상태를 기억할 필요 없고, 자체 인증이 가능하지만, 민감한 정보를 담으면 안돼. 암호화 서명(Signature)으로 토큰 위조를 방지하지.

** 🚀 진짜 쉬운 설명**

• 쿠키: 로그인 상태 유지, 장바구니 저장 등 간단한 상태 유지가 필요할 때.
• 세션: 사용자 데이터를 서버에서 안전하게 관리하고 싶을 때.
• 토큰: 서버 부하를 줄이고, 상태 정보를 클라이언트에서 관리하고 싶을 때.
• JWT: RESTful API와 같은 무상태(Stateless) 시스템에서 인증을 구현할 때.

** ✏️ 더 알아가기 **

• 토큰으로 으로 보안을 강화하는 법! (이를 위해서는 각종 토큰을 발급해주는 영역의 백엔드 개발자와의 협업이 필요해)

리소스 접근 인가를 받기 위해 사용되는 토큰을 Access Token 이라고 불러. Access Token의 만료기간을 길게 잡고 인증상태를 오래 가져갈 경우 서버 부담은 줄어드나 보안성(탈취 당할 경우)에 허점이 있어.

인증 보안이 중요한 서비스의 경우 인증 시 2개의 토큰 (Access Token, Refresh Token)을 발급해. Access Token의 기간은 30분 정도로 짧게 가져 가고, Refresh Token은 1~2주 정도로 길게 잡는 경우가 많아! 이 경우 서버에서는 Access Token이 만료되었을 때 Refresh Token 이 유효한 상태면 새로운 Access Token을 클라이언트에 발급해주고 인증상태를 유지할 수 있도록 하고, Refresh Token 만료 시 다시 로그인하라는 메시지를 응답해.

• Thunder Client툴 HTTP 요청을 보내고 응답을 받는데 필요한 모든 기능을 가지고 있는 툴이야, 이를 이용하면 손쉽게 API를 테스트하고 디버깅 할 수 있어.

  • 설치방법: VS Code Extensions에서 [thunder Client] 검색 후 설치 → 사이드바의 아이콘 선택
  • 기본 사용 방법:
  1. New Request 클릭
  2. 원하는 HTTP Method 선택 및 URL 입력(Payload가 필요할 경우 Body에 추가)
  3. Send를 눌러 응답 확인

맞춤형 인스턴스로 Axios를 사용할 때 기본 설정(base configuration)을 미리 정해두는 방법이야. 반복적으로 작성해야 할 옵션(예: 기본 URL, 공통 헤더)을 한 번만 정의하고 재사용 가능해!

🔍 Custom Instance 사용 예제

// src > axios > api.js
import axios from 'axios';

// Axios Custom Instance 생성
const apiClient = axios.create({
  baseURL: 'https://api.example.com', // 기본 URL
  timeout: 5000, // 요청 제한 시간
  headers: {
    'Content-Type': 'application/json', // 공통 헤더
    Authorization: 'Bearer YOUR_TOKEN_HERE', // 토큰 등 인증 정보
  },
});

// Custom Instance 사용
apiClient.get('/users')
  .then((response) => {
    console.log('사용자 데이터:', response.data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

🙌 Custom Instance의 장점

• 코드 간결화: 반복적인 설정을 줄이고, 코드 가독성을 높힘.
• 일관된 설정 관리: 모든 요청에 대해 동일한 설정을 적용 가능.
• 확장성: 다양한 API 클라이언트를 각각의 Custom Instance로 관리 가능.

** Interceptors**란,

Axios의 요청(Request)과 응답(Response)을 중간에 가로채 추가 작업을 수행하는 기능이야. 예를 들어, 요청 전에 인증 토큰을 추가하거나, 응답 데이터를 가공할 수 있어!

🔍 Interceptors 사용 예제

1️⃣ 요청 인터셉터 (Request Interceptor)

apiClient.interceptors.request.use(
  (config) => {
    // 요청 전에 실행되는 로직
    console.log('요청 정보:', config);
    config.headers.Authorization = `Bearer NEW_TOKEN_HERE`; // 토큰 추가
    return config; // 수정된 요청 설정 반환
  },
  (error) => {
    // 요청 오류 처리
    console.error('요청 오류:', error);
    return Promise.reject(error);
  }
);

2️⃣ 응답 인터셉터 (Response Interceptor)

apiClient.interceptors.response.use(
  (response) => {
    // 응답 성공 시 실행되는 로직
    console.log('응답 데이터:', response.data);
    return response; // 수정된 응답 반환
  },
  (error) => {
    // 응답 오류 처리
    console.error('응답 오류:', error);
    if (error.response && error.response.status === 401) {
      console.log('인증 오류 발생. 로그인 페이지로 이동합니다.');
    }
    return Promise.reject(error);
  }
);

🙌 Custom Instance의 장점

• 공통 작업 처리: 모든 요청에 공통적으로 적용할 작업(예: 인증 토큰 추가)을 처리.
• 에러 처리 간소화: 응답 에러를 중앙에서 처리가능.
• 데이터 가공: 서버로 보내기 전에 요청 데이터를 가공하거나, 응답 데이터를 재구성.

🔍 Custom Instance와 Interceptors를 함께 사용하는 예제

import axios from 'axios';

// Custom Instance 생성
const apiClient = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 요청 인터셉터 추가
apiClient.interceptors.request.use(
  (config) => {
    config.headers.Authorization = `Bearer YOUR_TOKEN_HERE`;
    console.log('요청 정보:', config);
    return config;
  },
  (error) => {
    console.error('요청 오류:', error);
    return Promise.reject(error);
  }
);

// 응답 인터셉터 추가
apiClient.interceptors.response.use(
  (response) => {
    console.log('응답 데이터:', response.data);
    return response;
  },
  (error) => {
    console.error('응답 오류:', error);
    if (error.response && error.response.status === 401) {
      alert('로그인이 필요합니다!');
    }
    return Promise.reject(error);
  }
);

// Custom Instance 사용
apiClient.get('/users')
  .then((response) => {
    console.log('사용자 데이터:', response.data);
  })
  .catch((error) => {
    console.error('오류 발생:', error);
  });

** 🚀 진짜 쉬운 설명**

• Custom Instance: Axios 설정을 미리 정의해 반복 코드를 줄이고 일관성을 높이는 도구.
• Interceptors: 요청과 응답을 가로채 공통 작업(예: 토큰 추가, 에러 처리)을 처리하는 강력한 기능.

웹에서 데이터를 가져오거나 서버로 데이터를 보내기 위한 도구야. 쉽게 말해, 웹 브라우저와 서버가 대화할 수 있도록 도와주는 메신저라고 생각하면 돼!

** 📍핵심 설명**

Axios는 배달 앱처럼 동작해!

• 클라이언트(사용자): "피자를 주문할게요!" 하고 요청을 보냄.

• Axios(배달 앱): 주문 요청을 가게(서버)로 전달하고, 결과를 받아옴.

• 서버(가게): 요청을 처리하고, 피자(데이터)를 배달 앱(Axios)에게 전달.

• 클라이언트(사용자): 배달 앱(Axios)을 통해 데이터를 받아 결과를 확인.

🔍 Axios의 주요 역할

• 데이터 요청 (GET): 서버에서 데이터를 가져옴. (예) 게시글 목록을 가져오기.
• 데이터 전송 (POST): 서버에 데이터를 보냄. (예) 회원가입 정보 전송.
• 서버와 통신 오류 처리: 요청이 실패하면 에러를 쉽게 처리.

🔍 Axios의 사용 예제

1️⃣ Axios 설치

2️⃣ GET 요청 예제 (서버에서 데이터 가져오기)

import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then((response) => {
    console.log(response.data); // 가져온 데이터를 출력
  })
  .catch((error) => {
    console.error('데이터 가져오기 실패:', error);
  });
// axios.get()은 서버에 데이터를 요청하는 코드야. 요청이 성공하면 response.data로 데이터를 받아오고, 실패하면 catch에서 에러를 처리해.

3️⃣ POST 요청 예제 (서버로 데이터 보내기)

import axios from 'axios';

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: '새 게시글',
  body: '내용입니다.',
  userId: 1
})
  .then((response) => {
    console.log('성공적으로 추가됨:', response.data);
  })
  .catch((error) => {
    console.error('추가 실패:', error);
  });
//axios.post()는 데이터를 서버로 보내는 코드야, 여기서는 새로운 게시글 정보를 서버로 전송해.

** 🔍 섬세한 설명**

• axios.get

  get은 서버의 데이터를 조회할 때 사용.

// url에는 서버의 url이 들어가고, config에는 기타 여러가지 설정 추가가능.
// config는 axios 공식문서에서 확인해봐!
axios.get(url[, config]) // GET(url은 매개변수, 대괄호([]) 안의 값은 선택 입력사항.

axios 공식문서

• 예시코드

  // src/App.js
  

import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import

const App = () => { const [todos, setTodos] = useState(null);

// axios를 통해서 get 요청을 하는 함수를 생성.
// 비동기처리를 해야하므로 async/await 구문을 통해서 처리.

const fetchTodos = async () => { const { data } = await axios.get("http://localhost:4000/todos"); setTodos(data); // 서버로부터 fetching한 데이터를 useState의 state로 set. };

// 생성한 함수를 컴포넌트가 mount된 후 실행하기 위해 useEffect를 사용.

useEffect(() => { // effect 구문에 생성한 함수를 넣어 실행. fetchTodos(); }, []);

// data fetching이 정상적으로 되었는지 콘솔을 통해 확인.

console.log(todos); return

export default App;

>- ### **axios.post**
```post```는 보통 서버에 데이터를 **추가할 때 사용.**
```js
// 보통은 클라이언트의 데이터를 body형태로 서버에 보내고자 할 때 사용.
axios.post(url[, data[, config]])   // POST

• 예시코드

  // src/App.jsx
  

import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import

const App = () => { // 새롭게 생성하는 todo를 관리하는 state const [todo, setTodo] = useState({ title: "", });

const [todos, setTodos] = useState(null);

const fetchTodos = async () => { const { data } = await axios.get("http://localhost:4000/todos"); setTodos(data); };

// (원리를 꼭 이해!!!)
// HTTP에서는 body에 javascript 객체를 direct로 넣을 수 없어!
// axios는 내부적으로 JSON.stringify를 적용하기 때문에 이처럼 편리하게 사용하는 것 뿐이야.

const onSubmitHandler = async(todo) => { await axios.post("http://localhost:4000/todos", todo); };

// 만일 fetch를 사용했다면, 이렇게 JSON.stringify를 '직접' 해줘야 해. // await fetch("http://localhost:4000/todos", { // method: "POST", // headers: { // "Content-Type": "application/json", // }, // body: JSON.stringify(todo), // });

useEffect(() => { fetchTodos(); }, []);

return ( <> <form onSubmit={(e) => { // 👇 submit했을 때 브라우저의 새로고침을 방지. e.preventDefault(); onSubmitHandler(todo); }} > <input type="text" onChange={(ev) => { const { value } = ev.target; setTodo({ ...todo, title: value, }); }} /> 추가하기

export default App;

>- ### **axios.delete**
 ```delete```는 저장되어 있는 데이터를 **삭제요청 할때 사용.**
```js
axios.delete(url[, config])  // delete

• 예시코드

  // src/App.jsx
  

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

const App = () => { const [todo, setTodo] = useState({ title: "", });

const [todos, setTodos] = useState(null);

const fetchTodos = async () => { const { data } = await axios.get("http://localhost:4000/todos"); setTodos(data); };

const onSubmitHandler = (todo) => { axios.post("http://localhost:4000/todos", todo); };

// 새롭게 추가한 삭제 버튼 이벤트 핸들러 

const onClickDeleteButtonHandler = (todoId) => { axios.delete(http://localhost:4000/todos/${todoId}); };

useEffect(() => { fetchTodos(); }, []);

return ( <> <form onSubmit={(e) => { e.preventDefault(); onSubmitHandler(todo); }} > <input type="text" onChange={(ev) => { const { value } = ev.target; setTodo({ ...todo, title: value, }); }} /> 추가하기

export default App;

>- ### **axios.patch**
 ```patch```는 어떤 데이터를 **수정요청 할때 사용.**
```js
axios.patch(url[, data[, config]])  // patch

• 예시코드

  // src/App.jsx
  

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

const App = () => { const [todo, setTodo] = useState({ title: "", }); const [todos, setTodos] = useState(null);

// patch에서 사용할 id, 수정값의 state를 추가 const [targetId, setTargetId] = useState(null); const [editTodo, setEditTodo] = useState({ title: "", });

const fetchTodos = async () => { const { data } = await axios.get("http://localhost:4000/todos"); setTodos(data); };

const onSubmitHandler = (todo) => { axios.post("http://localhost:4000/todos", todo); };

const onClickDeleteButtonHandler = (todoId) => { axios.delete(http://localhost:4000/todos/${todoId}); };

// 수정버튼 이벤트 핸들러 추가 👇 const onClickEditButtonHandler = (todoId, edit) => { axios.patch(http://localhost:4000/todos/${todoId}, edit); };

useEffect(() => { fetchTodos(); }, []);

return ( <> <form onSubmit={(e) => { e.preventDefault(); onSubmitHandler(todo); }} > {/* 👇 수정기능에 필요한 id, 수정값 input2개와 수정하기 버튼을 추가 /}

export default App;

#### 🙌 네트워크 쪽 개발을 할 때는 항상 브라우저에 있는 ```네트워크 탭```을 확인하면서 개발을 진행해야 해, 어떤 문제가 생겼을 때 이정보를 통해 디버깅을 할 수 있기 때문이야.

<br/>

## ** <span style="color:Brown">🚀 진짜 쉬운 설명**</span>
Axios는 웹에서 데이터를 주고받는 작업을 간단하고 효율적으로 처리할 수 있도록 도와주는 도구야. "서버와 대화할 때 쓰는 편리한 메신저"로 생각하면 쉽다!

------
### ** <span style="color:LightSteelBlue">✏️ 더 알아가기 **</span>


- **axios와 fetch 차이점**

| 항목                | Axios                                    | Fetch                                   |
|---------------------|------------------------------------------|-----------------------------------------|
| 사용 편의성         | 간단한 문법과 추가 기능 제공             | 기본적으로 약간의 추가 코드 필요         |
| JSON 자동 처리      | 요청 및 응답에서 JSON 자동 처리           | JSON 변환을 수동으로 처리해야 함         |
| 요청 취소 기능      | 기본적으로 요청 취소 기능 제공            | 추가 라이브러리(`AbortController`) 필요 |
| 오류 처리           | HTTP 오류를 자동으로 `.catch`에서 처리    | HTTP 오류를 직접 확인 후 처리 필요       |
| 브라우저 지원       | 모든 브라우저에서 동작                   | 최신 브라우저만 지원 (구형 브라우저 제한)|
| 추가 기능           | 타임아웃 설정, 헤더 관리 등 추가 기능 제공 | 기본 기능만 제공                        |


- **json-server API 명세서 확인방법**

Axios를 사용해서 GET 요청 코드를 작성하기에 앞서, 어떤 방식으로 요청 해야할지는 우리가 사용하는 json-server의 방식을 알아봐야 해. 

다시 말해, **Axios는 `GET` 요청을 할 수 있도록 도와주는 패키지일뿐이지, “어떻게 요청을 해야하지?” 와 같은 방식에 대한 확인은 우리가 사용할 API 명세서를 보아야 한다는 뜻**이야. 예를 들어 `GET` 요청을 할 때 **path variable**로 해야할지, **query**로 보내야할지는 API를 만든 사람이 하라는대로 해야 하기때문이지.

- **.env와 .gitignore**란?
> **.env(환경 변수 파일)**
.env 파일은 중요한 설정 값이나 비밀 정보를 저장하는 파일이야.
(예) API 키, 데이터베이스 비밀번호, 서버 URL 등.
코드에 직접 노출하지 않고, 안전하게 관리하기 위해 사용해.

 - **.env 사용법**
 1. 프로젝트에 .env 파일 생성: 파일 이름: ```.env```
 2. 환경 변수 저장: 키=값 형태로 작성.
```planitext
API_KEY=123456789
DATABASE_URL=https://example.com
SECRET_KEY=mysecret

3. 코드에서 불러오기.

require('dotenv').config();

console.log(process.env.API_KEY); // "123456789"

.gitignore(Git 제외 파일 설정) .gitignore 파일은 Git에 포함시키지 않을 파일이나 폴더를 지정하는 파일야. (예) node_modules, .env, 빌드 파일 등. 민감한 정보나 불필요한 파일이 저장소에 올라가지 않도록 방지해.

• .gitignore 사용법

1. 프로젝트에 .gitignore 파일 생성: 파일 이름: .gitignore
2. Git에 포함하지 않을 파일 추가: 무시할 파일이나 폴더를 작성.

   # node_modules 폴더 제외
   node_modules/
   

환경 변수 파일 제외

.env

로그 파일 제외

*.log

운영 시스템별 파일 제외 (예: macOS)

.DS_Store

3. 확인하기.
.gitignore에 추가된 파일은 Git 상태에 나타나지 않아.
이미 커밋된 파일은 제외되지 않으므로, 이를 삭제하려면 아래 명령어를 사용해야해.

```bash
git rm --cached 파일이름

• .env가 중요한 이유:

• 보안: 중요한 정보를 코드에 직접 노출하지 않음.
• 환경별 설정 관리: 로컬 개발, 스테이징, 프로덕션 환경별로 다른 설정을 쉽게 관리.
  • .gitignore가 중요한 이유:
  • 저장소 정리: 프로젝트와 관련 없는 파일을 Git에 올리지 않아, 저장소가 깔끔해.
  • 보안: 민감한 정보(.env 파일 등)가 저장소에 올라가지 않도록 방지.
  • 한줄요약
• .env 민감한 정보(예: API 키, 비밀번호)를 안전하게 저장.
• .gitignore Git에 올리지 않을 파일을 지정해 저장소를 깨끗하고 안전하게 관리.

가짜 서버(fake server)를 간단히 만들 수 있는 도구! JSON 파일 하나만 있으면, 데이터를 읽고 쓰는 간단한 API 서버를 빠르게 만들 수있고 보다 실무적으로 데이터를 가져오는 연습을 할 수 있다.

** 📍핵심 설명**

• json-server는 "가상의 음식 주문 시스템"처럼 동작해!

• 메뉴판(JSON 파일): "메뉴판"에 음식(데이터)을 적어 놓는다. (예) 피자, 치킨, 버거.

• 주문(API 요청): "피자 주세요!"라고 주문(GET 요청). "새로운 음식을 추가하고 싶어요!"라고 요청(POST 요청).

• 주방(json-server): 메뉴판(JSON 파일)을 읽고, 요청대로 처리.

• 어떤 상황에서 쓰냐면? 프론트엔드 개발자가 백엔드가 준비되지 않았을 때 임시 서버로 사용할 수 있고, 실제 서버처럼 동작하므로, REST API를 테스트할 때 유용해!

🔍 json-server 사용 예제

1️⃣ json-server 설치

2️⃣ JSON 파일 만들기 데이터를 담은 JSON 파일(db.json)을 준비.

{
  "posts": [
    { "id": 1, "title": "Hello World" },
    { "id": 2, "title": "json-server is awesome!" }
  ]
}

3️⃣ 서버 실행

4️⃣ 테스트 http://localhost:3000/posts로 API 요청을 테스트 가능!

• GET 요청: 모든 게시글 가져오기
  • URL: http://localhost:3000/posts
• POST 요청: 새로운 게시글 추가
  • URL: http://localhost:3000/posts
  • 데이터: { "id": 3, "title": "New Post" }
• PUT 요청: 특정 게시글 수정
  • URL: http://localhost:3000/posts/1
  • 데이터: { "title": "Updated Title" }
• DELETE 요청: 특정 게시글 삭제
  • URL: http://localhost:3000/posts/1

** 🚀 진짜 쉬운 설명**

json-server는 JSON 파일 하나로 간단한 REST API 서버를 빠르게 만들고, 데이터를 읽고 쓰는 테스트를 할 수 있는 도구라고 생각하면 돼!

** ✏️ 더 알아가기 **

• json-server 더 알아보기!

** 1️⃣ 기본 포트 변경하기** 기본적으로 포트 3000에서 실행되지만, 다른 포트로 변경도 가능해! (--port 옵션을 사용하면 포트를 5000, 8080 등 원하는 값으로 변경가능)

json-server --watch db.json --port 5000

2️⃣ 라우팅 설정 (Custom Routes) RESTful API 외에 특정 URL로 요청을 라우팅할 수 있습니다. routes.json 파일을 만들어 라우팅을 정의 가능.

• (예) routes.json

  {
  "/api/posts": "/posts",
  "/api/users": "/users"
  }

  • 실행

    json-server --watch db.json --routes routes.json

  • 결과 /api/posts → /posts /api/users → /users

3️⃣ 쿼리 파라미터 지원 JSON 데이터를 필터링, 정렬, 페이지네이션 등으로 조작가능. 1. 필터링 db.json의 posts 중에서 author가 "John"인 데이터만 가져옴.

GET /posts?author=John

2. 정렬 id를 기준으로 내림차순 정렬.

GET /posts?_sort=id&_order=desc

3. 페이지네이션 한 페이지에 5개씩 데이터를 나누고, 2페이지를 가져옴.

GET /posts?_page=2&_limit=5

4️⃣ 데이터 관계 설정 (Nested Routes) db.json에서 데이터를 중첩된 형태로 저장하면, 관계형 데이터를 사용가능.

{
  "posts": [
    { "id": 1, "title": "First Post", "author": "John" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "content": "Great post!" }
  ]
}

요청 예시 GET /posts/1/comments(postId가 1인 댓글만 가져옴.)

• json-server를 더 잘 활용하는 팁
  • 빠른 프로토타입 제작: 백엔드가 준비되지 않았을 때 임시로 사용.
  • API 테스트: 프론트엔드 개발자들이 실제 서버를 기다리지 않고 작업 가능.
  • 연습 환경: RESTful API 요청을 배우거나 테스트할 때 사용.

HTTP(HyperText Transfer Protocol)는 웹에서 데이터를 주고받는 약속(규칙)이야. 쉽게 말해, 인터넷에서 컴퓨터끼리 대화하는 언어라고 생각하며 돼.

** 📍핵심(쉬운) 설명**

• 웹 브라우저와 서버의 대화
  • 웹 브라우저: "안녕하세요! 저 구글 홈페이지 주세요~" (요청, Request)
    • 서버: "여기 있어요! 구글 홈페이지 데이터입니다~" (응답, Response) HTTP는 이렇게 요청(Request)과 응답(Response)을 주고받는 방식!

🔍 HTTP 요청/응답의 구조

1️⃣ HTTP 요청 클라이언트가 서버에게 데이터를 요청.

• 주요 구성:
  • 메서드: 어떤 작업을 할지 지정 (예: GET, POST).
  • URL: 요청할 리소스 주소.
  • 헤더(Header): 요청 정보 (예: 인증, 언어 설정).
  • 본문(Body): 서버로 보낼 데이터 (POST 요청 시).

2️⃣ HTTP 응답 서버가 클라이언트에게 데이터를 응답.

• 주요 구성:
  • 상태 코드(Status Code): 요청 처리 결과 (예: 200, 404, 500).
  • 헤더(Header): 응답 정보 (예: 콘텐츠 타입).
  • 본문(Body): 클라이언트에게 보내는 실제 데이터.

3️⃣ HTTP 상태 코드

• 1xx: 정보

  • 100 Continue 요청의 일부를 서버가 받았으며, 나머지를 계속 보내라는 의미.

• 2xx: 성공

  • 200 OK 요청이 성공적으로 처리되었음.
  • 201 Created 요청이 성공적이었으며, 새로운 자원이 생성되었음.

• 3xx: 리다이렉션

  • 301 Moved Permanently 요청한 리소스가 영구적으로 새로운 URL로 이동.
  • 302 Found 요청한 리소스가 임시로 다른 URL로 이동.

• 4xx: 클라이언트 오류

  • 400 Bad Request 잘못된 요청임.
  • 401 Unauthorized 인증이 필요함.
    • 404 Not Found 요청한 리소스를 찾을 수 없음.

• 5xx: 서버 오류

  • 500 Internal Server Error 서버가 요청을 처리하는 동안 오류가 발생.
  • 502 Bad Gateway 서버가 게이트웨이 또는 프록시 역할을 하는 서버로부터 유효하지 않은 응답을 받음.
  
  

🔍 HTTP 메서드

HTTP 메서드는 클라이언트가 서버에게 요청의 성격을 알리는 데 사용됨.

• GET

  서버로부터 데이터를 요청할 때 *사용해요. 요청 데이터가 *URL에 포함되어 전송되며, 주로 데이터를 조회할 때 사용.

  • REST API에서의 사용: 특정 리소스를 조회할 때 사용.

• POST

  • 정의: 서버에 데이터를 제출할 때 사용.
  • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 데이터를 생성하거나 제출할 때 사용.
  • REST API에서의 사용: 새로운 리소스를 생성할 때 사용.

• PUT, PATCH

  • 정의: 서버의 데이터를 업데이트할 때 사용.
  • 특징: 요청 데이터가 요청 본문에 포함되어 전송되며, 주로 기존 데이터를 수정할 때 사용.
  • REST API에서의 사용: 기존 리소스를 수정할 때 사용.

• DELETE

  • 정의: 서버의 데이터를 삭제할 때 사용.
  • 특징: 주로 특정 데이터를 삭제할 때 사용.
  • REST API에서의 사용: 특정 리소스를 삭제할 때 사용.
  
  

🔍 RESTful 원칙에 따라 작성된 API 명세서

•  기본 URL https://api.example.com
• 엔드포인트

🔍 응답/요청 예시

Content-Type: application/json

• Content-Type 헤더는 서버와 클라이언트가 주고받는 데이터의 형식(타입)을 알려주는 정보야.

• application/json은 이 데이터가 JSON 형식임을 나타내.

• 쉽게 비유하기, 이걸 택배 포장에 비유해볼게! 택배를 보내기 전에 상자에 "옷", "책", "전자제품" 등 포장된 물건의 종류를 적어둬야겠지? 마찬가지로, HTTP에서 Content-Type은 본문 데이터가 어떤 형식인지 알려주는 "라벨" 역할을 하는 거야.

• JSON 형식이란?(다음에 더 자세히 다룰거야!) JSON (JavaScript Object Notation)은 데이터를 표현하는 가볍고 읽기 쉬운 형식.

  {
  "name": "Alice",
  "age": 25,
  "isStudent": true
  }

• Content-Type: application/json의 역할

  • 클라이언트 → 서버로 요청: 클라이언트는 요청 본문이 JSON 형식임을 서버에게 알려줘.

    POST /api/users HTTP/1.1
    Content-Type: application/json
    

{ "name": "Alice", "age": 25 }

- 서버 → 클라이언트로 응답: 서버는 응답 본문이 JSON 형식임을 클라이언트에게 알려줘.
```http
HTTP/1.1 200 OK
Content-Type: application/json

{
  "message": "Success",
  "data": {
    "id": 1,
    "name": "Alice"
  }
}

🙌 요게 왜 중요하냐면!

서버와 클라이언트는 서로 다른 시스템이기 때문에, 데이터 형식을 명확히 알려줘야 문제가 생기지 않아. 서버와 클라이언트가 데이터를 올바르게 해석하고 처리할 수 있게 도와주는거지! Content-Type: application/json은 데이터를 JSON 형식으로 처리하도록 약속하는 거야.

** 🚀 진짜 쉬운 설명**

HTTP는 웹 브라우저와 서버가 데이터를 주고받기 위해 사용하는 약속이야. "클라이언트가 요청(Request), 서버가 응답(Response)"의 원리로 동작해!

Promise 기반 비동기 작업을 더 읽기 쉽게 작성할 수 있도록 도와주는 문법이야. 마치 비동기 작업을 동기 코드처럼 작성할 수 있게 해주는 도구, 결과가 나올 때까지 잠깐 기다렸다가 다음 일을 한다고 생각하면 돼!

** 📍핵심(쉬운) 설명**

Async / Await은 음식 주문 후 기다리는 과정과 비슷해.

• 음식 주문 (Promise 생성): 식당에서 음식을 주문. 이 작업은 시간이 걸리므로 비동기로 처리.
• 음식을 기다림(await): 음식을 기다리는 동안 다른 일을 하지 않고, 멈춰서 결과를 기다려.
• 음식이 나옴 (Promise 완료): 음식이 나오면, 그때부터 다음 일을 진행. Async / Await은 이렇게 "주문 → 기다림 → 음식 도착 후 작업"을 코드로 표현.

🔍 Async / Await의 핵심 개념

• async 함수: 비동기 작업을 처리하기 위한 함수로, 항상 Promise를 반환. 함수 앞에 async를 붙이면, 그 안에서 await사용 가능.

• await 키워드: Promise가 완료될 때까지 기다렸다가 결과를 반환. await은 async 함수 안에서만 사용 가능.

** 🔍 자주 사용되는 패턴(예시)**

1️⃣ 기본 사용법

const fetchData = async () => {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1"); // 데이터를 가져올 때까지 기다림
  const data = await response.json(); // JSON 파싱이 완료될 때까지 기다림
  console.log(data); // 데이터 출력
};
fetchData();

• 동작 과정: fetch 함수가 데이터를 가져올 때까지 await로 기다림. -> 가져온 데이터를 JSON으로 변환할 때도 await로 기다림. -> 최종 데이터를 출력.

2️⃣ Async / Await로 에러 처리

const fetchData = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!response.ok) {
      throw new Error("데이터를 가져오는데 실패했습니다.");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("에러 발생:", error.message);
  }
};
fetchData();

• 특징: try...catch 블록을 사용해 에러를 처리. Promise의 .catch() 대신 동기 코드처럼 작성 가능.

🙌 Promise를 왜 사용할까?

• 코드 가독성 증가: .then() 체인이 없는 깔끔한 코드 작성 가능. 동기 코드처럼 읽히므로, 쉬운 유지보수.
• 에러 처리 간단: try...catch 블록으로 에러를 다룰 수 있어, 코드가 더 직관적.
• Promise보다 간결: 여러 비동기 작업이 연결될 때도 쉽게 작성 가능.

** 🚀 진짜 쉬운 설명**

Async / Await은 Promise 기반의 비동기 작업을 더 동기적으로 보이게 작성하는 방법으로, 코드 가독성과 유지보수를 크게 향상시킴.

(더 쉬운 예시)

• 비동기 작업 없이 코드를 작성

  console.log("1. 피자를 주문합니다.");
  // 피자가 나올 때까지 기다리지 않고, 그냥 다음 일을 해버림
  console.log("2. 음료수를 주문합니다.");

• Async / Await를 사용

  const orderPizza = async () => {
  console.log("1. 피자를 주문합니다.");
  await new Promise((resolve) => setTimeout(resolve, 3000)); // 3초 기다림
  console.log("2. 피자가 도착했습니다!");
  };
  

orderPizza();

비동기 작업(조금 시간이 걸리는 작업)의 결과를 미래에 제공하겠다고 약속하는 것이야. 완료 또는 실패를 처리하기 위해 사용되는 개념이기도 해.

** 📍핵심(쉬운) 설명**

• 음식 주문 (Promise): 배달 앱에서 피자 주문. 이때, 앱은 "피자가 곧 도착할 거야"라고 약속해. (Promise 생성.)

• 피자가 오기 전 (Pending): 피자가 만들어지는 중이거나, 배달 중인 상태. 이 상태를 Pending 상태.(결과가 아직 준비되지 않음!)

• 피자가 도착 (Fulfilled): 배달원이 피자를 가져오면 약속이행. 이 상태를 Fulfilled 상태. (약속이 성공적으로 완료!)

• 문제가 생길 경우 (Rejected): 가게가 문을 닫았거나, 배달이 취소되면 약속을 지킬 수 없음. 이 상태를 Rejected 상태.(약속 실패!)

🔍 Promise 상태

• Pending: 결과를 기다리는 중.(초기 상태) resolve나 reject로 인해 다른 상태로 변경되기 전까지의 상태.
• Fulfilled: 작업이 성공적으로 완료됨. resolve로 인해 pending 상태에서 fulfilled 상태로 변경.
• Rejected: 작업이 실패함. reject로 인해 pending 상태에서 rejected 상태로 변경.

  🙌 Promise 객체는 then, catch, finally 메서드를 통해 이행되거나 거부된 이후의 동작을 정의할 수 있다!

** 🔍 자주 사용되는 패턴(예시)**

1️⃣ Promise 생성(음식 주문하기)

const orderPizza = new Promise((resolve, reject) => {
  const isStoreOpen = true;
  if (isStoreOpen) {
    resolve("피자가 도착했습니다! 🍕");
  } else {
    reject("가게가 문을 닫았습니다. 😢");
  }
});

2️⃣ Promise 처리(배달 결과 확인하기)

orderPizza
  .then((message) => {
    console.log(message); // "피자가 도착했습니다! 🍕"
  })
  .catch((error) => {
    console.error(error); // "가게가 문을 닫았습니다. 😢"
  });

🙌 Promise를 왜 사용할까?

• 기다림 관리: 네트워크 요청(예: 데이터 가져오기), 파일 읽기 등 시간이 걸리는 작업의 결과를 효율적으로 처리.

• 코드 정리: 비동기 작업을 순서대로 처리할 때 코드가 더 읽기 쉽게 정리됩니다.

** 🚀 진짜 쉬운 설명**

Promise는 결과가 나중에 제공되는 작업을 처리하기 위한 도구로, 성공(Fulfilled) 또는 실패(Rejected) 상태에 따라 원하는 동작을 정의할 수 있다.

** ✏️ 더 알아가기 **

• Promise.all이란? 여러 개의 Promise를 동시에 실행하고, 모두 완료될 때까지 기다린 후 결과를 반환하는 메서드. 즉, "여러 작업을 한꺼번에 처리하고, 결과를 한 번에 받아오겠다"는 의미.

• Promise.all을 쉽게 비유하기 Promise.all은 여러 음식을 한꺼번에 배달 주문하는 것과 비슷해.

  • 여러 음식을 주문 (Promise 생성): 피자, 치킨, 그리고 버거를 각각 주문.(여러 개의 Promise를 생성.)

  • 모든 음식이 도착해야 완료 (모든 Promise가 Fulfilled): 모든 배달원이 음식을 가져와야 완료.(Promise.all은 모든 Promise가 성공해야 결과를 반환.)

  • 한 음식이라도 실패하면 전체 실패 (Rejected): 예를 들어, 피자 가게가 문을 닫았으면 전체 주문이 실패. (Promise.all은 하나라도 Rejected 상태면 전체가 실패로 간주.)

• Promise.all의 특징

  • 모든 Promise가 Fulfilled: 모든 Promise가 성공적으로 완료되면, 결과를 배열로 반환.
  • 하나라도 Rejected: Promise 중 하나라도 실패하면 즉시 에러를 반환하고 멈춤.
  • 병렬 실행: Promise를 동시에 실행하므로 작업 시간을 줄일 수 있음.

• ** Promise.all 예제**

1️⃣ 기본 사용법

const pizza = new Promise((resolve) => setTimeout(() => resolve("피자 도착! 🍕"), 3000));
const chicken = new Promise((resolve) => setTimeout(() => resolve("치킨 도착! 🍗"), 2000));
const burger = new Promise((resolve) => setTimeout(() => resolve("버거 도착! 🍔"), 1000));
Promise.all([pizza, chicken, burger])
  .then((results) => {
    console.log("모든 음식 도착:", results);
    // 결과: ["피자 도착! 🍕", "치킨 도착! 🍗", "버거 도착! 🍔"]
  })
  .catch((error) => {
    console.error("배달 실패:", error);
  });

2️⃣ 하나의 Promise라도 실패하는 경우

const pizza = new Promise((resolve) => setTimeout(() => resolve("피자 도착! 🍕"), 3000));
const chicken = new Promise((resolve, reject) => setTimeout(() => reject("치킨 배달 실패!"), 2000));
const burger = new Promise((resolve) => setTimeout(() => resolve("버거 도착! 🍔"), 1000));
Promise.all([pizza, chicken, burger])
  .then((results) => {
    console.log("모든 음식 도착:", results);
  })
  .catch((error) => {
    console.error("배달 실패:", error);
    // 결과: "배달 실패: 치킨 배달 실패!"
  });

• Promise.all을 사용하는 이유

  • 동시에 작업 처리: 여러 작업을 병렬로 처리해 시간을 절약할 수 있어요.
  • 결과를 한꺼번에 처리: 모든 작업이 완료된 후, 결과를 한 번에 가져올 수 있습니다.
  • 실패 처리 용이: 작업 중 하나라도 실패하면 에러를 쉽게 감지하고 처리할 수 있습니다.

• *한줄 요약 * Promise.all은 여러 Promise를 병렬로 실행하고, 모든 작업이 완료되면 결과를 배열로 반환하는 메서드로, 동시에 여러 작업을 효율적으로 처리할 때 사용.

React Hooks는 React에서 상태(state)와 생명주기(lifecycle)를 관리할 수 있도록 해주는 기능이야. 즉, 클래스 컴포넌트가 아닌 함수형 컴포넌트에서도 상태를 사용할 수 있게 해주는 도구지.

• React Hooks는 컴포넌트의 "수납공간" React 컴포넌트가 단순히 UI만 보여주는 게 아니라, 데이터를 기억하거나, 어떤 동작을 처리해야 할 때 사용해.

• Hooks는 컴포넌트 안에 상태를 저장할 공간을 만들어줘.

• 주요 React Hooks

  • useState: 상태를 추가하고 관리. (예) 카운터 숫자를 기억하거나, 다크 모드 상태를 저장.
    • useEffect: 컴포넌트가 화면에 나타날 때나 사라질 때 실행할 동작을 정의. (예) API 호출, 구독(subscribe) 등.
    • useContext: 전역 데이터를 공유. (예) 로그인 상태나 테마 설정을 여러 컴포넌트에서 공유.
    • useReducer: 복잡한 상태 업데이트 로직을 관리. (예) 상태를 여러 단계로 변경해야 하는 경우.

• React Hooks 간단 예제

  import React, { useState } from 'react';
  

const Counter = () => { const [count, setCount] = useState(0); // 상태 선언

return (

export default Counter;

//useState를 사용해 숫자 상태를 저장. 버튼을 누를 때마다 상태가 업데이트되고, 화면이 변경.

<br/>

# ** <span style="color:CornflowerBlue">React Hook Form**이란, </span>

React Hook Form은 React에서 폼 데이터를 쉽게 관리할 수 있도록 도와주는 라이브러리야.
폼(input, checkbox 등)에서 입력된 값을 저장하고 검증하는 과정을 간단하게 만들어.

- React Hook Form은 "폼 관리자"
입력값을 관리하고, 올바르게 입력되지 않았을 때 경고를 띄워주는 관리자 역할을 해.
- 기본 HTML 폼을 사용하면 데이터 관리가 번거롭지만, React Hook Form을 사용하면 훨씬 간단져.

- React Hook Form의 주요 특징
   - 폼 상태 관리: 입력값(예: 이름, 이메일 등)을 쉽게 저장하고 업데이트.
   - 유효성 검증: 값이 비어 있거나, 형식이 맞지 않을 때 에러 메시지 표시.
   - 가벼움: React의 기본 기능을 활용해 성능에 부담을 주지 않음.
   - 외부 라이브러리와 통합 가능: Zod, Yup 같은 검증 라이브러리와 함께 사용해 더 강력한 유효성 검증 가능.

- React Hook Form 간단 예제
```js
import React from 'react';
import { useForm } from 'react-hook-form';

const SignupForm = () => {
  const {
    register, // 입력값을 관리하는 함수
    handleSubmit, // 폼 제출 처리 함수
    formState: { errors }, // 유효성 검사 에러
  } = useForm();

  const onSubmit = (data) => {
    console.log("입력 데이터:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>이름</label>
        <input {...register("name", { required: "이름은 필수입니다." })} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>

      <div>
        <label>이메일</label>
        <input
          {...register("email", {
            required: "이메일은 필수입니다.",
            pattern: {
              value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
              message: "유효한 이메일 주소를 입력해주세요.",
            },
          })}
        />
        {errors.email && <p>{errors.email.message}</p>}
      </div>

      <button type="submit">제출</button>
    </form>
  );
};

export default SignupForm;

//register로 입력값을 React Hook Form에 등록. 폼 제출 시, handleSubmit으로 데이터 처리. 유효성 검사 실패 시 errors에 메시지를 표시.

** 🚀 진짜 쉬운 설명**

• React Hooks와 React Hook Form의 차이점

• React Hooks: React 컴포넌트의 상태와 생명주기를 관리하기 위한 내장 도구.
• React Hook Form: 폼 데이터 입력 및 검증을 간단하게 만들어주는 외부 라이브러리.

React 애플리케이션에서 데이터를 효율적으로 관리하기 위한 상태 관리 라이브러리야.

** 📍핵심 설명**

• Zustand는 중앙 데이터 저장소 여러 컴포넌트가 같은 데이터를 필요로 할 때, 중앙에 데이터를 저장하고 필요할 때 꺼내 쓸 수 있도록 해줘. (예시)

  • 로그인 여부: 헤더, 사이드바, 프로필 페이지 등에서 공유.
  • 다크 모드 상태: 모든 페이지에서 같은 테마를 사용.
  • 장바구니: 상품 상세 페이지에서 추가한 데이터를 장바구니 페이지에서도 보여줌.
  
  

🔍 Zustand 사용 예제

1️⃣ Zustand 설치

2️⃣ Zustand 저장소 생성

import create from 'zustand';

// Zustand 저장소 생성
const useStore = create((set) => ({
  isLoggedIn: false, // 초기 로그인 상태
  login: () => set({ isLoggedIn: true }), // 로그인 상태 업데이트
  logout: () => set({ isLoggedIn: false }), // 로그아웃 상태 업데이트
}));

3️⃣ Zustand 상태 사용

import React from 'react';
import { useStore } from './store';

const App = () => {
  const isLoggedIn = useStore((state) => state.isLoggedIn);
  const login = useStore((state) => state.login);
  const logout = useStore((state) => state.logout);

  return (
    <div>
      <h1>{isLoggedIn ? "Logged In" : "Logged Out"}</h1>
      <button onClick={isLoggedIn ? logout : login}>
        {isLoggedIn ? "Logout" : "Login"}
      </button>
    </div>
  );
};

export default App;

** 🔍 자주 사용되는 패턴(예시)**

• 다크 모드 토글 만들기

1️⃣ 상태 관리 설정 Zustand로 다크 모드 상태를 중앙에서 관리

import create from 'zustand';

// Zustand 저장소 생성
const useStore = create((set) => ({
  isDarkMode: false, // 다크 모드 상태
  toggleDarkMode: () => set((state) => ({ isDarkMode: !state.isDarkMode })), // 상태 변경 함수
}));

2️⃣ 상태를 사용하는 컴포넌트 React 컴포넌트에서 다크 모드 상태를 가져와 UI를 변경

import React from 'react';
import { useStore } from './store';

const App = () => {
  const isDarkMode = useStore((state) => state.isDarkMode); // 다크 모드 상태 가져오기
  const toggleDarkMode = useStore((state) => state.toggleDarkMode); // 상태 변경 함수 가져오기

  return (
    <div style={{ backgroundColor: isDarkMode ? '#333' : '#fff', color: isDarkMode ? '#fff' : '#000', height: '100vh' }}>
      <h1>{isDarkMode ? '다크 모드' : '라이트 모드'}</h1>
      <button onClick={toggleDarkMode}>모드 전환</button>
    </div>
  );
};

export default App;

🙌 위의 코드를 더 이해해보기.

• Zustand로 중앙 저장소 생성
  • isDarkMode는 현재 다크 모드인지 여부를 저장.
  • toggleDarkMode는 다크 모드를 켜고 끄는 함수.
• React 컴포넌트에서 상태를 가져옴
  • useStore를 사용해 다크 모드 상태(isDarkMode)와 토글 함수(toggleDarkMode)를 가져옴.
• UI와 상태를 연결
  • isDarkMode 값에 따라 배경색과 텍스트 색상을 변경.
  • 버튼을 클릭하면 toggleDarkMode가 실행되어 다크 모드 상태가 바뀜.

** 🚀 진짜 쉬운 설명**

json-server는 JSON 파일 하나로 간단한 REST API 서버를 빠르게 만들고, 데이터를 읽고 쓰는 테스트를 할 수 있는 도구라고 생각하면 돼!