당연한 개발자가 되자

Scroll Event(Feat. throttle) 기존에는 Scroll Event를 사용해서 구현했었지만 여러가지 문제들이 많아서 권장하지 않습니다. Intersection Observer API(권장) (Feat. React-query) Intersection Observer API 사용법 https://shin96bc.tistory.com/213 무한 스크롤 구현 예시 저는 여러 페이지에서 무한 스크롤을 사용하기 위해서 custom hook으로 분리했습니다. useIntersectionObserver.ts import {useCallback, useEffect, useRef} from "react"; // [Intersection Observer API custom hook] // observer를..

이벤트 핸들러의 동작방식 EventHandlerTest.js export default function EventHandlerTest() { const onChange = e => { console.log(e.target.value); }; return ; } onChange같은 이벤트는 값이 변경될 때마다 발생합니다. 즉 키보드를 한번 누를때마다 “H”, “He”, “Hel”, “Hell”, “Hello” 같이 불필요한 이벤트가 실행됩니다. 이렇게 연속으로 이벤트가 발생하면 Application의 성능이 저하될 수 있습니다. 그래서 이런 이벤트를 다루는 두가지 방법을 알아보겠습니다. Debounce Debounce란 특정 이벤트가 발생할 때 작동하는 핸들러가 과도하게 작동하는 것을 방지하기 위해 연이어..

개요 과거에 교차 감지를 구현하려면 ‘getBoundingClientRect()’ 함수를 사용하여 영향을 받는 모든 요소에 필요한 정보를 구축하는 메서드를 호출하는 이벤트 핸들러 및 루프가 필요했습니다. 그러나 이 모든 코드는 메인 스레드에서 실행되기 때문에 메인 스레드에 과부화가 걸려서 웹 사이트의 성능 자체가 현저히 떨어지는 일들이 많이 발생했습니다. 그런 성능저하 문제를 해결하기 위해서 등장한 것이 Intersection Oberver API입니다. https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer API 기본지식 Intersection Observer API란 타켓 요소와 상..

원인 이 문제는 ESLint 8.23에 도입된 변경 사항으로 발생합니다. 해결법 ESLint를 다운그레이드 합니다. npm install eslint@8.22.0 --save-exact

발생하는 이유 해당 에러가 발생하는 이유는 jsx에서 map을 이용해서 태그를 생성 하는 경우와 같이 형제관계에서 같은 태그가 여러개 존재할 때 발생하는 Warning 입니다. 해결방법 해결방법은 아래와 같이 map 안쪽에서 반복되는 태그중 가장 상위 태그에 고유한 key값을 전달하면 됩니다. 여기서 보통 map 함수의 두번째 인자값으로 들어오는 index를 key값으로 많이 사용하는데, 사실 React에서는 index를 key값으로 사용하는 것을 지양하고 있습니다. index 이외에 고유한 값을 사용하는게 좋습니다. const App = () => { const list = [ {id: 1, name: 'A'}, {id: 2, name: 'B'}, {id: 3, name: 'C'} ]; return (..

프로세스 Routes를 하나만 두고 private Routes에만 Guard를 감싸고 Guard에서 로그인 여부를 체크해서 로그인 상태가 아닌 경우에 로그인 페이지로 redirect 하는 방법입니다. 권한별로 가드를 만드는 방법입니다. 권한이 3가지인 경우에는 권한마다 가드를 만들어서 해당 페이지를 감싸주면 됩니다. 권한이 없으면 redirect 시킵니다. 만약 권한이 많고 복잡해서 1, 2, 3, 4중에 1,2만 해당 페이지에 접근하게 만들고 싶다면 권한 1, 2를 체크하는 가드를 하나 더 만들면 됩니다. 코드 작성법 폴더 구조 /guard LoginGuard.js import { useNavigate } from "react-router-dom"; import { useSelector } from "..

프로세스 private routes와 public routes를 나누어서 로그인 여부에 따라 routes를 바꿔주는 방법입니다. 권한별로 routes를 만드는 구조입니다. 만약에 권한이 3가지인 경우에는 admin, user, public 등으로 나누어 줍니다. 만약 권한이 많고 복잡해서 1, 2, 3, 4중에 1,2만 해당 페이지에 접근하게 만들고 싶다면 해당 페이지들만 또 다른 Routes로 분리하면 됩니다. 코드 작성법 폴더 구조 /routes/private AdminRoutes.js import CommonLayout from "../../../layout/CommonLayout"; import UserList from "../../../pages/user/UserList"; const Admin..

프로세스 React Context에 로그인 정보를 담아서 전역적으로 사용할 수 있도록 한다. 상태를 관리하는 store가 따로 없다. React Context란 https://www.notion.so/shin96bc/React-da0323bb125049a7a544bf2715d99906?p=47b34a0f354649fc8459dea47be0b684&pm=s 코드 작성법 폴더 구조 AuthContextProvider import {createContext, useContext} from "react"; // AuthContext는 Hook을 사용해서 제공한다. const AuthContext = createContext(null); export const useAuthContext = () => { retu..

프로세스 Redux에 로그인 정보를 담아서 전역적으로 사용할 수 있도록 합니다. 상태를 관리하는 Store가 따로 존재합니다. 코드 작성법 폴더 구조 store LoginDataSlice.js import { createSlice } from "@reduxjs/toolkit"; const initialState = { token: '', name: '', isValidToken: false }; const LoginDataSlice = createSlice({ name: 'loginData', initialState, reducers: { login(state, action) { return {...initialState, ...action.payload, isValidToken: true}; }, lo..

Atomic Design(아토믹 디자인)이란? 아토믹 디자인은 디자인 패턴중에 하나입니다. 가장 작은 원자단위부터 원자가 모여서 분자를 이루고 분자들을 모아서 유기체를 형성하고, 유기체를 모아 하나의 템플릿으로 만들 수 있으며, 템플릿에 데이터를 주입해서 최종적으로 페이지를 생성하는 구조입니다. 아토믹 디자인은 총 5단계를 거쳐서 컴포넌트를 생성하고, 최종적으로 완성된 페이지를 유저에게 제공합니다. 그 과정에서 생성한 원자, 분자, 유기체 등은 재사용이 가능하기 때문에 유지보수가 용이해집니다. Atomic Design의 5단계 atoms(원자) Button, Input 등과 같은 범용적이고 가장 기본적인 Component들이 여기에 해당합니다. 원자에는 컬러, 폰트, 애니메이션 같이 추상적인 요소가 포함..