오늘 주로 공부한 것(코드 짜본 이슈들)

1. async & await를 활용한 todolist 리스트 상세보기 및 취소하기

(TodoList.jsx)
const onDeleteHandler = async(id) => {
  await axios.delete(`http://localhost:3001/todos/${id}`)
  const {data} = await axios.get("http://localhost:3001/todos")
  setTodos(data)

  // async await로 id 값 추적 후 지우고 나머지는 가져와서 아래서 mapping
  ....
  ....
  <StDelButton type="button" onClick={(event) => {
                                                        event.stopPropagation();
                                                        // 이벤트 버블링을 막는 법. 삭제, 여백 등 같이 있을 때 이벤트가 퍼질 때 막는 것
                                                        const result = window.confirm("이 할일을 지울까요?");
                                                        if (result) {
                                                        return onDeleteHandler(todo.id);
                                                        } else {
                                                        return;
                                                        }
                                                        }}>삭제</StDelButton>
        </STContent>)
  
  

고민한 점 :

• 삭제를 하지 않았는데 취소 버튼을 눌러도 상세보기로 들어가서 여러 팀원들과 고민해봄.
• 분명 async await를 쓰는 것 같은데 잘 생각이 나지 않아 머리를 맞댄 결과 일단 내가 해놓은 div 와 button 이벤트가 겹치는 것을 막아줘야 했어야 함.
• 그래서 쓴게 stopPropagation() 이벤트 컨트롤러.
• 이후에는 삭제가 되지 않아 고민하다가 비동기처리로 삭제 완료.

2. 상세보기 페이지에서 내용 수정하기

const TodoDetail = () => {
  const {id} = useParams();
  // params로 받으면 String
  const navigate = useNavigate();
  const [detail, setDetail] = useState([]);
  // 왜 초기값이 array인가? : map으로 돌린...
  // 예전 todo find 생각하면...
  
  const fetchTodos = async () => {
    const { data } = await axios.get(`http://localhost:3001/todos/${id}`);
    // api 사용해서 값 하나만 가져올 수 있다. find filter 필요 없다.
    setDetail(data);
  }
  const [editTodo, setEditTodo] = useState({
    body : ""
  });

const onClickEditButtonHandler = async() => {
  // 위에 변수가 선언되었는데 또 매개변수 넣을 필욘 없다.
const res = await axios.patch(`http://localhost:3001/todos/${id}`, {body : editTodo.body});
// res? : 요청에 대한 응답(response, html) : google.com 쳤을 떄 무슨 일 일어나는지 생각해보기.
setDetail({
  ...detail,
  body : res.data.body
})
// 패치로 변경 했다. 스테이트가 바뀌어야 하는데... 요청만 보내고 끝났다.
// 통신 후 response를 받는다.
// 수정하기를 누르면 json서버로 보내진다. 변한다. => useEffect가 필요하지 않을까?
// 무슨 데이터가 오는지 받아봐야 한다.(리덕스와 엑시오스 유연하게 사용)
// 수정하자마자 클라이언트 단에서 업데이트, 서버로 데이터 직접 보냄

};


useEffect(() => {
  fetchTodos();
}, []);
  
  ....
  ....
  
  <div key={detail.id}>
            <StTitle>{detail.title}</StTitle>
          <StBody>{detail.body}</StBody>
          </div>}
        </div>
        <input
            type="text"
            placeholder="수정본문값 입력"
            onChange={(event) => {
              setEditTodo({
                ...editTodo,
                body: event.target.value,
              });
            }}
          />
        <StEditButton type="button"
              borderColor="#ddd" onClick={onClickEditButtonHandler}>
                본문수정
            </StEditButton>

고민한 점

• 일단 연결이 안 된다. patch를 썼는데 왜 안 되었는지 몰랐다.
• patch가 어떻게 작동하는지 알게 되었다. 그리고 edit 등 별로 필요 없는 매개변수는 지워버렸다.
• 기술매니저님 코칭으로 주석 달아놓은대로 이해하다보니 해결되었다.
• 애초 로직이 잘못되었다. 패치에서 바로 1개 값만 가져오면 되기 때문에 따로 필터링하거나 파인딩 할 필요도 없었고 맵핑도 할 필요가 없었다.
• 일단 미완이지만 어느 정도 기능은 끝났다.

3. 내일 할 일

1. 본문 수정하기(글쓴거 숨기기 & 창 숨기기 & 버튼)
2. 댓글CRUD