리액트 심화주차 정리

 

1. 비동기 처리

1.1 Promise

Promise는 비동기 작업을 처리할 때 사용되는 JavaScript 객체입니다.

• 상태: pending, fulfilled, rejected
• 사용법:

  const promise = new Promise((resolve, reject) => {
      if (success) resolve('Success!');
      else reject('Error!');
  });
  
  promise.then(result => console.log(result)).catch(error => console.error(error));
  

1.2 Promise.all

여러 Promise를 병렬로 처리하고 모두 완료될 때까지 기다립니다.

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);

Promise.all([promise1, promise2]).then(results => console.log(results)); // [10, 20]

1.3 Async/Await

async 함수는 항상 Promise를 반환하며, await 키워드는 비동기 작업이 완료될 때까지 기다립니다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

---

2. JSON Server와 Axios

2.1 JSON Server

JSON Server는 로컬에서 간단한 API 서버를 설정할 수 있는 도구입니다.

1. 설치: npm install -g json-server
2. 사용법:

   json-server --watch db.json
   

3. db.json 예제:

   {
       "posts": [{ "id": 1, "title": "Hello World" }]
   }
   

2.2 Axios

2.2.1 GET 요청

import axios from 'axios';

axios.get('/api/posts').then(response => console.log(response.data));

2.2.2 POST 요청

axios.post('/api/posts', { title: 'New Post' }).then(response => console.log(response.data));

2.2.3 Custom Axios Instance

const api = axios.create({
    baseURL: 'https://api.example.com',
    timeout: 1000,
});

api.get('/data').then(response => console.log(response.data));

2.2.4 Interceptors

요청 및 응답을 가로채서 수정할 수 있습니다.

axios.interceptors.request.use(config => {
    config.headers.Authorization = 'Bearer token';
    return config;
});

---

3. TanStack Query

3.1 등장 배경

TanStack Query는 React에서 서버 상태를 관리하기 위해 설계된 라이브러리로, SWR의 대안으로 등장했습니다.

3.2 기본 사용법

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

const fetchPosts = async () => {
    const { data } = await axios.get('/api/posts');
    return data;
};

function App() {
    const { data, isLoading, error } = useQuery(['posts'], fetchPosts);

    if (isLoading) return 'Loading...';
    if (error) return 'Error';

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

3.3 Infinite Query

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

const fetchPage = async ({ pageParam = 1 }) => {
    const { data } = await axios.get(`/api/posts?page=${pageParam}`);
    return data;
};

function InfinitePosts() {
    const { data, fetchNextPage, hasNextPage } = useInfiniteQuery(
        ['posts'],
        fetchPage,
        {
            getNextPageParam: (lastPage) => lastPage.nextPage,
        }
    );

    return (
        <div>
            {data.pages.map(page =>
                page.data.map(post => <div key={post.id}>{post.title}</div>)
            )}
            {hasNextPage && <button onClick={fetchNextPage}>Load More</button>}
        </div>
    );
}

---

4. Zustand

4.1 Zustand + Immer

import create from 'zustand';
import { immer } from 'zustand/middleware/immer';

const useStore = create(
    immer(set => ({
        todos: [],
        addTodo: (todo) => set(state => { state.todos.push(todo); }),
    }))
);

4.2 Zustand + Persist

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
    persist(
        set => ({
            count: 0,
            increment: () => set(state => ({ count: state.count + 1 })),
        }),
        { name: 'count-storage' }
    )
);

---

5. UX 향상 기법

5.1 Throttling

import { throttle } from 'lodash';

const throttledFunction = throttle(() => {
    console.log('Throttled');
}, 1000);

5.2 Debouncing

import { debounce } from 'lodash';

const debouncedFunction = debounce(() => {
    console.log('Debounced');
}, 300);

5.3 Lodash와 useCallback

import { debounce } from 'lodash';
import { useCallback } from 'react';

const MyComponent = () => {
    const handleSearch = useCallback(debounce((query) => {
        console.log(query);
    }, 300), []);

    return <input onChange={(e) => handleSearch(e.target.value)} />;
};

---

6. 인증 및 인가

6.1 개념

• 인증(Authentication): 사용자가 누구인지 확인하는 과정.
• 인가(Authorization): 사용자가 특정 자원에 접근할 권한이 있는지 확인하는 과정.

6.2 쿠키와 세션

• 쿠키: 클라이언트에 저장되는 데이터.
• 세션: 서버에 저장되는 데이터.

6.3 토큰 인증

• JWT (JSON Web Token): 서버에서 클라이언트를 인증하기 위해 사용되는 토큰.

const token = jwt.sign({ userId: 1 }, 'secretKey', { expiresIn: '1h' });

---

7. Tailwind

Tailwind는 유틸리티 클래스 기반의 CSS 프레임워크입니다.

<div className="bg-blue-500 text-white p-4 rounded">
    Hello Tailwind
</div>

---

8. 반응형 웹

8.1 미디어 쿼리

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

8.2 Tailwind로 반응형

<div className="sm:bg-blue-500 md:bg-green-500 lg:bg-red-500">
    Responsive Design
</div>

---