오늘은 무려 과제 발제날... 시작하려는데
무려 오늘 한 일 = 과제 질문지 맘에 안들어서 다시 만들기죠?
이게 끝이긴 해서.. 밤 샐거 같고요?
일단 강의 정리로 오늘 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 : 어서빨리 진행해야죠?!
ㄲ
ㅜ
ㅅ.
'React TIL' 카테고리의 다른 글
[React] Day_49 개인 프로젝트 중간점검 (1) | 2024.11.27 |
---|---|
[React] Day_48 데일리 정리 (0) | 2024.11.26 |
[React] Day_46 팀 프로젝트 후기 (1) | 2024.11.22 |
[React] Day_45 데일리 정리 (0) | 2024.11.21 |
[React] Day_44 데일리 정리 (3) | 2024.11.19 |