프로그래머스 데브코스 TIL Day 15

Day 15 - 2022/11/04

💡 새롭게 알게된 점

낙관적 업데이트

오늘 강의 내용 중 강사님께서 낙관적 업데이트에 대해서 얘기해주셔서 낙관적 업데이트에 대해서 공부해보았다.

낙관적 업데이트가 무엇이고 왜 필요할까?

흔히 개발을 하다보면 HTTP 통신같이 비동기 처리가 필요한 로직에서, 응답 값이 올 때까지 시간이 오래 걸리는 경우가 빈번하게 있다.

이럴 때 isLoading 상태를 선언해 요청 전에 isLoading 값을 true로, 응답이 오면 isLoading 값을 false로 만들어 요청-응답 시간 사이의 공백을 로딩 화면으로 구현하곤 한다.

그런데 만약 요청-응답 시간이 오래 걸린다면?

사용자 입장에서 요청이 실패한 것인지 단순히 오래 걸리는 것인지 구분할 수 없어 무분별하게 통신 요청을 날릴 수 있다. 쓸데 없는 통신으로 인해 서버의 성능이 저하되어 낭비가 일어난다.

그래서 낙관적인 업데이트가 필요하다.

낙관적 업데이트는 클라이언트 단에서 서버로 보낸 요청이 무조건 성공한다는 가정 아래에 사용자가 입력한 정보를 화면에 즉시 렌더링한 다음 서버로 보내는 방식으로 동작한다.

낙관적 업데이트를 사용하여 통신 전 화면에 사전으로 업데이트 후, 요청에 대한 응답이 성공적으로 온다면 상태를 다시 업데이트할 필요가 없고, 응답이 실패한다면 사전 업데이트한 상태를 업데이트 하기 전으로 돌려주면 된다.

만약 실패한 경우 기존 상태로 돌려주는 작업이 필요하여 개발 비용이 더 들지만, 사용자에게 편리성을 준다는 장점이 있다.

기존 상태로 돌려주는 작업이 필요하기 때문에 미리 화면에 렌더링했을 시 부작용이 적은, 비교적 가벼운 요청에 적용한다.

예를 들면 페이스북의 댓글이나 좋아요 기능이 있다.

낙관적 업데이트의 예시

new TodoForm({
    target,
    onSubmit: async (content) => {
        const todo = {
    	       content,
			   isCompleted = false,
        }
    
    	// 낙관적 업데이트 부분
		// ----------------
    	this.setState({
    		...this.state,
			todos: [
    			...this.state.todos,
    			todo,
    		],
    	});
		// ----------------
    
    	await request(API_URL, {
    		method: 'POST',
			body: JSON.stringify(todo),
    	});
    	await fetch();
});

---

❗️ 느낀점

여턔까지 낙관적 업데이트를 들어본 적도 없고 해본 적도 없었던 걸 보니 아직 공부가 많이 필요한 단계인 것 같다..

프로젝트를 할 때 통신 시 비관적 업데이트로만 렌더링을 수행했는데, 비관적 업데이트와 낙관적 업데이트의 차이점, 언제 비관적 업데이트를 쓰는게 좋은 상황인지 알게 되었으니 앞으로 활용할 수 있는 곳에 써먹어야겠다 🥹

오늘도 고생했다👊