• 클라이언트와 서버를 연결하고 실시간으로 통신이 가능하도록 하는 첨단 기술
• 연결이 설정되면 별도의 요청을 보내지 않고도 데이터를 수실할 수 있다.

작동 방식

• 클라이언트와 서버간의 연결은 당사자 중 하나에 의해 종료되거나 시간초과에 의해 닫힐 때 까지 열린 상태로 유지된다.
• 설정된 연결은 열린 상태로 유지되며 클라이언트 도는 서버 츨에서 연결이 종료될 때 까지 동일한 채널을 사용하여 통신이 수행된다.

웹소켓은 언제 사용하는가

실시간 데이터 업데이트와 클라이언트 메세지를 보내는 기능이 필요할 때 이상적이다.

만약 useEffect가 의존성 배열을 가지고 있다면 그 배열 내의 값이 변결될 때마다 useEffect가 다시 실행됩니다.

useRef를 사용하면 직접적으로 리얼DOM 엘리먼트에 접근할 수 있습니다. 예를 들어 특정 input 엘리먼트에 포커스를 주거나, 엘리먹트 크리와 위치 정보를 얻을 때 사용합니다.

컴포넌트의 렌더링 사이클에 영향을 미치지 않는 변수를 저장할 때에도 사용합니다. 예를 들어 타이머ID, 애니메이션 등을 저장하고 관리할 수 있습니다.

기본적인 단위는 Atom과 Selector입니다.

• Atom은 상태 단위이고 Selector는 파생 상태를 만들 수 있습니다. Atom은 key라는 고유한 식별자, default라는 초기상태를 가집니다.
• Selector는 하나 이상의 Atom을 입력 받아 새로운 상태 값을 계산합니다. 예를 들어 할 일 목록과 완료된 할 일 목록이 각 각 Atom에 저장되어 있다면 완료되지 않은 할 일 목록을 Selector로 만들 수 있습니다.

Recoil은 React의 기존 Hooks API와 유사한 API를 제공하므로 더욱 React 스럽게 느껴집니다.

상태가 직접 연결괴므로 상태의 데이터 흐름을 쉽게 추적할 수 있습니다.

차이점 Redux는 액션과 리듀서를 정의애햐하므로 초기 설정이 복잡할 수 있습니다. Recoil은 상태를 쿼리할 수 있는 Selector를 제공합니다. Redux는 별도의 라이브러리나 추가 로직이 필요합니다.

리액트 컴포넌트를 간결하고 명료아게 표현할 수 있습니다. 자바스크립트 표현식을 사용할 때에는 중괄호안에 넣어 사용할 수 있습니다. 속성 설정은 class대신 className을 사용하거나 for대신 htmlFore을 사용하듯이 몇가지 이름이 다릅니다.

제가 사용하였을때에는 페이지 컴포넌트를 만들 때 return문 안에 페이지의 요소들을 만들으며 사용하였습니다. onClick 함수나 다른 함수들을 만들 때에는 return문 위에서 작성하기 때문에 일반적인 자바스크립트 문법을 사용하였습니다.

비동기란 프로그램이 특정 작업을 완료하는 동안 다른 작업을 동시에 수행할 수 있게 하는 처리 방식을 말합니다.

Promise 비동기작업의 최종완료 또는 실패를 나타내는 객체입니다. .then() .catch() 메서드를 사용하여 비동기 작업이 성공했을때와 실패했을때의 로직을 분리할 수 있습니다. 여러개의 .then()을 연결하여 비동기 작업을 순차적으로 처리할 수 있습니다.

Async/Await 비동기 코드를 마치 동기 코드처럼 작성할 수 있습니다. async 함수 내에서 await 키워드를 사용하면 해당 비동기 작업이 완료될 때 까지 함수의 실행을 일시적으로 중단합니다. try catch 블록을 사용하여 에러 처리를 할 수 있으므로 가독성이 높아지고, 에러를 쉽게 잡을 수 있습니다.

'===' 일치 연산자 입니다. 타입 변환을 허용하지 않습니다. 값, 타입 모두 정확히 일치하는지 확인합니다. 따라서 값이 같더라도 타입이 다르면 false를 반환합니다.

실제 DOM 웹페이지의 구조를 나타내는 객체 모델입니다. 웹페이지의 각 요소(태그, 속성, 텍스트 등)에 대한 정보와 이들의 관계를 표현합니다.

