1. Optimistic Update에 대해 설명해주세요.
-
의도 : UX에도 신경써서 개발 하고 있는지 확인하기 위한 질문
답변: 서버에 요청이 잘갔겠지 하며, 긍정적으로 생각하여 업데이트 하는 방식을 말한다.
클라이언트는 서버의 응답을 받아 새로운 정보를 화면에 렌더링한다. 하지만 이 방법은 유저가 변경 결과를 보는 데에 시간이 걸린다는 단점이 있습니다. 이럴 때 사용자 경험을 개선하기 위해 서버 응답이 오기 전에 미리 응답 상태를 예측하여 화면에 적용하는 방법이 바로 Optimistic Update입니다. -
장점 : 단점을 해결하기 위해 고려된 방법인 만큼 네트워크가 느린 환경에서 유용하다.
-
단점 : 서버와의 데이터가 다를 수 있다.
좋아요/찜하기/북마크/팔로우 예시
서버 요청이 정상적으로 잘 될거란 가정하에 UI 변경을 먼저하고, 서버 요청 하는 방식. 혹시라도 서버 요청이 실패하는 경우, UI 를 원상복구(revert / roll back)합니다.
const queryClient = useQueryClient()
useMutation({
mutationFn: updateTodo,
// mutate가 호출되면:
onMutate: async (newTodo) => {
// 모든 진행 중인 데이터 새로 고침 취소
// (낙관적 업데이트가 덮어쓰이지 않도록 하기 위해)
await queryClient.cancelQueries({ queryKey: ['todos'] })
// 이전 값을 스냅샷으로 저장
const previousTodos = queryClient.getQueryData(['todos'])
// 낙관적으로 새 값으로 업데이트
queryClient.setQueryData(['todos'], (old) => [...old, newTodo])
// 저장해 둔 현재의 할 일 목록을 반환하여 나중에 사용할 수 있도록 함
return { previousTodos }
},
// 만약 mutation이 실패하면,
// onMutate에서 반환된 context를 사용해 롤백
onError: (err, newTodo, context) => {
queryClient.setQueryData(['todos'], context.previousTodos)
},
// 오류 또는 성공 후 항상 다시 데이터 불러오기:
onSettled: () => {
queryClient.invalidateQueries({ queryKey: ['todos'] })
},
})
const { mutate: handleLike } = useMutation({
// 🎉 객체 구조분해할당을 이용해서 여러개의 데이터를 매개변수로 받을 수 있어요!
mutationFn: ({ id, currentLiked }) =>
todoApi.patch(`/todos/${id}`, { liked: !currentLiked }),
onSuccess: () => {
queryClient.invalidateQueries(["todos"]);
}
})
1.
useMutation을 사용하여 새로운 할 일을 추가할 때, Optimistic Update를 적용한다.
2. handleLike 함수는 할 일의 좋아요 상태를 변경하는 서버 요청을 처리한다.
2. 인증/인가의 관점에서 세션 방식과 JWT 방식의 차이점을 자세히 설명해주세요. 각 방식의 장단점과 실제 프로젝트 활용 경험이 있다면 공유해주세요.
- 인증/인가에서 세션 및 JWT에 대해 이해하고 있는지 확인
세션 방식은 유저가 로그인하면 서버는 이 유저 정보를 세션에 저장하고, 발급된 세션 ID를 쿠키를 통해 클라이언트 브라우저에 전달합니다. 이후 유저 인증이 필요할 때마다 클라이언트에서는 쿠키에 담긴 세션 ID를 함께 전송하고, 서버는 이 세션 ID를 받아 유저가 누구인지 확인해 인증을 허가한다.
JWT는 Json Web Token의 약자로, 유저가 로그인하면 서버는 유저 데이터, 만료 시간 등을 포함하는 토큰을 생성해 클라이언트에 전달한다. 이때 토큰에는 민감한 정보를 포함해서는 안 된다. 클라이언트는 받아온 토큰을 로컬 스토리지나 쿠키에 저장하고, 유저 인증이 필요한 요청에 해당 토큰을 포함하여 서버로 전송합니다. 서버는 받아온 토큰을 검증하고, 만료되지 않은 토큰이라면 인증을 진행한다.
큰 차이점은?
세션은 서버에서 세션 정보를 저장하고 있기때문에 서버 부하를 증가할 수 있는 단점이 있다.
JWT는 stateless이기 때문에 서버에 유저 세션 정보를 저장하지 않아 부하가 적다.
다만, JWT는 토큰의 서명 키가 노출되지 않게 관리해야한다.
JWT를 어떻게 관리하는지?
이러한 회원 가입 및 로그인을 구현한다 했을때,그때 JWT를 이용했었고, 역할 기반으로 접근 권한을 주기 위해 토큰 내용에 유저의 역할을 넣었다. 또한 보안 강화를 위해 httpOnly 옵션을 준 쿠키를 사용해 토큰을 저장하였다.
