BE협업 논의사항 정리

[hookor]

클라이언트 암호화 관련 사항

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

• ⬆포스트 바탕 요약

JWT로 유저인증

• refreshToken을 secure httpOnly 쿠키로, accessToken은 JSON payload로 받아와서 웹 어플리케이션 내 로컬 변수로 이용

로그인 만료 처리

• 1. POST /login: 이메일, 비밀번호를 보내면 refreshToken과 accessToken을 리턴한다.
• 2. POST /silent-refresh: 쿠키에 담긴 refreshToken이 자동으로 보내지면 새로운 refreshToken과 accessToken을 리턴한다.
     • => API추가 가능한지 여부 / 이전 프로젝트에서는 없던 API였기 때문에 단순 세션만료 alert로 예외처리만 적용

그래서 로그인 과정

• secure 쿠키 전달을 하려면 프론트(React)와 로그인 API를 제공할 백엔드(서버 API)는 같은 도메인을 공유해야한다. (예: 클라이언트: https://shop.abc.com, 서버 API: https://api.abc.com)
  백엔드는 HTTP 응답 Set-Cookie 헤더에 refreshToken 값을 설정하고 accessToken 을 JSON payload에 담아 보내줘야 한다.

  • => 의문1 . 백엔드에서 ssl인증처리를 하는 것이 쉬운가? ( 배경: FE 2차과제 서버 api에서는 https요청으로 API 사용에 문제가 없었지만 3차과제에서는 강사님이 제공하신 경로에 ssl인증이 처리되지 않아 잡음이 많았음. 차후에 ssl인증처리하신 후 API 사용이 가능했지만 FE측에서는 이 처리과정이 쉬운지 어려운지 가늠불가 => ⬇아래의 비슷한 상황의 글 발견 )

https://velog.io/@jiheon788/Netlify%EC%97%90%EC%84%9C-HTTPS-HTTP-%ED%86%B5%EC%8B%A0-%ED%95%B4%EA%B2%B0-%EA%B3%BC%EC%A0%95

• ⬆포스트 바탕 요약

  • 문제상황 1: 클라이언트(HTTP) -> 서버(HTTPS)

    • 해결이 쉬우며 netlify(FE deploy)에서는 https자동 적용으로 현재 당면한 문제케이스가 아님

  • 문제상황 2: 클라이언트(HTTPS) -> 서버(HTTP)

    • 현재 케이스지만 서버측 ssl인증에 비용적인 문제 발생
    • 해결책 => (프론트에서 코드 추가 처리로 해결 가능) 리다이렉트 경로를 설정하여 모든 요청을 브라우저에서 추가로 연결하지 않고, CDN서버에서 바로 프록시 시키는 방식을 사용해 서버와 통신을 가능하게 하는 것입니다.
    • 다만 해결책의 경우만 믿기에는 배포 중 실패가능성도 존재하며, 또다른 어떤 예외상황이 발생할지 알 수 없음.

프로필 파일 첨부 전송 사항

/* 이전 프로젝트 코드입니다. 요약: string으로 전달됩니다. 코드는 신경쓰실 필요 없게 간략히 과정 설명 적어뒀습니다.*/

  // 이미지 convert base64
  const onChangeImage = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, isThumb: boolean) => {
      if (!e.target.files?.length) {
        return
      }
      const reader = new FileReader()
      // 1.FileReader()를 통해 사용자 로컬에서 파일을 불러옵니다.

	  reader.readAsDataURL(e.target.files[0])
	  // 2. base64로 인코딩된 값을 반환합니다.
	  
      reader.onloadend = () => {
        const base64 = reader.result
		// 3. result - 파일을 비트맵 데이터로 리턴해줍니다. 
        if (base64) {
          isThumb
            ? setThumbnailImage(base64.toString())
            : setDetailImage(base64.toString())
        }
        //4. 변환된 비트맵 데이터를 string으로 바꿔줍니다.
      }
    },
    []
  )