[DAY-15] VanillaJS를 통한 JS 기본 역량 강화(7)
😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!
오늘의 소감은?
제가 지금 굉장히 빠르게 성장하고 있다는 것을 느낄 수 있는 오늘 하루였습니다.
HTML, CSS, JS를 다룰 줄 알았기에, 웹을 만들 수는 있었습니다.
어떻게든 기능이 돌아가기만 하면 되지 않을까 라는 마음으로 웹을 만들고 여러 공모전에서 시연했던 것 같습니다.
하지만 ‘협업하기 좋은 코드’, ‘가독성이 좋은 코드’라는 것의 추상적인 의미만 알았지 직접 실습을 진행해보지는 못했습니다.
또한 수많은 예외처리와 방어 코드 역시 작성해본 적 없습니다.
이번 3주차 실습을 진행하며 독립적인 컴포넌트 구성에 대해 이해했고,
각 컴포넌트 사이에 어떻게 데이터 교환이 이루어지는지 그리고 렌더링이 되는지를 이해했습니다.
여러 API를 효과적으로 다루는 법을 알았으며, 수많은 예외처리 방법을 익혔습니다.
프론트엔드 개발자는 항상 User experience를 최우선으로 생각해야 하는 개발자입니다.
사용자 경험, 즉 내가 정말 다양한 웹에서 당연히 누리고 있던 UI 경험들은 개발자들의 수많은 테스트와 예외 처리가 있었기에 가능했습니다. 오늘 input창 글자 유지시키는 부분에서도 저는 띵-했습니다. 전혀 생각지도 못했던 부분이었어요.
앞으로 몇 개월이 더 남았으니, 그동안 더 성장하도록 열심히 공부합시다..
[1] Simple Todo App
[1-1] 요구사항
- Users API를 통해 사용자 목록 그리고, 클릭하면 해당 사용자의 todo 목록을 가져옵니다.
- 할일을 추가하면 화면에 추가되고, API 호출을 통해 서버에도 추가됩니다.
- TODO를 추가하고 삭제하는 동안 낙관적 업데이트를 사용합니다.
- 서버와 통신하는 동안 서버와 통신중임을 알리는 UI적 처리를 합니다.
[2] 낙관적 업데이트
웹 업데이트 작업에는 낙관적(optimistic) vs 비관적(pessimistic) 업데이트가 있습니다.
낙관적 업데이트란,
데이터가 잘 추가될 것을 예상하고 미리 클라이언트쪽에 업데이트를 하는 것을 말합니다.
예를 들어 페이스북 코멘트 작성이 있습니다.
new TodoForm({
$target,
onSubmit: async (content) => {
const todo = {
content,
isComplete: false,
};
// 낙관적 업데이트 (ex 페이스북)
this.setState({
...this.state,
todos: [...this.state.todos, todo],
});
await request(`/${this.state.username}?delay=5000`, {
method: "POST",
body: JSON.stringify(todo),
});
await fetchTodos();
},
});
미리 setState를 해줌으로써, 서버에서는 로딩중이지만
사용자 입장에서 끊김 없는 렌더링을 경험할 수 있게 해줍니다.
이러한 방식은 안정적인 통신보다는, 사용자의 경험이 우선시되는 서비스에서 주로 이용합니다.
따라서 금융 거래와 같이 100% 안정적인 트랜잭션이 요구되는 서비스에서는 지양해야 할 기법입니다.
비관적 업데이트란,
데이터가 수정이 된 후에 화면이 갱신되는 기법입니다.
개발자 입장에서는 구현하기가 더 쉽겠지만, 사용자의 경험이 중시되는 웹 서비스에서는 사용성이 떨어질 수 있습니다.
따라서 낙관적인 업데이트, 비관적인 업데이트는 무엇이 좋다 나쁘다 할 수 없습니다.
웹의 특성을 고려하여 선택해서 개발을 진행해야 합니다.
댓글남기기