실제 DOM을 직접 수정하면 화면에 바로 반영이 됩니다. 하지만 실제 DOM을 변경할 때 마다 페이지 전체가 다시 렌더링 되는 경우가 있어서 성능에 문제가 생길 수 있습니다.

가상 DOM 실제 DOM을 추상화 한 개념으로 리얼돔과 유사한 특성을 가지지만 메모리 내에 존재합니다.

가상 DOM을 변경하면 메모리에서 변경이 일어나기 때문에 실제 DOM을 직접 수정하는것보다 빠릅니다. 변경된 가상 DOM과 이전 가상 DOM을 비교하여 최소한의 변경사항을 찾아낸 다음 그 변경사항만을 실제 DOM에 반영합니다. 이렇게 하면 불필요한 렌더링을 줄일 수 있어 성능이 향상됩니다.

Redux를 사용하는 이유

첫 번째 일관성 입니다. 리덕스를 사용하면 어느 컴포넌트에서든 같은 상태를 참조하게 되니 일관성이 유지됩니다. 예를 들어 사용자의 로그인 상태를 보여주려면 리덕스에서 한 번만 관리하면 되기 때문에 편리합니다.

두 번째 컴포넌트 간 상태 공유 입니다. 여러 컴포넌트에서 같은 정보를 보여주거나 수정해야할 때, 모든 컴포넌트가 그 정보를 쉽게 가져다 쓸 수 있습니다.

세 번째 디버깅과 테스트가 용이합니다. Redux DevTools를 사용하면 어떤 액션을 통해 상태가 어떻게 바뀌었는지 쉽게 확인할 수 있습니다.

네 번째 시간여행 디버깅 입니다. Redux는 앱의 모든 상태 변화를 순차적으로 기록합니다. 그래서 언제든지 과거로 돌아가서 문제를 해결할 수 있습니다.

다섯번째 코드 재사용성과 유지보수 입니다. 액션 생성자나 리듀서같은 로직을 여러 곳에서 재사용할 수 있습니다.

리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용됩니다. 가상 DOM에서 미리 변화를 적용해 본 뒤 실제 DOM과 비교해서 다른 부분만 업데이트해줍니다. 그렇기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를 정의하되 특정 상태값에 따라 컴포넌트를 어떤식으로 렌더링할지 선언하는 방식입니다.

상태관리를 하는 이유는

첫번째로 상태 관리를 통해 앱의 동작을 예측 가능하게 만들 수 있습니다. 예를 들어 버튼을 누르면 팝업이 뜨고, 그 팝업에서 확인을 누르면 데이터가 저장되는 등 상태를 잘 관리하면 이런 동작들이 일관되게 작동합니다.

두 번째는 컴포넌트 간 상태 공유입니다. 여러 컴포넌트에서 같은 상태를 사용해야 할 때, 이 상태를 효율적으로 관리 해 주어야 합니다. A, B, C 세 개의 컴포넌트가 동일한 데이터를 참조하거나 수정할 때 상태관리가 없으면 A에서 변경한 값을 B, C가 모르게 됩니다. 상태 관리를 통해 이 상태를 "중앙에서" 관리하게 되면, A 컴포넌트에서 상태를 변경했을 때 그 변경이 B와 C에도 자동으로 반영되게 할 수 있습니다.

세 번째는 성능 최적화 입니다. 상태를 잘 관리하면 불필요한 렌더링을 줄일 수 있어 성능에 긍정적인 영향을 미치게 됩니다.

네 번째 가독성과 유지보수입니다. 상태관리 방식이 일관되면 코드 가독성도 좋아지고 나중에 다른 사람이 코드를 봤을 때 이해하기 쉬워집니다.

평소 State 관리는 간단한 상태 로직에서 useState를 이용합니다. 상위 컴포넌트에서 상태를 관리하고 하위 컴포넌트에세 props로 상태를 전달 해 줍니다. 만약 상태 공유가 복잡하거나 여러 컴포넌트에서 상태를 공유해야 할 경우 전역 상태 관리 라이브러리를 사용합니다. 라이브러리는 Redux, Recoil을 사용 해 보았습니다.

🐸 설치 라이브러리

yarn create react-app final-sample --template typescript

