[React] Day_47 데일리 정리

TIL 쓰기싫움 ㅜㅜ

 

오늘은 무려 과제 발제날... 시작하려는데

무려 오늘 한 일 = 과제 질문지 맘에 안들어서 다시 만들기죠?

이게 끝이긴 해서.. 밤 샐거 같고요?

일단 강의 정리로 오늘 TIL를 대체해보도록 하죠...

레쯔고

 

React (리액트) 강의 정리 - 심화 ver. 

오랜만이야 미디아꿔리...

 

아임웹 시절에 자주썼는데..ㅜㅜ

 

비동기 처리

- 비동기 처리가 필요한 EU

 서버에서 데이터를 가져오거나, 이미지를 다운로드하는 작업처럼 시간이 오래 걸리는 경우 존재

∴ 이때 화면이 멈추지 않게 하고 싶다? → 비동기 처리가 필수!

 

- Promise(프로미스)

비동기 작업의 성공 여부를 알려주는 객체!

• 성공 →  .then()에서 처리
• 실패 →  .catch()에서 에러 잡음

[사용법]

const promise = new Promise((resolve, reject) => {
    const success = true; 
    success ? resolve('작업 성공!') : reject('작업 실패!');
});

promise
    .then(result => console.log(result)) // "작업 성공!"
    .catch(error => console.error(error)); // "작업 실패!"

 

 

- Async/Await

 

async 함수 → 항상 Promise 반환!

await, Promise의 작업이 끝날 때까지 기다려줌 (코드를 더 간단하고 읽기 쉽게 만듬)

 

[사용법]

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data'); // 데이터 요청
        const data = await response.json(); // JSON 데이터로 변환
        console.log(data);
    } catch (error) {
        console.error('에러 발생:', error);
    }
}

fetchData();

 

- Promise.all

여러 비동기 작업을 동시에 실행 → 모든 작업 완료 시, 결과 반환

 

[사용법]

const fetchData1 = fetch('https://api.example.com/data1');
const fetchData2 = fetch('https://api.example.com/data2');

Promise.all([fetchData1, fetchData2])
    .then(responses => Promise.all(responses.map(r => r.json())))
    .then(data => console.log('두 데이터:', data));

 

 

JSON Server / Axios

- JSON Server

간단한 테스트용 API 서버를 만들어주는 도구! (서버 없이 API 테스트 가능)

 

[사용 방법]

 

1) 설치

npm install -g json-server

 

2) 데이터 파일 생성 (db.json)

{
    "posts": [
        { "id": 1, "title": "안녕하세요" }
    ]
}

 

3. 서버 실행

json-server --watch db.json

 

 

- Axios

서버와 데이터를 주고받을 때 사용하면 좋은 라이브러리

 

[GET 요청 예제]

import axios from 'axios';

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

 

[POST 요청 예제]

axios.post('/api/posts', { title: '새 글' })
    .then(response => console.log(response.data))
    .catch(error => console.error(error));

 

TanStack Query

- 필요한 EU

서버에서 데이터를 가져오고 상태를 관리하는 게 복잡하다?

그럴 땐, TanStack Query가 해답!

 

[사용법]

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 '로딩 중...';
    if (error) return '에러 발생!';

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

 

 

Zustand

- Zustand

간단한 상태 관리 라이브러리

 

[사용법]

import create from 'zustand';

const useStore = create(set => ({
    count: 0,
    increase: () => set(state => ({ count: state.count + 1 })),
}));

function Counter() {
    const { count, increase } = useStore();
    return (
        <div>
            <p>카운트: {count}</p>
            <button onClick={increase}>증가</button>
        </div>
    );
}

 

 

UX 향상 기법

- Throttling (쓰로틀링)

특정 시간 간격 동안 이벤트가 한 번만 실행되도록 제한

 

[사용법]

import { throttle } from 'lodash';

const throttledFunction = throttle(() => {
    console.log('쓰로틀링 실행');
}, 1000);

 

- Debouncing (디바운싱)

이벤트가 끝난 후 일정 시간이 지나면 실행

 

[사용법]

import { debounce } from 'lodash';

const debouncedFunction = debounce(() => {
    console.log('디바운싱 실행');
}, 300);

 

 

인증과 인가

- 인증 vs 인가

• 인증(Authentication): 사용자가 누구인지 확인 (로그인)
• 인가(Authorization): 사용자가 특정 작업을 할 권한이 있는지 확인

 

- JWT (JSON Web Token)

• JWT는 로그인 후 사용자 정보를 담아 전달하는 토큰.
• 서버에서 사용자를 인증할 때 사용.

 

 

Tailwind

유틸리티 클래스 기반으로 빠르게 CSS를 작성할 수 있는 프레임워크.

<div class="bg-blue-500 text-white p-4 rounded">
    안녕하세요!
</div>

 

 

반응형 웹

화면 크기에 따라 디자인이 자동으로 변하는 웹 페이지.

 

[예제]

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

 

 

[Tailwind로 반응형 만들기]

<div class="sm:bg-blue-500 md:bg-green-500 lg:bg-red-500">
    반응형 디자인
</div>

 

 

 

 

 

마무리 - 아, 이제 3일동안 잠못잔당 ^-^)p...

 

와장창!

 

이거 맞는지는 모르겠지만 여튼 잘 실천하고 있는 나...

매우매우 칭찬하며 오늘은 빠르게 마무리 짓고

과제 호도도 하고 오겠숩니당-!

구롬 20000.

 

 

 

 

오 늘 의 KPT 회고

• Keep :  우앙 그래도 계획적으로 살고있어요!
• Problem : 하지만 할일이 많아용(?)
• Try : 어서빨리 진행해야죠?!

 

 

ㄲ

ㅜ

ㅅ.