Custom Hook을 이용한 무한 스크롤 구현하기
Custom Hook을 이용한 무한 스크롤 구현하기리엑트 프로젝트에서 종종 무한 스크롤 기능을 구현할 때가 있습니다. 이를 구현하기 위해 useEffect 훅을 여러 컴포넌트에서 반복해서 사용하게 되는데, 이런 중복 코드를 제거하고 재사용성을 높이기 위해 custom hook을 만드는 방법을 안내하겠습니다. Custom Hook 정의하기useInfinite
카테고리: frontend
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
React Native Android APK
Android 앱 설치를 위한 apk 파일 생성 방법1. key storeAndroid용 apk를 만드려면 keystore 파일이 필요합니다. 따라서 keystore파일을 만들겠습니다. 1keytool -genkey -v -keystore your_key_name.keystore -alias your_key_alias -keyalg RSA -keysize
styled-components에서 css 변수 사용
styled-components에서 css 사용하기styled-components를 사용하면서 공통된 css가 있을 수 있습니다. 자주 사용하는 css를 변수로 선언하고 styled-components에서 재사용 할 수 있습니다. 사용방법1234567import { css } from 'styled-components';export con
React Router (Link)
React Router DomReact Router Dom을 이용하여 링크를 변경하는 방법에 대해 포스팅하겠습니다. 사용방법1npm i react-router-dom react-router-dom패키지를 설치합니다. 1npm i react-router-dom @types/react-router-dom typescript의 경우 위 두 개의 패키지를
React Native Navigation Header Hide
React Native Navigation Header HideReact Native에서 Navigation의 Header를 숨기는 방법에 대해 설명드리겠습니다. 설정 방법우선 React Native의 Navigation의 기본 설정은 여기를 참고하시기 바랍니다. tsx1234567891011121314151617import * as React from '
React Native Android setting
React Native Android 설정React Native의 React Native CLI Quickstart설정에 대한 정리입니다. 설치방법Java Development Kithomebrew를 이용하여 JDK를 설치합니다. 만약 JDK를 이미 설치 한 경우 JDK의 버전이 8이상인지 확인하시기 바랍니다. 12brew tap AdoptOpenJDK&#