yarn add  
react-query 
recoil 
@mui/material 
@mui/icons-material 
tailwindcss 
clsx 
react-router-dom

yarn tailwindcss init

📁 shared / Router.tsx

• 웹 앱에서 라우팅 로직을 중앙에서 관리하는 역할
• jsx 문법이 들어가기 때문에 확장자명을 .tsx로 지정해야 한다.

  import React from 'react';
  import { BrowserRouter, Route, Routes } from 'react-router-dom';
  import Home from '../pages/Home';
  import Signin from '../pages/SignIn';
  import SignUp from '../pages/SignUp';
  

const Router = () => { return ( <Route path="/" element={} /> <Route path="/signin" element={} /> <Route path="/signup" element={} /> ); };

export default Router;

📁 App.tsx
```javascript
import './App.css';
import Router from './shared/Router';
import React from 'react';

function App() {
  return (
    <Router />
  );
}

export default App;

📁 App.tsx

import React from 'react';
import { Link } from 'react-router-dom';


const Home = () => {
  return (
    <div>
      <Link to={`/signin`}>SIGN IN</Link>
      <br />
      <Link to={`/signup`}>SIGN UP</Link>
    </div>
  );
};
export default Home;

웹소켓

• 유저와 서버의 양방향 통신

준비

• 폴더 생성
• server.js파일 성성 후 터미널에 yarn init
  • package.json 파일이 생성된다.
• yarn add express ws
  • express : 서버를 만들어주는 라이브러리
  • ws : 웹소켓 연결을 뚫어주는 라이브러리

웹서버 만드는 코드 작성

• 📁 server.js

  const express = require('express');
  const app = express();
  

app.use('/', function (req, res) { res.sendFile(__dirname + '/index.html'); });

app.listen(8080);

<br>

## 유저가 접속 할 html
- 📁 index.html
![](https://velog.velcdn.com/images/p_seo_hn/post/339814c4-fa40-43e5-a4be-7d73e75b3ac2/image.png)
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>웹소켓 연습하기</title>
</head>
<body>
  <h4>채팅페이지입니다</h4>
  <button id="send">메세지 보내기</button>
</body>
</html>

• 실행

유저 웹소켓 연결하기

• 📁 server.js 코드 추가

  const webSocket = require('ws');
  

const socket = new webSocket.Server({ port: 8081 })

<br>

## 유저가 웹소켓 요청하기
- 📁 index.html 코드 추가
```html
<script>
  let socket = new webSocket("ws://localhost:8081")
</script>

웹소켓으로 유저가 서버에게 메세지 보내기

• 📁 index.html 코드 수정

  <button id="send" onclick="socket.send('원하는 문자 입력')">메세지 보내기</button>

서버에서 메세지 수신하기

• 📁 server.js 코드 추가

  socket.on('connection', (ws, req) => {
  ws.on('message', (msg) => {
    console.log('유저가 보낸거 : ' + msg);
    ws.send('서버에서 유저에게 보내는 메세지');
  });
  });

ws대신 socket.io라이브러리 쓰면

1. 연결 끊기면 자동 재접속 기능
2. 웹소켓 접속자마다 자도 ㅇid 부여
3. 모든 웹소켓 유저에게 전체 메세지 전송 가능
4. 웹소켓방을 생성 가능

• 브라우저는 ts파일을 못읽는다.
• 명령어 입력하면 자동으로 js파일로 변환해준다.

타입 지정

  const 사람: {name? : string, age : number} = { age : 20}

• ?를 붙이면 그 속성은 옵션이다. (넣어도 되고 안넣어도 됨)
  

const 생일: string | number = "2020-01-01";

• 다양한 타입 지정 ( Union type )

type ManyType = string | number | Boolean;
const 이것저것: ManyType = 123;

• 타입을 변수로 지정하여 사용 가능
• 일반 변수명과 차별화 하기 위해 맨 앞은 대문자로 작성

여러 타입

function 함수2(x: number | string) : void {
  if(typeof x === 'number'){
    console.log(x + 3)
  }
}
함수2(15);

• number | string : 새로운 타입
• if문이 없다면 오류가 난다

아이디어 회의

음악을 공유 sns

