I T H

관리자용 페이지중에서 사용자 데이터를 관리하는 페이지를 만들려고 한다. 먼저 db에 저장되있는 사용자 데이터들을 조회해 오고, 조회해온 데이터를 수정, 삭제하는 기능과 사용자를 등록하는 기능까지 구현할 것이다. 사용 라이브러리는 mui/x-data grid 를 사용해서 테이블을 구현했고, row를 클릭할 경우 modal 이 뜨게 할 것이다. modal 라이브러리는 mui/material의 modal을 사용했다. Frontend - 구현에 들어가기 앞서, 필요한 라이브러리( mui )를 먼저 다운로드 받아준다. https://mui.com/material-ui/getting-started/installation/ Installation - Material UI Install Material UI, the ..

이번 챕터는 마이페이지의 이미지 파일 업로드에 대해 다뤄보고자 한다. 마이페이지에서 사용자가 원하는 이미지를 등록할 수 있고, 이미지를 제거 할 수 있다. Frontend [ pages / Mypage / index.tsx ] - 아래 코드를 추가해준다. - "이미지 업로드 컴포넌트 UserImageFile"에 props로 myData의 userImage와 함수 handleUmageChange를 보내준다. //이미지 업로드 함수 const handleImageChange = (updatedImage: string) => { setMydata((prevState) => ({ ...prevState, userImage: updatedImage, })); }; 이미지 [ pages / Mypage / User..

이번 챕터는 사용자의 개인정보를 수정 및 조회 할 수 있는 마이페이지의 로직이다. 마이페이지 로직의 챕터(1)은 리덕스 스토어에 저장된 데이터를 불러와서 화면에 출력시켜주고, 수정된 데이터를 db로 보내 업데이트 시켜주는 과정까지 할 것이다. 다음 시간(2)에는 마이페이지의 이미지 업로드에 대해서 다뤄보겠다. Frontend [ types / mypage.ts ] - 먼저 마이페이지에서 쓸 타입들을 정해놨다. - 리덕스에서 불러온 데이터들을 useState의 값에 넣을 것이므로, 타입은 리덕스의 userData 타입들과 일치시켜준다. export interface mypageValue { userId: string; userPassword: string; userPasswordCheck: string; ..

로그인 및 인증 처리 완료시 리덕스 스토어에 변수 isAuth 가 true로 바뀌는 것까지 했다면 이번 챕터에서는 isAuth or Role의 값에 의해 페이지경로가 다르게 처리되는 로직을 하겠다. 즉, 관리자 페이지 or 로그인 or 로그인이 안했을경우 페이지가 각각 다르게 처리되야 하므로, redux store에 있는 값들(isAuth, role의 값)을 불러와서 header부분과 app.tsx의 route부분을 각각 처리해주자! Frontend [ src / layout / Header / index.tsx ] - 먼저 redux의 useSelector 훅을 사용해서 isAuth의 값과 role의 값을 불러온다. - auth가 true이면 로그인이 완료되었기에 마이페이지와 로그아웃이 보이게 하고, ..

이번 챕터는 로그인 로직 2번째 - 백앤드로부터 받아온 토큰을 headers의 Authorization에 넣어 백앤드로 보내고 백앤드에서 지정해놓은 secret key를 이용해 유효한 토큰인지 확인한 후 데이터를 프론트로 전달하는 단계까지 하도록 하겠다. - 로그인 뿐만 아니라 인증이 필요한 경우가 많으므로, 로그인 후에 인증요청시 토큰을 보내서 백앤드에서 유효한 토큰인지 확인하는 과정이다. - Frontend [ App.tsx ] - redux store에 저장된 데이터를 가져오기 위해 useSelector를 사용한다. 타입을 미리 지정해놓았기 때문 useAddSelector를 통해 isAuth를 불러와서 사용하도록 하였다. - isAuth 부분이 true가 되었다면 로그인이 완료되었다는 뜻이므로, 로..