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

기존에 만들어왔던 TodoList를 활용해서 블로그를 만들어보기로 했다. 근데 그냥 자바스크립트로 하기 보다는 새로운 언어를 배워보고자 해서 타입스크립트로 도전해봤다.

이 블로그 만들기는 기능이 지속적으로 추가되는 블로그입니다.

• 블로그 기준 : 23.1.20 내용입니다. 이후 계속 커밋이 추가되면서 변경 될 예정입니다.

만드는 블로그 깃허브

현재까지 완성된 모습

타입스크립트를 쓰면서 다른 것을 발견한 것

1. 타입스크립트에서 styled component를 쓸 때

import styled from "styled-components";
// 스타일드 컴포넌트도 뭔가 새로 깔아야 함
// 명령어 :  npm i -D @types/styled-components

• 그 외에 쓰는 법은 비슷함.

2. 생각보다 useState 등을 쓸 때 따로 타입을 지정 안 해줬는데 타입을 찾아서 해준다. 타입스크립트는 똑똑한 언어인 것 같다.

• 이건 추가로 공부를 더 해봐야 알 것 같다.

3. uuid 표기가 조금 다르다.

    id: uuid(),
    // uuid 지정 차이 => v4 이런거 안 써도 잘 동작한다.

• 이것도 공부를 더 해봐야 알겠지만 표현법에 차이에도 타입이 작용해서 그런게 아닐까 싶다.

4. 타입 지정에 따른 changeInput(input창 이벤트 타입 지정)

  const changeInput = (event : React.ChangeEvent<HTMLInputElement>) => {
    // 타입스크립트와 자바스크립트의 이벤트 타입 지정 차이점
    setContent({
      ...content,
      [event.target.name] : event.target.value
    })
  }

만일 textarea를 썼다면 HTMLTextAreaElement를 써야 한다.

아직 많은 차이를 발견하진 못 했고 상태관리를 하지 않아서 단순하게 짠 코드라 더 공부를 해봐야 알 것 같다.