📌 Redux-saga
➡ Redux에서 action을 dispatch하면 바로 state가 변경되어, 비동기 처리가 불가능하다.
➡ 비동기 처리를 위해 Redux-thunk, Redux-saga 등장!
➡ Redux-saga는 비동기의 다양한 상황을 처리하기 좋고,
테스트나 디버깅이 쉽기 때문에 많이 이용되는 추세
💡 middleware
- Redux에서 미들웨어는 action을 dispatch하고, reducer에서 state가 변경 되기 전!!
이 사이에서 여러 작업을 할 수 있다. (로그 남기기, 비동기 처리 등)
💡 generator (ES6)
- generator함수를 만들 때는
function*키워드를 사용한다
function* generateNumber() {
yield 1;
yield 2;
return 3;
}
const generator = generateNumber();
console.log(generator.next().value) // 1
console.log(generator.next().value) // 2
console.log(generator.next().value) // 3
console.log(generator.next().value) // undefined- redux-saga에서의
saga가 generator 함수를 의미함 - generator 기반으로 비동기 작업을 관리함
- generator 함수에서 action에 따른 작업을 yield
💡 Redux-saga > side effect
- side effect는 (부정적인 의미의) 부작용이 아니라, 부수효과를 의미한다.
- 다양한 기능들이 있기 때문에 구현하고 싶은 기능에 따라 사용하면 된다.
takeEvery: 모든 액션을 유효하게 인정takeLatest: 마지막 액션 하나만 유효하게 인정
📌 Context API
React에서 공식적으로 전역상태를 관리할 수 있는 Context API를 제공
React 자체 전역상태 관리 API이기 때문에 최근 새로운 프로젝트에 굉장히 많이 도입되고 있다.
Redux, react-router, styled-components 오픈소스를 보면 Context API를 사용하고 있다!
✅ Provider : 전역 상태 정의 및 전역 상태를 update하는 로직이 존재
-
Provider는 context를 구독(Consumer)하는 컴포넌트들에게 context의 변화를 알린다.
-
Provider 하위에 있는 컴포넌트 중에 context를 구독(Consumer)하는 부분이 Provider의 value가 바뀔때마다 다시 렌더링 된다.
➡ Provider 하위에 있다고 value가 업데이트 될 때마다 모든 컴포넌트가 다시 렌더링 되는게 아니다!
➡ context를 구독이 포함되어 있는 컴포넌트도 다시 렌더링 되는게 아니다!
➡ 오직 context.Consumer 부분만 rerender 된다. -
당연히!! Provider 컴포넌트 외부에 있는 컴포넌트에는 변화를 감지하지 못한다.
✅ Consumer : 전역 상태 사용
useContext를 사용하면 훨씬 편하게 사용 가능하다.
💡 Context API 예시
- context에 로그인 여부를 저장하는
auth와 상태를 변경하는 함수인setAuth를 추가 - 로그인 페이지에서 정상적으로 로그인되면
setAuth함수를 사용하여auth값을 true로 바꿔줌
//AuthContext.js
import { createContext, useEffect, useState } from 'react';
import { login } from './AuthService';
const AuthContext = createContext({}); // 1️⃣
export const AuthProvider = ({ children }) => { // 4️⃣
const [auth, setAuth] = useState(false);
useEffect(() => {
setAuth(login()); // 3️⃣
}, []);
return (
<AuthContext.Provider value={{ auth, setAuth }}> // 2️⃣
{children}
</AuthContext.Provider>;
};
export const AuthConsumer = AuthContext.Consumer; // 4️⃣
export default AuthContext; // 4️⃣코드설명
-
createContext는 초기 값을 매개변수로 받는데 필수는 아니다.
➡ 작성해도 2. provider를 정의하는 곳에서 덮어 씌워지기 때문에 작성하지 않았다. -
Provider에서 사용할
auth(로그인 여부)와 로그인 여부를 업데이트 해주는setAuth함수를 넣는다. -
최초(현재) 로그인 여부 파악
-
AuthContext,AuthProvider,AuthConsumer를 나누어서 export하였다. (context/provider/consumer를 한 파일에서 관리하고, 아래와 같이 사용하기 위해서)
import AuthContext, { AuthProvider, AuthConsumer } from './AuthContext';📌 Responsive Web
반응형 웹이란, 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미.
IT 기기의 종류가 더욱 다양해짐에 따라 디스플레이의 크기에 맞게 유동적으로 반응하는 반응형 웹을 구현하는 것이 더욱 중요해졌다.
💡 Breakpoint
- 보통 2개 - 1024 / 768
- 관리 편하게 하려면 1개 - 768
💡 Media Query
@media only screen and (max-width: 480px) {
body {
font-size: 12px;
}
}@media: media 쿼리 시작only screen: 어떤 디바이스에서 적용하는지 알려준다.
-only screen: 어떤 디바이스이던지 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용
-only print: 프린트를 하고싶을 때 적용and (max-width : 480px): media feature라고 불리는 부분, 조건 작성하기
💡 SCSS에서 관리 쉽게 하기
/* mediaQuery.scss */
$phone: "only screen and (max-width: 768px)";
$desktop: "screen and (min-width: 769px)";
@import './mediaQuery.scss';
.big-box {
@media #{$phone} {
display: none;
}
@media #{$desktop} {
display: block;
}
}📌 Cross Browsing
웹사이트가 어느 버전의 브라우저에서나, 어느 디바이스에서도 원하는 결과물이 나오도록 확인하고 수정하는 단계
➡ ie, chrome, safari는 기본이고, 모바일에서 카카오톡 웹뷰, 네이버 웹뷰에서도 잘 뜨는지 직접 꼭 확인해야 한다!
💡 CSS 확인하기
- ie에서 생각보다 많은 CSS property를 지원하지 않는다.
- can i use 에서 확인해보거나,
해당 property 이름 + ie 조합으로 검색해서 답변을 바로 찾기! - 한번에 지원해주는 라이브러리가 있긴 하지만, 웬만하면 직접 수정하는 것이 좋다.
💡 IE polyfill 적용하기
- step1.
react-app-polyfill설치
yarn add react-app-polyfill- step2. polyfill import
// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';- step3.
node_modules/.cache삭제
- step4. package.json
browserslist에 ie 11 추가
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie 11"
]
}