타입스크립트로 블로그 만들기

만들고 있는 블로그

23.1.22 기준

오늘 작업 : 저장된 데이터 삭제버튼 만들어서 삭제시키는 axios.delete 구현

설치한 내용들

• db.json
• axios
  (어제와 동일)
• 변경한 내용 : uuid 제외 => number타입으로 id 값 고정

원리

• db.json에 저장된 데이터를 axios로 통신하여 가져온 것을 delete 메서드로 삭제
• 특정 id 값만 삭제할 수 있게 id값을 uuid에서 number 타입으로 변경
• 삭제할지 말지 사용자 입장에서 한 번 더 실수하지 않게 window.confirm 설정

주요 코드

import axios from 'axios'
// axios 설치 및 import


  interface A {
    title: string;
    content: string;
    id:number; // => number 지정
  }
  // type 지정 => 타입에러 나는 부분 수정하여 타입 지정
  

  let nextId = 0
// uuid 대신 id 초기값 설정
  ...
  ...
  
const fetchContents = async () => {
  const {data} = await axios.get('http://localhost:3001/contentList')
  // data fetcing
  setContentList(data)
}
  useEffect(() => {
    fetchContents();
  },[])
  // 랜더링 위한 useEffect
  
  // 게시글 추가
  const addContent = () => {
    if(content.title === "" || content.content === "") {
      return alert("빈값은 등록할 수 없습니다!")
    }
    setContentList([...contentList, {...content, id:nextId + 1}])
    // 초기값에 1을 더하는 식으로 id 값을 계속 늘려나가기
    
    axios.post('http://localhost:3001/contentList', content)
    // post 위한 설정
    setContent(contentInitialState)
  }
  ...
  ...
  // 게시물 삭제 => redux로 상태관리 안 하고 axios만 하면 꼭 get 해주기
  // 타입 신경쓰기(uuid 안 쓰니 number로)
  const deleteContent = async (contentId : number) => {
    axios.delete(`http://localhost:3001/contentList/${contentId}`)
    const { data } = await axios.get('http://localhost:3001/contentList')
    setContentList(data)
  }
  
  ...
  ...
  
<DelBtn onClick={() => {
          const result = window.confirm("이 작성글을 지우실꺼에요?")
          // 글 지울것인지 아닐지 물어보기 기능 : 사용자 편의 증가
          if(result) {
            return deleteContent(content.id);
          }else{
            return;
          }
        }
          }>삭제</DelBtn>  

오늘 작업의 교훈 : axios의 delete가 핵심이었다. 그리고 id 값을 정확히 짚어주지 않으면 삭제가 안 된다. 타입스크립트는 더더욱 타입을 맞춰줘야 한다. 안 그러면 uuid의 경우 두 번 눌러야 지워졌다.