로그인을 하면 uid를 리덕스 스토어에 저장을 하고, 해당 유저의 급여내역을 보여주는데, 리덕스에 저장되어있던 uid로 조회를 한다. 그리고 유저는 ex) 12월의 급여내역을 보면서 해당 월의 정정신청을 할 수 있는데, 정정신청 내용을 파이어베이스로 보내야하고, 정정 신청 내역에서 요청한 내역들을 불러와서 조회할 수 있어야한다. loginAuthSlice const initialState: LoginState = { uid: null, isLogined: false,};const loginAuthSlice = createSlice({ name: "loginAuth", initialState, reducers: { setUid: (state, action: PayloadAction) => { sta..
왜 그동안 한번도 만들어보지 않았던거지?? 생각해보면..mui 가 있기때문에 만들생각안하고 가져다 쓰기만 했다. 이번 기회에 이왕이면 커스텀으로 만들어보자.>!!! 동작예상: 사용자가 셀렉트 박스를 클릭하면 옵션이 드롭다운 형식으로 나타나고옵션을 클릭하면 선택된 값이 업데이트되고 드롭다운이 닫힌다.React 컴포넌트 설계 상태(State): 어떤 데이터가 동적으로 변경되는가?isOpen: 드롭다운 열림/닫힘 상태.selectedValue: 현재 선택된 값.Props: 외부에서 전달되는 데이터는 무엇인가?label, options, placeholder, value, onChange 등.상태 관리isOpen:사용자가 셀렉트 박스를 클릭하면 열림(true) 또는 닫힘(false) 상태로 변경.useStat..
일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다.하지만 때때로 이런 tree구조가 불편함을 가져다주기도 해서, 이럴 때 부모-자식 관계를 유지하지만 독립적인 위치에서 렌더링을 하면 훨씬 편리한 경우가 있다. 대표적인 예로 modal은 부모 컴포넌트의 스타일링 속성에 제약을 받아 z-index 등으로 번거로운 후처리를 해줘야한다.이러한 상황에서 portal을 통해 독립적인 구조와 부모-자식 관계를 동시에 유지할 수 있다면, z-index 등 부모 컴포넌트의 제약에서 벗어날 수 있다. 1. portal로 modal 구현하기2. dim영역 클릭시 모달 닫기3, 브라우저 뒤로가기 방지-> 이벤트 처리 1. portal로 modal 구현하기 Porta..
쿠키나 스토리지 없이 데이터를 공유/관리1. 싱글톤 패턴이란?싱글톤 패턴은 프로그램에서 하나의 인스턴스만 생성해서 모두가 그 인스턴스를 공유하는 방법이에요. 이걸 통해 여러 곳에서 같은 데이터를 사용할 수 있게 해줍니다.예를 들어, 우리가 데이터를 한 곳에서 관리하고, 그 데이터를 여러 페이지에서 공유하고 싶을 때, 싱글톤 패턴을 쓰면 모든 페이지가 같은 데이터를 사용할 수 있습니다.2. 어떻게 동작하나요?singletone이라는 객체를 하나 만들고, 그 안에 데이터를 저장할 수 있어요.데이터는 setData라는 함수를 통해 저장하고, getData라는 함수를 통해 불러올 수 있어요.export const singletone = (function() { let initData = null; // 여..
