프론트엔드/React

repo: https://github.com/fe-jhw/react-access-guardnpm: https://www.npmjs.com/package/react-access-guard관리자 사이트를 개발하다 보면, 사용자 권한에 따라 버튼이나 페이지를 숨기거나 "권한이 없습니다."와 같은 안내 메시지를 표시하는 기능이 거의 필수적이다. 이러한 기능은 사용자 경험을 개선하고 보안을 강화하는 데 중요한 역할을 한다.이러한 권한 관리 기능을 보다 효율적으로 처리하기 위해, 선언적으로 사용할 수 있는 라이브러리를 개발해 보았다.구현권한 정보를 React의 Context API를 활용하여 제공하고, AccessGuard 컴포넌트에서 해당 권한을 조회하도록 구현했다. 권한이 있을 경우에는 children을 렌더링..

pub/sub 방식의 통신 패턴window의 eventListener 작동과 거의 유사하다.이벤트 발생시 해당 이벤트를 구독하는 곳에서 콜백을 실행한다.구현출처: https://github.com/DawChihLiou/eventbus-demo/blob/main/eventbus/eventbus.tstype EventKey = string | symboltype EventHandler = (payload: T) => voidtype EventMap = Recordtype Bus = Recordinterface EventBus { on(key: Key, handler: T[Key]): () => void off(key: Key, handler: T[Key]): void once(key: Key, hand..

웹 접근성 웹 접근성은 모두가 사용할 수 있도록 웹사이트를 디자인, 개발하는 것 - 시각장애인이 보조기구(스크린 리더)로 웹 사용 출처: React 공식 문서 Semantic 태그 div만 쓰지 말고, 적절한 semantic 태그를 사용하자 ex) main, aside, header 등등 aria-role, onclick aria-role WAI-ARIA: https://www.w3.org/TR/wai-aria/#roles_categorization 보조기구가 각 요소의 역할을 알 수 있게 해줌 유효한 role (ex: button)만 줘야 함 aria-unsupported-elements: meta, html, script, style 태그들은 aria-role 미지원 onclick 태그에 onClic..

https://www.youtube.com/watch?v=UUga4-z7b6s&list=LL&index=2 Junior vs Senior React Folder Structure - How To Organize React Projects - Web Dev Simplified 강의를 듣고 정리해봤다. 구조 assets : 공통으로 사용하는 .css , 이미지 등 components : 공통으로 사용하는 컴포넌트 ui, form 디렉토리를 따로 둬서 관심사 별로 분리 context : 공통으로 사용하는 컨텍스트 data : 공통으로 사용하는 데이터 ex) 리덕스, 리코일 등의 상태 저장소, json 파일, 상수 등 features : 특정 주제(ex) auth, user, stats)에 관한 componen..

IntersectionObserver는 무한 스크롤 or 이미지 lazy loading 등 다양한 곳에서 활용할 수 있다. react, typescript 환경에서 쉽게 IntersectionObserver를 활용할 수 있는 커스텀 훅을 제작했다. Typing interface UseIntersectionObserverRefProps { readonly callback: IntersectionObserverCallback readonly options?: IntersectionObserverInit readonly type?: 'callback' | 'ref' } export const useIntersectionObserverRef = ({ callback, options = { root: null, ..

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다. - 공식문서 활용 모달을 구현할 때 유용하게 활용할 수 있다. 모달을 구현 시 제일 까다로운 부분은 z-index 설정이다. z-index는 부모 안에서만 적용되기 때문에 다른 컴포넌트가 z-index가 더 높은 경우 모달이 해당 컴포넌트에 가린다거나 하는 문제가 발생한다. 그렇기 때문에 최상위 컴포넌트에 조건부 렌더링으로 모달을 달아놓고 redux로 해당 상태를 관리해서 모달을 구현하는 식으로 사용을 했었다. {...생략} {isModalOpen && } 하지만 이렇게 구현했을 때는 많은 문제점이 있다. 1) 모달에 정보를 줄 때 redux를 활용함 - 이는 redux의 본래 취지(많은..

커스텀 훅으로 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다. - 공식 문서 예를 들어 상태 변수중에 컴포넌트가 마운트되고 data를 fetch해서 useEffect에서 상태값을 변경해줘야 하는 경우에 사용할 수 있다. 적용 현재 진행하고 있는 프로젝트에서, 많은 페이지에서 검색 필터 팝업을 공통적으로 활용하고 있다. 현재 검색 필터 팝업은 외부를 클릭했을 때 팝업창이 닫히지 않는 문제가 있어서, PM님이 이 부분을 해결해달라고 했다. 기존의 로직은 컴포넌트에서 열림 상태를 관리한다. isOpen && , 이런 식으로 버튼 눌렀을때 isOpen을 true로 만들고 팝업이 뜨게 하는 로직이다. 이 팝업창의 외부를 클릭시 닫히게 하기 위해서 2가지 방법을 고려했다. 1) 외부에 투명배경의 viewport..

컴포넌트를 가져와 새 컴포넌트를 반환하는 함수 여러 컴포넌트에서 같이 쓰이는 로직이 있는 경우(로그를 찍는다거나, 팝업의 위치를 계산하는 경우) 중복해서 컴포넌트마다 코드를 작성하지 않고, HOC를 활용해서 중복을 줄이고 재사용성을 높일 수 있다. 형태 function HOCexample(Component) { return class extends React.Component { componentDidUpdate(...) render() { return } } } 이런식으로 해서 lifecycle method 안에 내용을 추가하거나, Component에 prop을 계산해서 넣어주는 등의 동작을 할 수 있다. compose(A,B)(C) 요런식으로 여러개를 합쳐서 쓰거나 할 수 도 있는데 이런 식으로는 아..