혼자 적어보는 노트

✅ 오늘의 학습 📌 React 심화(2) - 서버사이드렌더링(SSR) - Next.js 서버 사이드 렌더링 이해하기 서버 사이드 렌더링(Server Side Rendering)이란? 브라우저가 페이지에 처음 진입했을 때 서버로부터 HTML을 받아서 렌더링을 하는 것 서버사이드 렌더링의 특징 1. 검색엔진 최적화 => 과거에는 ajax 호출을 통한 렌더링 결과를 수집하지 못했지만 요즘엔 검색 엔진이 발전해서 수집하는 경우도 있다. 2. 더 빠른 초기 로딩 속도. Client-side 렌더링은 브라우저 렌더링 후 데이터를 가져오기 위한 로직이 수행되기 때문에 초기 로딩 속도가 느리다. 기존 SSR의 문제점 서버와 클라이언트의 각각 렌더링을 위한 코드를 따로 만들어야 한다. Isomorphic Javascri..

Redux-Persist state를 통해 상태관리를 하면 앱을 종료하거나 새로고침 시에 저장되어 있던 state들이 사라지게 된다. 이 때 state를 유지하기 위해 localStorage나 sessionStorage를 사용하는데 Redux-Persist를 사용하여 설정해두면 알아서 localstorage나 sessionstorage에 state의 상태를 저장시켜주고 꺼내씀으로써 state를 유지시킬 수 있다. 1. 설치 yarn add -D redux-persist 타입스크립트 적용 시 -D @types/redux-presist를 설치해주어야 한다. 2. 사용방법 store/index.js import { tasks } from "./tasks"; import { combineReducers, cre..

✅ 오늘의 학습 📌 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()}>지우기 보통 일반 컴포넌트에서 보다는 라이브러..

부모에 padding값이 있을 경우 자식요소도 부모의 padding 안에 갇혀버리게 되어서 레이아웃을 구현할 때 wrapper를 나누어서 구현한 적이 많다. 위와 같이 레이아웃 전체를 padding으로 감싸고 어떠한 한 자식만 padding 바깥으로 늘리고 싶을 때 가 있는데 그럴 땐 아래와 같이 처리하면 된다. parent { width: 500px; height: 500px; padding: 0 20px; } child { margin-left: -20px; margin-right: -20px } * 바로 직속 자식요소에서만 반영이 된다.

1. not 선택자 활용 ul li:not(:first-of-type){ margin-left: 20px; } 2. 형제 선택자 활용 ul li + li { padding-left: 10px; }

✅ 오늘의 학습 📌 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 ..