Study

타입스크립트

자바스크립트는 변수형에 유연성을 가진 언어인데, 장점도 있지만 단점도 많다. 이를 보완하기위해 나온 언어.
쉽게말해 자바스크립트에 타입을 부여한 언어이다.

장점

• 자료형을 지정할 수 있다.
• 에러를 사전에 방지할 수 있다.
• 자료형이 확정됨에 따라 해당 자료형에 있는 API를 가져와 자동완성을 할 수 있다.
• 코드의 가독성을 높인다.(개발자가 알아보기 더 쉽다)

단점

• cost가 많이든다.(학습, 수정 등)

타입정의

:[자료형]으로 타입을 지정한다. 익숙치 않은 케이스들로

• 배열 : 자료형[], Array<자료형>으로 지정
• 객체 : object로 지정할 수도 있지만, 객체의 속성들까지 표시하기 위해 {item:number;item:string}처럼 표현할 수 있다.

인터페이스

객체가 복잡해지고 많아짐에 따라 타입정의가 차지하는 양이 많아질 수 있다. 이를 방지하기 위해 인터페이스를 사용한다.

프로젝트

체크된 list 일괄삭제

const { setEunsuCheckList, setChaewonCheckList } = useContext(context);
const [isCheckedBox, setIsCheckedBox] = useState(false);
const checkedHandler = (isChecked, id) => {
  if (user === 'eunsu') {
    setIsCheckedBox(!isCheckedBox);
    if (isChecked) {
      setEunsuCheckList(prev => [...prev, id]);
    } else {
      setEunsuCheckList(prev => prev.filter(item => item !== id));
    }
  } else {
    setIsCheckedBox(!isCheckedBox);
    if (isChecked) {
      setChaewonCheckList(prev => [...prev, id]);
    } else {
      setChaewonCheckList(prev => prev.filter(item => item !== id));
    }
  }
};

list의 checkbox가 체크되면 기존의 체크박스 상태를 뒤집고, 사용자가 누구인지 확인한 다음 Checklist에 id를 추가 혹은 삭제한다.

const deleteList = () => {
  user === 'eunsu'
    ? eunsuCheckList.map(id => _delete(user, id))
    : chaewonCheckList.map(id => _delete(user, id));
  readList();
};

그리고 일괄삭제버튼이 눌리면 핸들러로 deletelist를 실행시키고, checklist에 있는 id값에 해당하는 문서들을 삭제시킨다.

Diary

wishlist에서도 할게 정말 많아보이지만, 더 지체하다간 방학 다갈 거 같아서 diary로.
달력에 연동해서 클릭하면 해당 월로 들어가게 만들고 싶다.