[✍️ Dev Log] 해달(문선영) / 2022-04-28

[moonseonyeong]

오늘은 어떻게 프로젝트에 기여했나요?

• 검색입력창 영문만 작성되도록 구현

오늘의 프로젝트에서 힘든 점은 무엇인가요?

• 영문입력만 가능하도록 만드는 기능이 어렵지 않을거라 생각했는데 생각보다 많이 까다로웠다
• event 객체 값은 인자로 전달해주지 않아도 함수내부에서 사용이 가능하다

 const { data: searchList } = useSearchBeer({ name: `${search}` });
  
  const beerList = useMemo(() => flatten(beersData?.pages?.map(page => page) ?? []), [beersData]);
  const beers = useMemo(()=> search? searchList: beerList,[beerList,searchList,search])

한 페이지에서 맵핑으로 출력해야되는 데이터가 두개라면 삼항연산자를 이용하여 하나의 변수로 데이터를 구분하는것이 더 깔끔해보인다

---

event 객체에 대한 타입정의

//1
interface HandleNameChangeInterface {
  target: HTMLInputElement;
  key: string;
}


  const handleSearch = (e: HandleNameChangeInterface): void => {
...,
    const searchKeyword = e.target.value;
}

//2
  const handleSearch = (e: React.KeyboardEvent<HTMLInputElement>): void => {
...,
    const searchKeyword = (e.target as HTMLInputElement).value;
//e.target.value  -> 'EventTarget' 형식에 'value' 속성이 없습니다.ts(2339)
}

정규표현식으로 핸들러 처리하려하였으나 실패했다
아래와 같은 방식으로 시도했다는것을 기록,,

    const EngExp = /[a-zA-Z0-9]/;
    const KorExp = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/;

console.log((e.target as HTMLInputElement).value);
console.log(e.key);
console.log(EngExp.test(e.key)); // 한글 풜스 , 영어 트루
console.log(KorExp.test(e.key)); // 한글 트루 , 영어 풜스
 // e.preventDefault();
    // return;

1. https://stackoverflow.com/questions/28900077/why-is-event-target-not-element-in-typescript

내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

카카오 로그인 기능 구현

[borachoidev]

정규 표현식 객체 만드는법

    const KorExp = new RegExp(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/);
    const EngExp = new RegExp(/[a-zA-Z0-9]/);

[borachoidev]

이 방식 해보세요! 제가 방금 테스트했을땐 동작했습니다

  const [searchQuery, setSearchQuery] = useState('');
  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
    const KorExp = new RegExp(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/);

    if (KorExp.test(e.target.value)) {
      e.target.placeholder = '영문 입력만 가능합니다';
    } else {
      setSearchQuery(e.target.value);
    }
  };
  return (
    <SearchBarContainer main={pathname}>
      <SearchIcon width={24} height={24} />
      <Input placeholder="맥주 이름" onChange={handleOnChange} value={searchQuery} />
    </SearchBarContainer>
  );

[moonseonyeong]

onChange 랑 같이 사용했습니다 ㅎ^ㅎ~!