[황휘태] sprint8 #123
[황휘태] sprint8 #123
Conversation
|
스프리트 미션 하시느라 수고 많으셨어요. |
타입스크립트를 어찌저찌 적용하기는 했는데 이게 옳은 방법인지 잘 모르겠습니다..ㅠㅠㅠ 그쵸 처음 타입스크립트 들어가면 헷갈리는게 당연합니다. 라이브러리 사용등으로 인해 어떤 타입을 선언해줘야할지 감이 잘 안잡힙니다. 예를 들면 리액트의 setState()의 prevState 같은 경우 타입을
|
| import { useNavigate } from "react-router"; | ||
| import icBack from "../assets/icons/ic_back.svg"; | ||
| import useService from "../hooks/useService"; | ||
| import useFetch from "../hooks/useService"; |
There was a problem hiding this comment.
굿굿 ! 함수의 이름이 더욱 명확해졌네요 👍
의미가 명확해져서 어떤 훅인지 더욱 정확히 알 수 있군요 😉
| * 데이터 통신을 위한 공통 커스텀 훅 | ||
| * @param {Function} fetchFunction 서버와 직접 통신하는 함수 | ||
| * @returns {data: object, isLoading: boolean} | ||
| * @returns {data: object, isLoading: boolean, error: boolean} |
There was a problem hiding this comment.
타입스크립트를 적용하게 되면 !
이제 jsdoc으로 일일히 타입을 명시하지 않아도 되겠네요 😊😊😊
jsdoc으로 명시를 하더라도 이 전에는 런타임 때 타입이 어떻게 정의되는지 정확하지 않을 수 있었으나 이제는 타입스크립트를 쓰므로 더욱 정확하며 빠르게 타입을 확인할 수 있겠어요 👍
| onClickVisible, | ||
| visibleEye_off, | ||
| visibleEye_on, | ||
| }: AuthType = useOutletContext(); |
There was a problem hiding this comment.
제네릭으로 표현해볼 수도 있겠군요 !
useOutletContext는 declare function useOutletContext<Context = unknown>(): Context;로 구성되어 있으므로 다음과 같이 표현해볼 수 있습니다 !
| }: AuthType = useOutletContext(); | |
| } = useOutletContext<AuthType>(); |
| export function isVisibleKey(value: string): value is VisibleKey { | ||
| return value === "pw" || value === "checkPw"; | ||
| } |
| export interface AuthType { | ||
| visible: VisibleValue; | ||
| setVisible: (prevState: SetStateAction<VisibleValue>) => void; | ||
| onClickVisible: (e: string) => void; | ||
| visibleEye_off: string; | ||
| visibleEye_on: string; | ||
| } |
There was a problem hiding this comment.
(의견) 해당 인터페이스가 어떤 타입을 의미하는지 명확하지가 않은 것 같아요 !
AuthType의 의미가 무엇인지 헷갈리는군요 ! 로그인 폼에 필요한 타입인지, 유저 생성에 필요한 폼 타입인지 생각해보시면 좋을 것 같아요 😉
지금 봤을 때는 비밀번호 의 숨김처리에 필요한 상태들의 타입을 넣어놓은 것으로 보여요.
그렇다면 비밀번호 UI 인풋을 만드는 것도 하나의 방법이 될 수 있겠네요 !
다음은 GPT로 생성한 예제 코드입니다 😉
function PasswordInput({ label }: { label: string }) {
const [visible, setVisible] = useState(false);
const toggleVisible = () => setVisible((prev) => !prev);
return (
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
<label>{label}</label>
<div style={{ position: "relative", display: "flex", alignItems: "center" }}>
<input
type={visible ? "text" : "password"}
placeholder="비밀번호를 입력하세요"
style={{ paddingRight: "30px" }}
/>
<button
type="button"
onClick={toggleVisible}
style={{
position: "absolute",
right: "5px",
background: "none",
border: "none",
cursor: "pointer",
}}
>
{visible ? "👁️" : "🙈"}
</button>
</div>
</div>
);
}위 코드는 비제어 컴포넌트로 구성되어 있어요. 만약 필요하시다면 onChange와 같은 props를 받아볼 수도 있겠네요.
|
수고하셨습니다 휘태님 ! 언제나 빠르게 미션을 완수하시는군요 ㅎㅎㅎ 👏👏👏 미션 수행하시느라 수고 많으셨습니다 휘태님 🙇♂️ |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게
예를 들면 리액트의
setState()의prevState같은 경우 타입을SetStateAction<...>이런 식으로 정한다고 하는데그 라이브러리의 코드를 직접 까서 확인해봐야하는건가요?