Conversation
pages/components/Button.tsx
Outdated
| type ButtonProps = { | ||
| text: string; | ||
| className: string; | ||
| onClick?: () => void; | ||
| }; |
There was a problem hiding this comment.
| type ButtonProps = { | |
| text: string; | |
| className: string; | |
| onClick?: () => void; | |
| }; | |
| interface ButtonProps extends HTMLAttributes<HTMLButtonElement> { | |
| text: string; | |
| className: string; | |
| onClick?: () => void; | |
| }; |
버튼이나 인풋같은 기본적인 컴포넌트들은 해당 돔에서 사용하는 이벤트를 그대로 상속해주는게 좋아요. 이는 객체지향에서 LSP(리스코프 치환 원칙)이라고 하는데 간단하게 설명드리면 제가 button이라는 html을 사용할때 쓰는 인터페이스를 그대로 Button컴포넌트에서 사용하면 유지보수나 사용성에서 좋겠죠?
그래서 버튼같은 근본 컴포넌트는 위처럼 상속해서 쓰는편이에요. 만약 해당 버튼에 onTouch같은 함수들이 필요할때 매번 넣어주면 불편하겠죠 >?
pages/components/Header.tsx
Outdated
| <ul className={styles.header_menu}> | ||
| <li> | ||
| <Link href="/">자유게시판</Link> | ||
| </li> | ||
| <li> | ||
| <Link href="/additem">중고마켓</Link> | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
| <ul className={styles.header_menu}> | |
| <li> | |
| <Link href="/">자유게시판</Link> | |
| </li> | |
| <li> | |
| <Link href="/additem">중고마켓</Link> | |
| </li> | |
| </ul> | |
| <ul className={styles.header_menu}> | |
| {상수.map((item)=> <li> | |
| <Link href="/additem">중고마켓</Link> | |
| </li>)} | |
| </ul> | |
위처럼 하는것도 좋은 방법이에요. 이렇게 작성하면 상수에 값 하나만 추가해줘도 화면에 바로 렌더링이 될 수 있어요.
pages/components/Paginate.tsx
Outdated
| return ( | ||
| <div className={styles.pagination_area}> | ||
| <button | ||
| disabled={currentPage === 1 ? true : false} |
pages/index.tsx
Outdated
| <ul className={styles.header_menu}> | ||
| <li> | ||
| <Link href="/items">아이템</Link> | ||
| </li> | ||
| <li> | ||
| <Link href="/additem">아이템추가</Link> | ||
| </li> | ||
| <li> | ||
| <Link href="/items">중고마켓</Link> | ||
| </li> | ||
| <li> | ||
| <Link href="/">자유게시판</Link> | ||
| </li> | ||
| </ul> |
There was a problem hiding this comment.
여기도 제가 위에서 말씀드렸던것처럼 구조를 잡아도 되겠네요!
그리고 보면 위랑 아래랑 재사용되며 컴포넌트로 빼도 좋아요.
저는 똑같은 코드가 2번이상 반복되면 뺴는편인데 일반적으로 3번정도 반복되면 컴포넌트로 뺀다고 하더라구요
pages/items.tsx
Outdated
| setBestItems(responses?.data.list); | ||
| setTotal(responses?.data.totalCount); | ||
| } catch (error) { | ||
| console.log("베스트상품 get 에러"); |
There was a problem hiding this comment.
이런 에러처리는 console.error()로 해주는것이 가독성이 더 좋아요!
pages/services/GetBestItem.tsx
Outdated
| } catch (error) { | ||
| console.log(`에러 유형 : ${error}`); | ||
| } |
| psConfirmMsg: "", | ||
| }); | ||
|
|
||
| const emailRegExp = |
| const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| setInput({ ...input, [e.target.name]: e.target.value }); |
There was a problem hiding this comment.
여기두 위에서 제가 알려드린것처럼 고쳐보는건 어떨까요
| const handleSubmit = (e: React.FormEvent) => { | ||
| e.preventDefault(); | ||
| const { email, password } = input; | ||
| if (emailRegExp.test(input.email) && input.password.length > 7) { |
| .sub_category_util { | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 20px; | ||
| input { | ||
| display: block; | ||
| padding: 10px; | ||
| background-color: #f1f1f1; | ||
| width: 300px; | ||
| font-size: 18px; | ||
| border-radius: 4px; | ||
| border: 1px solid #e7e7e7; | ||
| } | ||
| button { | ||
| height: 100%; | ||
| } | ||
| select { | ||
| padding: 15px 20px; | ||
| } |
There was a problem hiding this comment.
이렇게 classname안에서 직접 메인 button, select같은 메인 태그들을 수정하는건 매우 위험해요. 해당 자식요소들은 모두 그렇게 바뀔수 있고 이부분이 코드가 커진다면 디버깅하기 매우 힘들거에요. 왠만하면 className으로 관리하는걸 추천드릴게요!
요구사항
기본
로그인/회원가입 페이지
이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지를 보입니다.
(alert로 진행했어요)
이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 경우 input에 빨강색 테두리와 아래에 “잘못된 이메일 형식입니다” 빨강색 에러 메세지를 보입니다.
(alert로 진행했어요)
비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지를 보입니다
(alert로 진행했어요)
비밀번호 input에서 focus out 할 때, 값이 8자 미만일 경우 아래에 “비밀번호를 8자 이상 입력해주세요.” 에러 메세지를 보입니다.
input 에 빈 값이 있거나 에러 메세지가 있으면 ‘로그인’ 버튼은 비활성화 됩니다.
nput 에 유효한 값을 입력하면 ‘로그인' 버튼이 활성화 됩니다.
활성화된 ‘로그인’ 버튼을 누르면 “/items” 로 이동합니다
아이템 리스트 페이지
멘토에게
첨부터 다시하고 있어서 반응형 등은 다 안됐어요.
리액트, ts 코드리뷰 위주로(?) 봐주셨으면해요.
로그인, 회원가입 폼의 경우 사용자가 타이핑하면서 유효성 검사하고 싶은데
useState가 비동기라 그런지 원하는데로 안되서 입력하고 버튼누르면 되게 했는데
보통은 어떻게 하나요?
셀프 코드 리뷰를 통해 질문 이어가겠습니다.