• 이 주제로 했을 때 나중에 취업을 생각하면 이런 기능 구현을 필요로하는 회사들이 별로 없을 것 같다.
• 2주 프로젝트로 하기엔 스코프가 너무 크다

사용자가 직접 만드는 테스트 ( 설문조사 )

• 사용자가 직접 설문지를 만들고 그것을 공유할 수 있는 플랫폼을 만들기로 했다.

프론트앤드 회의

기능 분담

• 헤더, 푸터 - 서현
• 홈 화면 ( + 무한 스크롤, 인기순 슬라이드 ) - 채연
• 로그인, 회원 가입, 로그아웃 (+ 소셜 로그인) - 유진
• 마이 페이지 (프로필, 수정, 참여 테스트, 만든 테스트, 회원 탈퇴 ) - 유진
• 테스트 만들기 - 서현
• 테스트 ( 공유하기, 결과페이지, 댓글 ) - 채연

컴포넌트 역할 분담

• 사진업로드 - 채연
• button - 서현
• test-input - 서현
• 로그인,회원가입,-input- 유진

컨텐츠 너비

1200px

bg-white

페이지 만들며 고려해볼것

point color : blue font-size,

font-family

기본 코드

📁 index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import store from './redux/config/configStore';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

📁 App.jsx

import React from 'react'

const App = () => {
  return (
    <div>Thunk App</div>
  )
}

export default App

📁 redux / config / configstore.js

import todos from "../modules/todosSlice";
import { configureStore } from "@reduxjs/toolkit";

const store = configureStore({
  reducer: {
    todos,
  },
});

export default store;

📁 redux / modules / todosSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todos: [],
}

export const todosSlice = createSlice({
  name: "todos",
  initialState,
  reducers: {}
})

export const {} = todosSlice.actions;
export default todosSlice.reducer;

📁 db.json

{
  "todos": []
}

순서

1. trunk함수 구현
2. 리듀서 로직 구현 : reducers -> extraReducers
   • tjqj xhdtls : 100% 성공(x)
   • 지금까지의 redux state(todos, counter)
   • 앞으로의 state(isLoading, isError, data)
3. 기능 확인(network) + devTools
4. Store의 값을 조회 + 화면에 렌더링

• dispatch할 때 객체가 아닌 함수를 dispatch할 수 있게 해준다.
• 중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행되는것이다. dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)

기본 코드

📁 index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./redux/config/configStore";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

reportWebVitals();

📁 App.jsx

import logo from "./logo.svg";
import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { addNumber, minusNumber } from "./redux/modules/counter";
import { useState } from "react";

function App() {
  const globalNumber = useSelector((state) => state.counter.number);
  const [number, setNumber] = useState(0);

  const dispatch = useDispatch();

  const onPlusButtonclickHandler = () => {
    dispatch(addNumber(+number));
  };

  const onMinusButtonClickHandler = () => {
    dispatch(minusNumber(+number));
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input
        type="number"
        onChange={(e) => {
          setNumber(e.target.value);
        }}
      />
      <br />
      <button onClick={onPlusButtonclickHandler}>더하기</button>
      <button onClick={onMinusButtonClickHandler}>빼기</button>
    </div>
  );
}

export default App;

📁 redux / config / configStore.js

import counter from "../modules/counter";

const { configureStore } = require("@reduxjs/toolkit");

const store = configureStore({
  reducer: {
    counter: counter,
  }
})

export default store;

📁 redux / modules / counter.js

import { createSlice } from "@reduxjs/toolkit"

// 초기 상태(state)
const initialState = {
  number: 0
}

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload
    }
  }
});

export default counterSlice.reducer
export const {addNumber, minusNumber} = counterSlice.actions

순서

1. thunk 함수 만들기 : createAsyncThunk
   • reduxToolkit 내장 API
2. createSlice > extraReducer에 thunk 등록
3. dispatch
4. 테스트

실습

📁 redux / modules / counter.js

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

//2개의 input
// (1) 이름 : 의미는 크게 없음
// (2) 함수
export const __addNumber = createAsyncThunk(
  "ADD_NUMBER_WAIT",
  (payload, thunkAPI) => {
    // 수행하고 싶은 동작 : 3초 기다리게 할 예정
    setTimeout(() => {
      thunkAPI.dispatch(addNumber(payload));
    }, 3000);
  }
);

