로그아웃 기능 , 디폴트 토큰

유효한 토큰일 때만 pong 요청을 받을 수 있음

알림창 + boolean 값 리턴

• window.confirm() 은 알림창에 예/ 아니오의 결과를 띄움
  

해당 결과값 ? 요소1 : 요소 2 = 해당 결과값이 존재한다면 ...

디폴트 토큰값

• 자동으로 유효한 토큰을 헤더에 들고가게끔 만들기
• 디폴트 값으로 헤더에 토큰을 들고가게끔
  

  다음 axios 요청 시에 자동으로 헤더에 토큰을 들고 감

ProtectedRoute = 보호로직

로그인한 회원만 접근하게 만든다.

1. 보호로직을 담은 요소 생성하기

• 보호되는 대상 = children
• protected route 에 안될시 navigate 로 이동시킴
  

2. protected route 요소로 보호하고 싶은 요소를 감싸기
   

드래그 드랍(파일 업로드)

• 직접 디코딩해서 svg 을 읽어오거나 파일 표시해서 직접 url 로 가져오기
• 파일이 들어간 form 데이터는 헤더의 옵션에 추가해줘야 한다.
  
• dto 에 있는 파일 유형은 json 응답 불가
  

• 등록된 이미지가 있다면 reset 시 기존 이미지 저장

axios.get("/user")
    .then(res => {
        console.log(res.data);
        setUser(res.data);

        // 🔹 기존 프로필 이미지가 있으면
        if (res.data.profileImage) {
            setImageSrc(`/upload/${res.data.profileImage}`);
            setSavedImageSrc(`/upload/${res.data.profileImage}`);
        }

• 등록된 이미지가 없으면 기본 이미지 svg 로 표시하기

else { 
    // 🔹 기본 SVG 이미지를 읽어서 프로필 이미지로 설정
    const svgString = new XMLSerializer().serializeToString(personSvg.current);
    const encodedData = btoa(svgString);
    const dataUrl = "data:image/svg+xml;base64," + encodedData;

    setImageSrc(dataUrl);
    setSavedImageSrc(dataUrl);
}

"프로필 이미지가 있으면 URL로 가져오고, 없으면 기본 이미지를 SVG로 읽어서 보여주는 것!"

비밀번호 수정

보완