오늘 한 일

• 프로젝트 레포 wiki 문서 작성
• 프로젝트 Directory Structure Map 작성
• github conflict 정리
• client 디렉토리 구조 정리
• pages 구현 시작
  • 컨텐츠 작성 페이지 작업 시작

기억할 것

Problem: TypeScript Error Calling .map() on an Array Union Type

export const AddTags = () => {
  const [tagList, setTagList] = useState<[] | object[]>([])

  return (
    //...
          tagList.map((tag: any) => (
            <TagSmall
              key={tag.id}
              tagname={tag.name}
              onClick={() => handleClick(tag.id)}
            />
          ))}
   //...
  )
}

Error Message

Type error: This expression is not callable.
  Each member of the union type '(<U>(callbackfn: (value: never, index: number, 
  array: never[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: ITag, 
  index: number, array: ITag[]) => U, thisArg?: any) => U[])' has signatures, 
  but none of those signatures are compatible with each other.

> 44 |           tagList.map((tag: any) => (
     |                   ^
  45 |             <TagSmall
  46 |               key={tag.id}
  47 |               tagname={tag.name}

Solution

export const AddTags = () => {
  const [tagList, setTagList] = useState<(null | object)[]>([])

  return (
    //...
          tagList.map((tag: any) => (
            <TagSmall
              key={tag.id}
              tagname={tag.name}
              onClick={() => handleClick(tag.id)}
            />
          ))}
   //...
  )
}

Reference

https://duncanleung.com/typescript-array-map-over-union-array-type/

input 비활성화

input의 value를 state로 설정해두고, state 값은 api 요청으로 받아온 값을 할당해줄 것이기 때문에 입력기능이 필요없어졌다. 불필요한 커서가 생기는 것이 마음에 안들기 때문에 input 필드를 비활성화 시키는 방법을 찾아보았다.

disabled 속성을 적용하면 input 필드가 비활성화된다.
비활성화 상태가 되면, input 필드를 클릭해도 포커스가 가지 않는다.

내일 할 일

• pages 구현 작성 이어서
• kakao 지도 api