📌 grid ✏️ Flex와 Grid의 차이 Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원) 사용법 flex 처럼 display : grid로 시작 <div class="container"> <div class="item">A</div>...

📌 미들웨어 미들웨어란? 상태관리 라이브러리에서 비동기 작업을 다룰 때 손쉽게 상태관리 할 수 있도록 도와줌 미들웨어는, 액션이 디스패치되어서 리듀서에 이를 처리하기전에 사전에 지정된 작업들을 설정한다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하면됨. 미들웨어 만들기 src/lib/loggerMiddleware.js const lo...

📌 NextJS React +Express.js +React-Route_Dom +Server Side Rendering 의 느낌 설치 npx create-next-app@latest . 실행 명령어 개발 : npm run dev 배포 : npm run build 서비스 시작 : npm run start Route 사용자가 접속...

📌 customHook 참고 주소 https://react.vlpt.us/basic/21-custom-hook.html ✏️ 커스텀 훅 컴포넌트를 만들다보면, 반복되는 로직이 자주 발생기때문에 이러한 로직들을 공통으로 사용 할 수 있게 hook으로 만들어준다. 커스텀 Hooks 를 만들 때에는 보통 이렇게 use 라는 키워드로 시작하는 파일을...

📌 useMemo 참고 주소 https://react.vlpt.us/basic/17-useMemo.html ✏️ 연산값 재사용 useMemo는 성능 최적화를 위하여 연산된 값 재사용하는 hook 이다. 예시 유저 이름을 클릭하면 active 값을 true 로 바꿔 글자색을 변화시키는 펑션을 만들어 본다. import React, { use...

📌 useCallback ✏️ 함수 재사용 이 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다. 함수를 선언하는 것 자체는 사실 메모리도, CPU 도 리소스를 많이 차지 하는 작업은 아니기 때문에 함수를 새로 선언한다고 해서 그 자체 만으로 큰 부하가 생길일은 없지만, 한번 만든 함수를 필요할때만 새로 만들고 재사용하는 것은 여전히 중요함...

📌 MSW(Mock Service Worker) ✏️ MSW 기존 API 모킹 라이브러리 대비 MSW의 가장 큰 강점은 모킹이 네트워크 단에서 일어나기 때문에 프런트앤드 코드를 실제 백앤드 API와 네트워크 통신하는 것과 크게 다르지 않게 작성할 수 있다는 것입니다. 이 말은 나중에 가짜 API를 실제 API로 대체하는 것이 쉽다는 뜻이며 그만큼 ...

📌 리액트 무한스크롤(infinite scroll) 구현하기 ✏️ 구현 방법 Scroll Event를 감지하고, 해당 이벤트 핸들러에서 스크롤값을 비교 Javascript에서 지원하는 Observer API를 활용 📌 Scroll Event를 감지하고, 해당 이벤트 핸들러에서 스크롤값을 비교 ✏️ MSW(Mock Service Wor...

🔥 순열과 조합 🐛 순열 n개에서 r개를 순서 상관있이 고르는것 nPr = n부터 1씩 줄어들면서 r 개의 곱 ex) n(n-1)(n-2) … (n-(r-1)) 🐛 조합 n개에서 r개를 순서 상관없이 고르는것 nCr = nPr/r! r! = r부터 1씩 줄어들면서 1까지의 곱 ex) r(r-1)(r-2) .. 3 x 2 x 1

🔥 sort() 🐛 sort()의 기본 sort((a,b)=>a-b) : 오름차순 sort((a,b)=>b-a) : 내림차순 var aa = [1, 2, 3, 4, 5]; var bb = ["a", "b", "c", "d", "e"]; aa.sort(); // 1,2,3,4,5 aa.sort((a, b) => a - b); /...