스크롤 이벤트?
구현 방법
Infinite Scroll을 구현하는 방법에는 크게 두 가지가 있다.
- onScroll event: 번거롭고 최적화가 필요하다.
- Intersection Observer API:[MDN]
(https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API)
readme는 중요하다
readme를 통해 프로젝트의 실행 방법이나 형태, 사용 기술들을 알릴 수 있다.
Key값 숨기기
.env파일과 gitignore을 사용해서 무시해줘야 온라인상에 api키를 뺄 수 있다.
react router
Link,NavLink,useNavigate()차이
- Link
react-router-dom 에서 제공하는 컴포넌트는 html의 a 태그와 기능이 유사하지만, 페이지 전환을 방지하는 기능이 내장되어있다.
요소 클릭 시 <도메인 경로>/<지정한경로> 로 바로 이동하는 로직 구현 시에 용이한 컴포넌트. - NavLink
특정 링크에 스타일을 넣어줄 수 있다. NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 선언하여 활성화시키고 싶은 스타일에 css를 적용할 수 있다. - useNavigate()
useNavigate 훅을 실행하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. Link와 다르게 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있다.
interval과 timeout
- interval: 매번 일어나야 하는 무언가 setInterval(실행하고자하는함수, 호출되는 간격: ms)
- timeout: 원하는 함수를 일정시간이 흐른 후에 작동하게 할 수 있음 setTimeout(실행하고자하는함수, 얼마나기다릴지의 시간)'
리덕스 툴킷
(https://redux-toolkit.js.org/)
redux-toolkit은 redux가 공식적으로 만든 라이브러리로, saga를 제외한 위 기능 모두 지원합니다
리덕스는 state, action에 대한 타입정의가 굉장히 번거로움이 있는데,
redux-toolkit에서 이 부분을 해결하여, 내장 타입으로 지원하기에 편리하게 코딩할 수 있다.
리액트 쿼리
https://ui.dev/react-query?from=tanstack
API 통신과 비동기 데이터 관리1를 위해 React Query를 이용한다.
1. React Query는 React Application에서 서버 상태를 불러오고, 캐싱하며, 지속적으로 동기화하고 업데이트하는 작업을 도와주는 라이브러리입니다.
2. 복잡하고 장황한 코드가 필요한 다른 데이터 불러오기 방식과 달리 React Component 내부에서 간단하고 직관적으로 API를 사용할 수 있습니다.
3. React Query에서 제공하는 캐싱, Window Focus Refetching 등 다양한 기능을 활용하여 API 요청과 관련된 번잡한 작업 없이 "핵심 로직"에 집중할 수 있습니다.
babel
babel 이란?
Babel is a JavaScript compiler.
babel 은 javascript 로 결과물을 만들어주는 컴파일러. 소스 대 소스 컴파일러 (transpiler).
새로운 ESNext 문법을 기존의 브라우져에 사용하기 위해서 babel 은 필수적. 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축,
제안(proposal) 단계에 있는 문법 등을 사용할 수 있음
