Custom Hook을 이용한 무한 스크롤 구현하기
Custom Hook을 이용한 무한 스크롤 구현하기리엑트 프로젝트에서 종종 무한 스크롤 기능을 구현할 때가 있습니다. 이를 구현하기 위해 useEffect 훅을 여러 컴포넌트에서 반복해서 사용하게 되는데, 이런 중복 코드를 제거하고 재사용성을 높이기 위해 custom hook을 만드는 방법을 안내하겠습니다. Custom Hook 정의하기useInfinite
태그: react
React Axios에서 withCredentials를 사용하여 쿠키를 설정하는 방법
소개웹 애플리케이션에서 인증 및 세션 관리는 매우 중요합니다. 이를 위해 쿠키를 사용하는 경우가 많습니다. 이번 포스팅에서는 React에서 Axios를 사용하여 서버로 요청을 보낼 때 쿠키를 설정하는 방법에 대해 알아보겠습니다. 특히 withCredentials 옵션이 왜 필요한지, 어떻게 사용하는지에 대해 자세히 설명하겠습니다. AxiosAxios는 브라
React-Toastify (React 앱에 세련된 알림 기능 추가하기)
React-Toastify란?react-toastify는 React 앱에 알림 기능을 추가할 수 있는 라이브러리입니다. 사용자에게 알림을 보여주는데 사용되며, 사용자 경험을 향상시키는데 도움이 됩니다. 또한 전역에서 일관된 디자인으로 알림을 보여 줄 수 있습니다. React-Toastify 설치react-toastify를 사용하려면 먼저 라이브러리를 설치해
React.js에서 Esc 키로 Tab 닫기
Esc 키로 Tab 닫기 이벤트 핸들러로 key down을 체크합니다. 키가 눌렸을 때 esc키가 맞는지 체크합니다. 123456const keyDownHandler = (event) => { if (event.keyCode === 27) { event.preventDefault(); window.close(); &#
Apply Absolute For Create React App
Create React App의 절대경로 설정경로를 src폴더 기준으로 상대경로(../../../component/user)에서 절대경로(component/user)로 변경하는 방법에 대해 알아보려고합니다. 절대경로 설정CRA프로젝트 루트에 jsconfig.json파일을 생성 후 다음과 같이 작성합니다. 123456{ "compilerO
styled-components에서 css 변수 사용
styled-components에서 css 사용하기styled-components를 사용하면서 공통된 css가 있을 수 있습니다. 자주 사용하는 css를 변수로 선언하고 styled-components에서 재사용 할 수 있습니다. 사용방법1234567import { css } from 'styled-components';export con
React에서 Font Awesome 사용하기
Font Awesome 이란?Font Awesome은 웹페이지에서 소개된 바와 같이 인기있는 아이콘 세트 및 툴킷이라고 합니다. svg로 된 아이콘을 무료로 제공하여 사용 할 수 있습니다. react-fontawesome패키지를 이용하겠습니다. 설정방법1npm i --save @fortawesome/fontawesome-svg-core @fortawes
create-react-app에서 Typescript로 개발하기
create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다.이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다.Typescript를 이용한 create-react-app 설정방법에 대해 설명드리도록 하겠습니다. Typescript란?설정 방법 이전에
create-react-app
create-react-app이란?React앱을 간편하게 만들 수 있도록 자동으로 빌드해주는 모듈입니다. 이 패키지 모듈을 이용하면 Webpack이나 Babel을 설치하고 셋팅하는 복잡한 과정을 생략 할 수 있습니다. 설치방법1npm install -g create-react-app 위 코드를 터미널에서 실행하여 create-react-app모듈을 전역에
Warning: Each child in an array or iterator should have a unique "key" prop.
에러의 이유?리엑트는 element가 많을 경우 key값을 주어야합니다. key값은 고유해야합니다.key값이 고유하지 않을 경우 위와 같이 에러가 발생합니다. 해결방법123{movies.map(movie => { return <Movie title={movie.title} poster={movie.p