타입스크립트로 블로그 만들기(미완같은 완성)

만들고 있는 블로그

23.1.23 기준

오늘 작업 : 저장된 데이터 수정버튼 만들어서 수정 axios.put 구현

설치한 내용들

• db.json
• axios

원리

• db.json에 저장된 데이터를 axios로 통신하여 가져온 것을 put 메서드로 수정
• 특정 id 값만 수정할 수 있게 하고 수정할 내용도 string으로 타입 설정

주요 코드

  // 수정 useState
  const [editContent, setEditContent] = useState({
    title : "",
    content:"",
  });

...
...

  // 글 수정하기
  const onEditContent = async (contentId : number, title : string, content : string) => {
    // 제목, 컨텐츠 같이 고칠 수 있게 하기
    axios.put(`http://localhost:3001/contentList/${contentId}`, {
      title,
      content,
    })
    setToggle(false)
    // 고친 후 토글 닫기
    const { data } = await axios.get('http://localhost:3001/contentList')
    setContentList(data)
    // 새로고침 안 해도 나오게 get 처리
  }
  // 토글값 설정
  const [toggle, setToggle] = useState(false)
  const toggleMenu = () => {
      setToggle(!toggle)
  }

고민한 점

• put을 쓸지 patch를 쓸지 고민했다가 put으로 바꿈(patch에서는 작동되지 않는 코드였음)
  => put vs patch 차이 상기하기

문제점

• 토클값이 같아서 모든 토글이 다 열리는데 이걸 해결 못 함.

해결하려고 시도해본 것

1. 토글을 모달로 바꿔본다 => 모든 모달이 다 열린다. 실패
2. 파일을 나눠 props를 줘서 해결해본다 => 부모/자식 프롭스가 제대로 연결이 안 되고 애초에 프롭스로 뭔가 전달하기가 안 되고 있었다. 실패
3. 혹시 하는 마음에 map 안에 안 돌고 있는게 아닌가 확인해본다 => 잘 돌고 있다. 실패
4. 가장 현실적인 방법으로 array원리를 이용해서 toggle을 array로 바꿔서 여기에 contentList만큼 false를 넣고 이걸 열 때마다 true로 바꿔본다 => 취지는 좋았으나 무한 렌더링이 걸린다. 실패.(무한 렌더링 해결했지만 이상한 함수가 setToggle에 들어가게 된다.)

오늘 작업의 교훈 : axios의 put이 핵심이었다. 그리고 오늘 못 찾은 것 언젠가 찾아내자. 일단 진도 나가기로.(각자 바뀌긴 하니까)

최종 교훈 : 타입스크립트는 Todo 형태도 생각보다 어렵다. 많이 공부해야겠다. 다른 것도 만들어보자.