export const __minusNumber = createAsyncThunk(
  "MINUS_NUMBER_WAIT",
  (payload, thunkAPI) => {
    // 수행하고 싶은 동작 : 3초 기다리게 할 예정
    setTimeout(() => {
      thunkAPI.dispatch(minusNumber(payload));
    }, 3000);
  }
);

// 초기 상태(state)
const initialState = {
  number: 0,
};

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    addNumber: (state, action) => {
      state.number = state.number + action.payload;
    },
    minusNumber: (state, action) => {
      state.number = state.number - action.payload;
    },
  },
});

export default counterSlice.reducer;
export const { addNumber, minusNumber } = counterSlice.actions;

📁 App.jsx

import "./App.css";
import { useDispatch, useSelector } from "react-redux";
import { useState } from "react";
import { __addNumber, __minusNumber } from "./redux/modules/counter"; // 추가

function App() {
  const globalNumber = useSelector((state) => state.counter.number);
  const [number, setNumber] = useState(0);

  const dispatch = useDispatch();

  const onPlusButtonclickHandler = () => {
    dispatch(__addNumber(+number)); // 수정
  };

  const onMinusButtonClickHandler = () => {
    dispatch(__minusNumber(+number)); // 수정
  };

  return (
    <div>
      <div>{globalNumber}</div>
      <input
        type="number"
        onChange={(e) => {
          setNumber(e.target.value);
        }}
      />
      <br />
      <button onClick={onPlusButtonclickHandler}>더하기</button>
      <button onClick={onMinusButtonClickHandler}>빼기</button>
    </div>
  );
}

export default App;

리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기 전에 중간에 어떤 작업을 더 할수 있다.

• Promise 기반 비동기 통신 라이브러리
• 별도 설치 필요하지 않다.
• 단점
  • 미지원 브라우저 존재
  • 개발자에게 불친절한 response (jon으로 변환 과정 필요)
  • axios에 비해 부족한 기능
• 사용 예시
  • 두 개의 then 필요

    const url = "http://jsonplaceholder.typicode.com/todos";
    fetch(url)
    .then(response => response.json())
    .then(console.log());

• 개발자가 일일히 then() 안에 모든 케이스에 대한 HTTP 에러 처리를 해야 한다.
• 예시

  const url = "https://jsonplaceholder.typicode.com/todos";
  

fetch(url) .then((response) => { if (!response.ok) { throw new Error( This is an HTTP error: The status is ${response.status} ); } return response.json(); }) .then(console.log) .catch((err) => { console.log(err.message); });

# axios
```javascript
const url = "http://jsonplaceholder.typicode.com/todos";
axios.get(url).then(response => console.log(response.data))

• 에러메세지 확인

  const url = "https://jsonplaceholder.typicode.com/todos";
  

axios .get(url) .then((response) => console.log(response.data)) .catch((err) => { console.log(err.message); });

- 사용 예시
```javascript
const url = "https://jsonplaceholder.typicode.com/todos";

// axios 요청 로직
axios
  .get(url)
  .then((response) => console.log(response.data))
    .catch((err) => {

        // 오류 객체 내의 response가 존재한다 = 서버가 오류 응답을 주었다    
        if (err.response) {

        const { status, config } = err.response;

            // 없는 페이지
        if (status === 404) {
          console.log(`${config.url} not found`);
        }

            // 서버 오류
        if (status === 500) {
          console.log("Server error");
        }

        // 요청이 이루어졌으나 서버에서 응답이 없었을 경우
      } else if (err.request) {
        console.log("Error", err.message);
        // 그 외 다른 에러
      } else {
        console.log("Error", err.message);
      }
    });

