전체 글164 UGSM_Step page 데이터 저장 내가 짠 코드 1. userAddInfo const UserAddInfo = () => { const [userData, setUserData] = useState({ nickname: "", birth: "", gender: "" }); const [step, setStep] = useState(1); const [phone, setPhone] = useState(""); // 휴대폰 인증번호 const [phoneAuthNumber, setPhoneAuthNumber] = useState(""); // 휴대폰 번호 입력 const handlePhoneChange = (event: React.ChangeEvent) => { setPhone(event.target.value); }; // 휴대폰 인증번호.. 2023. 12. 23. Styled-component 내가 Styled-component를 효과적으로 사용하고 있는지 의문이 들어 공식문서를 읽어보기로 했다. 1. Styled-component React 컴포넌트 시스템을 스타일링하기 위한 css를 어떻게 향상시킬 수 있을지에 대한 고민의 결과물 자동으로 필수적인 CSS: styled-components는 페이지에 렌더링된 컴포넌트를 추적하고 해당 컴포넌트의 스타일만을 자동으로 삽입합니다. 코드 분할과 결합되면 사용자는 필요한 만큼의 코드만을 로드하게 됩니다. const MyComponent = styled.div` /* 스타일 정의 */ `; 클래스 이름 버그 없음: styled-components는 스타일에 대한 고유한 클래스 이름을 생성합니다. 중복, 겹침 또는 철자 오류에 대해 걱정할 필요가 없습니.. 2023. 12. 22. 타입스크립트 다형성 타입스크립트가 어떻게 다형성을 줄까? 자바스크립트처럼 여러 타입을 받을수 있다. 하지만 자바스크립트는 any타입이 설정되어 해당 변수가 number타입인 경우에 touppercase같이 스트링에만 사용되는 function을 사용할 경우 컴파일 과정에서 문제없이 진행되고 런타임 과정에서 에러가 뜨는 상황이 발생한다. 하지만 타입스크립트에서 제네릭을 사용하게되면 일반 자바스크립트처럼 자동 타입 할당이 되고 소스 작성 과정중에 타입스크립이 해당 변수가 number타입인걸 알게되고 touppercase같이 스트링 전용 function이 사용이 불가능하다. 에러가 뜨게되서 런타임 과정중에 에러가 나지 않도록 막아준다. => Polymorphism(다형성) : Generic(제네릭) :'제네릭은 선언 시점이 아니라.. 2023. 12. 22. 1. UGSM_단계별 페이지 이동 궁금한 게 생겼다. 단계별 페이지 이동을 step-wizard으로 가는 게 좋은가, 그냥 링크로 가는 게 좋은가 step-wizard로 설정 순차적으로 진행되기 때문에 오류를 방지 할 수 있는 점에서 step-wizard를 선택했다. const [step, setStep] = useState(1); // 최소, 최대 값 const updateStep = (newStep: number) => { setStep(Math.max(1, Math.min(newStep, 4))); }; const handleNextStepChange = () => { updateStep(step + 1); }; const handlePreviousStepChange = () => { updateStep(step - 1); }; 최.. 2023. 12. 21. 이전 1 ··· 4 5 6 7 8 9 10 ··· 41 다음
