2022-02-13 TIL

Fact

• 자바스크립트 코드 리뷰 스터디 Mission 4 Todo 업그레이드하기(할 일 목록 불러오기, 할 일 추가하기, 할 일 삭제하기, 특정 사용자의 할 일 전체 삭제하기, 할 일 완료 여부 토글 하기)를 구현했다.
• 자바스크립트 코드 리뷰 스터디 Mission 4 보너스 미션(Users 컴포넌트)를 구현했다. ex) 사용자 목록을 보여주고 클릭하면 해당 사용자 todoList 출력

Feelings

• 바닐라 자바스크립트로 코드를 작성하는 게 익숙해졌다. 역시 꾸준함이 답이다.
• 다른 사람과 내 코드를 비교하는 것도 참 많은 공부가 된다.

Findings

• 자바스크립트 코드 리뷰 스터디를 하는 도중 PUT을 사용해서 서버 api에 수정요청을 보내야 하는 일이 생겼다. TodoList의 아이템을 isComplete를 true로 변경해 주어야 하는데 왜 PUT을 사용하라고 했을까? 내가 읽었던 책들에서는 HTTP PUT 자체에는 인증 기능이 없기 때문에 PUT 메서드를 최대한 지양하라고 나와있었다. 그리고 isComplete 하나만 수정이 목적이면 PATCH가 나을 것 같다는 생각을 했다. 왜냐하면 PUT은 리소스의 모든 것을 업데이트하고 PATCH는 리소스의 일부를 업데이트하기 때문이다. 근데 또 GET, POST만 사용하는 게 안전하다는 사람들도 있는 것 같다. 자세한 건 https://security.stackexchange.com/questions/38635/how-is-http-put-and-delete-methods-insecure-if-they-really-are

todoList를 구현하면서 궁금한 게 생겨서 고수분들께 질문을 드렸다.

만약 todo 삭제나, 완료, 추가할때 이벤트 하나마다 발생할때마다 get으로 todoList를 다시 호출하나요? 아니면 state에 저장해놓고 state에서 수정하면서 수정 요청만 서버로 보내고 변경해야할 때 한번에 가져오나요? 카테고리나 검색 같은경우는 변경될떄마다 새로가져오는게 맞는것 같은데 투두리스트 같은경우는 좀 단위가 작아서 한번에 get하는게 맞을까요..?

내용 그대로다. 나는 예전에 장바구니 기능을 구현할 때 체크박스를 사용한 적이 있었다. 그때 당시 파워 삽질로 깨달음을 얻는 시기였기에, 그냥 fatch로 데이터베이스에 접근해 수정하고 response를 받아오도록 구현했었다. 그때 당시엔 다 만들고 나서야 이상함을 감지했다.

아니 체크박스 하나 체크했을 뿐인데, 장바구니 리스트가 리 렌더링 되면서 데이터를 받아와서 출력하는 데까지 눈으로 확인될 정도의 잠깐의 로딩이 걸렸다. 그래서 그때 당시 로컬 스토리지를 이용해서 로컬에서만 체크박스 상태를 바꾸고, 삭제, 구입 버튼을 누를 때 서버로 전달했다.

이때의 기억을 떠올려 나는 빠르게 질문했다. 주신 답변은

"리스트가 10~20개 수정할 때마다 내외면 리스폰스로 받고, 리스트가 많으면 로컬에서 상태 변경을 하는 게 좋다"

낙관적 업데이트를 하는가 마는가의 결정 같은데, 사실 이 부분은 정답이 없습니다. 주로 중요한 정보(결제 결과 등) 라면 낙관 업데이트를 하지 않고, 크게 중요하지 않은 정보(좋아요 누르기) 라면 낙관 업데이트로 처리하는 경우가 많습니다. 결론적으로는, 맞는다고 생각하시는 방향으로 개발하시면 될 것 같네요.

라는 조언을 남겨주셨다. 그래서 프로젝트 규모가 작고, todoList 같은 경우는 todo가 10개 이상 쌓이지는 않을 것 같아 변화가 있을 때 reponse로 가져와 출력하도록 구현했다.

Future Action

• 기초부터 완성까지 프론트엔드 책을 읽어야하는날인데 시간이 없어서 못읽었다. 내일 읽어야지
• 자바스크립트 코드리뷰스터디 마지막 주까지 달려보자.