혼자 적어보는 노트

✅ 오늘의 학습 📌 React 심화(2) - Redux - Redux Toolkit Redux 몇번 사용해봐서 낯익은 Redux를 강의로 다시 접하게 되었다.🙌 줄곧 전역 상태 관리를 Redux로 사용하다가 contextAPI와 비교하는 이론들을 접하게 되면서 이번 프로젝트에서 contextAPI와 useReducer를 사용했었는데 Redux를 사용했을 때와 코드를 작성하는 양이 그렇게 크게 차이가 없다고 느꼈었다. Redux의 특징 공식 문서에서는 Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 설명한다. 대표적인 특징은 아래와 같다. - third party 라이브러리 - 미들웨어 기능 제공 - 성능 최적화 제공 - 하나의 store createStore is deprecated? ..

✅ 오늘의 학습 📌 React 심화(1) - use ImperativeHandle - 타입스크립트 useImperativeHandle 상위 컴포넌트에서 하위컴포넌트를 함수 호출로 제어할 수 있다 => 자식에서 정의한 함수를 부모에서 사용할 수 있다. const Input = (props, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ clear: () => { inputRef.current. }, })); return ( ); }; export default forwardRef(Input); 부모컴포넌트에서는 아래와 같이 전달해준다. inputRef.current.clear()}>지우기 보통 일반 컴포넌트에서 보다는 라이브러..

✅ 오늘의 학습 📌 React (8) - API를 활용한 프로젝트 - axios를 이용한 네트워크 API 실습 - react-router 여러 컴포넌트 한줄에 불러오기 작은 단위의 컴포넌트들이 들어있는 base폴더에서 컴포넌트를 가져오게되면 아래와 같이 컴포넌트마다 한 줄씩 불러와야한다. import Header from './components/base/Header'; import Spinner from './components/base/Spinner'; 가져오는 컴포넌트가 많아질 수록 길게 작성이 되는데 components폴더의 index파일을 사용하여 간결하게 작성하게 만들 수 있다. [components/index.js] export { default as Header } from './base/..

✅ 오늘의 학습 📌 React (8) - 사용자 정의 Hook 연습하기 useAsync / useHotKey - 컴포넌트 연습하기 Modal / Toast useAsync 이전의 setTimeout과 마찬가지로 함수버전과 즉시실행 버전을 만들었다. 로직을 구성하는 것은 어렵진 않으나 비동기 실행 시 중복 요청에 대한 결과 값을 마지막 요청의 것으로만 적용이 되게 방어 코드를 작성해야 한다. const useAsyncFn = (fn, deps) => { const lastCallId = useRef(0); // 비동기 실행시 중복 요청에 대한 결과값을 마지막 요청의 것으로만 적용하기 위함. const [state, setState] = useState({ isLoading: false, }); const ..

✅ 오늘의 학습 📌 React (7) - 사용자 정의 Hook 연습하기 UseResize/ useLocalStorage / useForm / useTimeout / useInterval / useDebounce Formik 이전의 useForm hook을 다시 복습하면서 Formik 이라는 form관련 라이브러리에 대해 알아보았다. 간단한 form을 구현할 때 사용하기 좋은 라이브러리이다. import { useFormik } from 'formik'; 한번 사용해보니 강의에서 구현한 useForm과 사용법이 거의 같았다. 하지만 강의에서 구현했을 땐 handlesubmit 이벤트를 발생시켜야 validate를 통한 유효성 검사를 했었는데, formik의 경우에는 handlechange가 발생해도 바로 ..

✅ 오늘의 학습 📌 React (6) - 컴포넌트 연습하기 Flux / Breadcrumb / Tab - 사용자 정의 Hook 연습하기 useScroll / useKey / useClickAway Flux 컴포넌트 12그리드 방식으로 culumn을 나누어서 레이아웃을 잡는 것을 도와주는 컴포넌트. col 컴포넌트에서 span과 offset값을 받아서 아래와 같이 style을 지정하여 12그리드를 구현할 수 있다. const StyledCol = styled.div` max-width: 100%; box-sizing: border-box; width: ${({ span }) => span && `${(span / 12) * 100}%`}; margin-left: ${({ offset }) => offset..

✅ 오늘의 학습 📌 React (4) - emoji 검색기 만들기 - Context API - Upload 컴포넌트 - Badge 컴포넌트 - Icon 컴포넌트 😊 emoji 검색기 만들기 검색기를 만들땐 보통 api를 사용하지만 필요할 때마다 서버에 요청해서 데이터를 가져오는 방식이 아닌 데이터를 미리 한 곳에 작성해두고 불러오는 방식을 사용했다. {emojis .filter((emoji) => emoji.title.indexOf(keyword) >= 0 || emoji.keywords.indexOf(keyword) >= 0) .slice(0, 10) .map((emoji) => ( ))} 키워드에 맞게 emojis를 걸러내고 특정 개수로 자른 형태로 보여지게 만들었다. Clipboard API를 통한..

✅ 오늘의 학습 📌 React (3) - 컴포넌트 연습하기 Image 컴포넌트 intersection observer를 사용하여 viewport에 이미지가 나타날 때 네트워크에 이미지 요청을 하는 방식을 강의에서 다루었다. image 컴포넌트의 기본 형태 export const Image = ({ lazy, threshold = 0.5, placeholder, src, block, width, height, alt, mode, ...props }) => { const [loaded, setLoaded] = useState(false); const imgRef = useRef(null); const imageStyle = { display: block ? "block" : "undefined", width..