seopport.log

마이페이지에서 프로필 수정 구현하기 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를 사용하여 요소의 쌓임 순서를 ..

🔽Github GitHub - picoloman6/nbc_travel_vibe: 내일배움캠프 리액트 4기 - 여행 블로그(팀 프로젝트, 작업중) 내일배움캠프 리액트 4기 - 여행 블로그(팀 프로젝트, 작업중). Contribute to picoloman6/nbc_travel_vibe development by creating an account on GitHub. github.com 🔽 배포 사이트 Travel Vibe nbc-travel-vibe.vercel.app

NavLink isActive 스타일 적용 문제 문제: 헤더 부분에서 Navlink를 사용하여 활성 상태에 따라 스타일을 적용하려 했으나, 현재 페이지의 URL이 NavLink의 to값과 일치함에도 isActive의 상태에 따라 지정한 스타일이 올바르게 작동되지 않는 문제가 발생했습니다. 시도: isActive props를 넘겨줄 때 path 비교 로직 추가하기$isActive prop을 받아와서 isActive 상태로 스타일을 제어하려고 했으나, opacity가 계속해서 100%로 적용되었습니다.이 경우 useLocation으로 path를 받아와서 NavLink isActive props에 현재 path와 비교하는 로직을 추가하여 해결할 수 있었습니다. $isActive={pathName==='/경로'..

parseInt는 공백 있거나 해도 대충 숫자면 다 변환해줌 문자열 있어도 제외하고 숫자만 반환 Number은 엄격하게 체크 태그에 onClick 같은 건 있는데 내가 스타일드를 위해 선언한 props는 인식할 수 없자나 그니까 스타일드에서만 받는 프롭스는 딸라를 붙여줘 마지막 아이템에만 적용되는 스타일: IconWrap에 margin-left: auto;를 적용하여, 마지막 아이콘만 오른쪽 끝으로 이동시킬 수 있습니다. 이 방법은 Flexbox에서 한 요소를 나머지 요소들로부터 분리하여 오른쪽으로 밀어내고 싶을 때 유용합니다. span 등 inline 속성의 margin은 양 옆으로만 적용 때문에 위 아래 마진을 적용하고 싶으면 inline block을 지정해 주거나 block 속성태그를 사용해야한다...