📁 App.jsx

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

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

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

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    fetchTodos();
  }, []);

  return (
    <>
      <div>
        {/* input 영역 */}
        <form>
          <input type="text" />
          <button>추가</button>
        </form>
      </div>

      <div>
        {/* 데이터 영역 */}
        {todos ? (
          todos.map((item) => (
            <div key={item.id}>
              {item.id} : {item.title}
            </div>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </>
  );
}

export default App;

🫧추가, 삭제, 수정 기능 구현

📁 App.jsx

import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [todos, setTodos] = useState(null);
  const [inputValue, setInputValue] = useState({
    title: "",
  });
  const [targetId, setTargetId] = useState("");
  const [contents, setContents] = useState("");

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

  // 추가 함수
  const onSubmitHandler = async () => {
    axios.post("http://localhost:4000/todos", inputValue);
    // setTodos([...todos, inputValue]); // 화면에 id값이 바로 뜨지 않는다.
    fetchTodos(); // DB를 다시 읽어온다.
    setInputValue({ title: "" }); 
  };

  // 삭제 함수
  const onDeleteButtonClickHandler = async (id) => {
    axios.delete(`http://localhost:4000/todos/${id}`);
    setTodos(
      todos.filter((item) => {
        return item.id !== id;
      })
    );
  };

  //수정 함수
  const onUpdateButtonClickHandler = async () => {
    axios.patch(`http://localhost:4000/todos/${targetId}`, {
      title: contents,
    });

    setTodos(
      todos.map((item) => {
        if (item.id == targetId) {
          return { ...item, title: contents };
        } else {
          return item;
        }
      })
    );
  };

  useEffect(() => {
    // db로부터 값을 가져올 것이다
    fetchTodos();
  }, []);

  return (
    <>
      <div>
        {/* 수정 영역 */}
        <div>
          <input
            type="text"
            placeholder="수정할 아이디"
            value={targetId}
            onChange={(e) => {
              setTargetId(e.target.value);
            }}
          />
          <input
            type="text"
            placeholder="수정할 내용"
            value={contents}
            onChange={(e) => {
              setContents(e.target.value);
            }}
          />
          <button onClick={onUpdateButtonClickHandler}>수정</button>
          <br />
          <br />
          <br />
        </div>

        {/* input 영역 */}
        <form
          onSubmit={(e) => {
            e.preventDefault(); // 버튼을 눌렀을 때 새로고침을 막는다.

            // 버튼 클릭 시 , input에 들어있는 값(state)을 이용하여 DB에 저장(post요청)
            onSubmitHandler();
          }}
        >
          <input
            type="text"
            value={inputValue.title}
            onChange={(e) => {
              setInputValue({
                title: e.target.value,
              });
            }}
          />
          <button type="submit">추가</button>
        </form>
      </div>

      <div>
        {/* 데이터 영역 */}
        {todos ? (
          todos.map((item) => (
            <div key={item.id}>
              {item.id} : {item.title}
              &nbsp;&nbsp;&nbsp;
              <button onClick={() => onDeleteButtonClickHandler(item.id)}>
                삭제
              </button>
            </div>
          ))
        ) : (
          <p>Loading...</p>
        )}
      </div>
    </>
  );
}

export default App;

텍스트 관련 클래스

• text-{색상}: 텍스트 색상 변경 (예: text-red-500).
• text-{크기}: 텍스트 크기 변경 (예: text-lg).
• font-{굵기}: 글꼴 굵기 변경 (예: font-bold).

배경 관련 클래스

• bg-{색상}: 요소의 배경 색상 변경 (예: bg-blue-200).

패딩 및 마진 클래스:

• p-{크기}: 패딩 설정 (예: p-4).
• m-{크기}: 마진 설정 (예: m-2).

테두리 관련 클래스:

• border: 요소에 테두리 추가.
• border-{색상}: 테두리 색상 변경 (예: border-blue-500).

레이아웃 관련 클래스:

• flex: 요소를 플렉스 컨테이너로 설정.
• justify-{방향}: 주 축 방향 정렬 (예: justify-center).
• items-{방향}: 교차 축 방향 정렬 (예: items-center).

폰트 아이콘 클래스:

• icon-{아이콘명}: 폰트 아이콘 사용 (예: icon-heart).
  

반응형 클래스:

• sm, md, lg, xl 등: 화면 크기에 따라 클래스를 적용하- 여 반응형 디자인을 구현할 수 있습니다 (예: lg:text-xl).

• grid: 그리드 컨테이너로 설정.
• col-{숫자}: 열의 너비를 설정합니다 (예: col-6).

동적 클래스:

• hover, focus, active 등: 요소에 호버 또는 포커스될 때 스타일을 변경할 수 있습니다.

애니메이션 클래스:

• animate-{애니메이션명}: 애니메이션 효과를 추가할 수 있습니다.

1. app / create / page.js 폴더, 파일 생성 📁app / create / page.js

   export default function Create() {
   return <>Create</>;
   }