seopport.log

저번에 찍먹해본 모달창을 이번에는 직접 구현해보았다. 까먹을 수 있으니 기록해두기.. 1. 모달을 띄울 backgroud wrap(StModalWrap)과 모달창(ModalContainer)을 만든다 모달창 backgroud wrap의 부모 요소(MainWrap)를 position relative로, 모달창 backgroud wrap(StModalWrap)을 fixed로 설정하고 모달창 컨테이너는 absolute로 설정한 후 가운데 정렬한다. return ( {isRendered && } {isRendered && } ); } const StModalWrap = styled.div` width: 100%; min-height: 100vh; position: fixed; background-color: r..

마이페이지에서 프로필 수정 구현하기 1. 수정사항 확인하기 const handleModifyCompleteButtonClick = async () => { // 닉네임과 프로필 이미지 모두 원본데이터와 같으면 수정X if (userInfo.nickname === modifiedNickname && userInfo.avatar === imageSrc) { alert('수정사항이 없습니다.'); return; } 우선 수정 사항이 없으면 수정이 완료되지 않게 return으로 실행을 끝내준다. 닉네임과 프로필사진 하나라도 변경값이 있으면 수정이 진행된다. 2. 수정 할 사용자 정보 작성하기 const updateUserInfo = {avatar: imageSrc, nickname: modifiedNicknam..

patch가 자꾸 안돼서 애먹었는데 튜터님한테 여쭤보면서 개발자도구에서 디버깅 하는 법을 배워왔다 예를 들어 위 사진에서는 401에러가 뜨고 있는데, 콘솔에 data: {message: '토큰 검증에 실패했습니다.'} 라고 서버에서 에러메세지가 나온다. 네트워크에서 해당 요청을 눌러보면 Authorization의 Bearer 다음의 토큰 키값이 null이기 때문임을 알 수 있다. 페이로드 탭을 보면 이런식으로 HTTP 요청에 뭘 담아 보냈는지도 확인할 수 있다.

사실 인풋 자체를 커스텀한다기 보단 꼼수를 쓰는 것이라고 할 수 있다. 인풋 자체도 커스텀할 수 있지만 제한적인 면이 있는 듯 하다. const fileInput = useRef(); // jsx return부분 edit 파일 탐색기 input과 눌렀을때 탐색기가 열리게할 버튼(StEditButton)을 만든다. 파일 탐색기 버튼 input에 useRef로 참조를 걸어준다. const handleInputChange = e => {}; const handleEditButtonClick = () => { fileInput.current.click(); }; 그런 다음 내가 만든 StEditButton 버튼이 클릭되면 클릭이벤트 함수로 fileInput 참조 변수에 click 함수를 적용하여 파일 탐색기 버..

우선 라우터에서 로그인 안해도 볼 수 있는 페이지, 로그인 해야만 볼 수 있는 페이지로 중첩 라우팅을 구성한다. + Outlet 이해하기 부모 라우트 컴포넌트 안에 그 레이아웃 스타일을 상속할 자식 라우트 컴포넌트를 작성한다. 그런 다음 그 자식 라우트들을 렌더링할 곳에 Outlet으로 받으면 된다. 따라서 AuthLayout에서 Outlet으로 받으면 Home, MyPage, LetterDetailPage가 렌더링 되고 NonAuthLayout에서 Outlet으로 받으면 Loginpage가 렌더링 된다. 그런 다음 AuthLayout에서는 로그인 상태를 검사하여 만약 로그인상태가 아닐 경우 login페이지로 네비게이트하고 return으로 실행을 끝낸다. 로그인이 되지 않았을 때 페이지의 내용을 보여주지..

정규식 인풋에 영어와 숫자만 입력되게 하기 A-Za-z : 영어 입력되게 0-9 : 숫자 입력되게 -> 타겟의 value를 replace로 정규식의 조건에 맞춰서 치환해버림 const handleUserIdChange = (e) => { e.target.value = e.target.value.replace(/[^A-Za-z0-9]/ig, ''); setUserId(e.target.value); } 미들웨어 3초 후 에 디스패치해줘 -> 3초 기다리는 걸 미들웨어 없이는 구현하지 못함 이걸 할 수 있게 해주는게 미들웨어 Redux Thunk = dispatch에 객체가 아닌 함수를 dispatch할 수 있게 해준다. 중간에 우리가 하고자 하는 작업을 함수에 넣고그것이 중간에 실행 되는 것 액션이 리듀서로..

Redux Toolkit 리덕스 사용을 용이하게 하는 라이브러리 리덕스 툴킷에 필요한 값 세가지 : 타입이름, 이니셜스테이트(초기값), 리듀서 const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTodo: (state, action) => { state를 변경하는 코드 }, removeTodo: (state, action) => {}, switchTodo: (state, action) => {}, }, }); export const { addTodo, removeTodo, switchTodo } = todoSlice.actions; export default todoSlice.reducer; useEffect와 옵셔널 체..

css - modal 구현할 때 필요한 z-index z-index는 CSS 속성 중 하나로, 요소의 쌓임 순서(레이어 순서)를 지정합니다. 웹 페이지에서 여러 개의 요소가 겹쳐 있을 때, z-index 속성을 사용하여 어떤 요소가 다른 요소 위에 나타나는지 결정할 수 있습니다. z-index 속성은 정수값을 가지며, 값이 클수록 요소가 다른 요소 위에 나타납니다. 음수 값도 사용할 수 있습니다. 일반적으로 더 큰 z-index 값을 가진 요소가 다른 요소 위에 나타납니다. 그러나 z-index는 부모 요소의 컨텍스트 내에서 작동하며, 부모 요소의 z-index 값보다 더 큰 z-index 값을 가지는 자식 요소가 부모 요소의 바깥쪽으로 나타날 수 없습니다. z-index를 사용하여 요소의 쌓임 순서를 ..