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

만들고 있는 블로그

23.1.21 기준

오늘 작업 : db.json으로 새로고침해도 데이터 안 날아가게 만들기

설치한 내용들

• db.json
• axios

원리

• db.json에 저장된 데이터를 axios로 통신하여 가져오는 것이었음.
• 처음에 뭣 모르고 db.json만 깔아서 데이터 못 가져오던 것 하면서 익힘

주요 코드

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

const Blog = () => {
  interface A {
    title: string;
    content: string;
    id:string;
  }
  // type 지정 => 타입에러 나는 부분 수정하여 타입 지정
  
  ...
  ...
  
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:uuid()}])
    axios.post('http://localhost:3001/contentList', content)
    // post 위한 설정
    setContent(contentInitialState)
  }  

오늘 작업의 교훈 : axios의 get, post가 핵심이었다.