[ 4주차 기본/생각 과제 ] 로그인 #4
Conversation
| import { API } from "../constants/api.constant"; | ||
| import publicApiInstance from "./instance/publicApiInstance"; | ||
|
|
||
| const authApi = { |
There was a problem hiding this comment.
헐 이렇게 상수로 정리해줄 수 있군요..!!👍👍👍
배워갑니다....🤩
| }, | ||
| (error) => { | ||
| // 요청 에러가 발생했을 때 수행할 로직 | ||
| console.log(error); // 디버깅 |
There was a problem hiding this comment.
p4 : 콘솔은 사용하고 나서는 지워주는게 좋다고 하네요..!!
관련 링크 첨부합니다!
| font-family: "Open Sans"; | ||
| src: local("Open Sans"), url(${OpenSans_Regular}) format("truetype"); | ||
| font-weight: 400; | ||
| } |
| import Styles from "./styles/index.jsx"; | ||
|
|
||
| ReactDOM.createRoot(document.getElementById("root")).render( | ||
| <RecoilRoot> |
| border-radius: 0.5rem; | ||
| background-color: ${({ theme: { colors } }) => colors.greyScale.white}; | ||
| padding: 3rem; | ||
| gap: 2rem; |
There was a problem hiding this comment.
이번에 합세하면서 배치할 때 flex로 배치하고 필요한 padding값을 준 다음 요소 간격만 gap을 주는 게 더 간편하고 좋은 방법인 걸 알게 됐어요..!
호은이는 이미 잘 쓰고 있었구나!!!! 대박 잘해~🤩 최고에욤
| /> | ||
| <TextInput | ||
| label={"PASSWORD"} | ||
| placeholder={"비밀번호를 입력해주세요"} |
There was a problem hiding this comment.
placeholder 속성 값을 줄 때 중괄호로 안감싸줘도 적용되는 걸로 알고 있는데, 중괄호를 사용하는 이유가 뭔지 궁금해요!💭
| value={password} | ||
| /> | ||
| <S.ButtonContainer> | ||
| <Button onClick={onClickLogin} disabled={canActiveButton}> |
There was a problem hiding this comment.
p2 : button도 타입이 존재해서 button 타입으로 지정해주는 게 좋다고 하네요~! 타입 지정해 주는 거 어떨까요? 관련 링크 첨부합니다!
| margin: 0; | ||
| } | ||
| html { | ||
| font-size: 10px; // rem 단위를 편하게 사용하기 위해 10px로 함. |
|
되게 다양한 걸 많이 사용해준 것 같아서 코드 보는 내내 신기하고 재밌었어요!! |
| visuallyHidden: () => css` | ||
| position: absolute !important; | ||
| width: 1px !important; | ||
| height: 1px !important; | ||
| padding: 0 !important; | ||
| margin: -1px !important; | ||
| overflow: hidden !important; | ||
| clip: rect(0, 0, 0, 0) !important; | ||
| white-space: nowrap !important; | ||
| border: 0 !important; |
There was a problem hiding this comment.
p2) css를 사용할 때 important는 최대한 지양해야한다고 생각해요 important가 들어감으로써 우선순위가 꼬이는 일이 발생하진 않을까요~?
또 visuallyHidden이 hidden처리하는 부분을 추상화한것이라고 생각되는데 그게 맞다면 이 모든 로직이 꼭 필요한 것인지 궁금합니다!
| const mixin = { | ||
| // flex | ||
| flexBox: ({ direction = "row", align, justify }) => css` | ||
| display: flex; | ||
| flex-direction: ${direction}; | ||
| align-items: ${align}; | ||
| justify-content: ${justify}; | ||
| `, |
There was a problem hiding this comment.
정말 자주쓰는 부분이라 추상화하신거 너무 멋지고 대단하고 빛호은,,, 배워갑니다~
| export const zIndex = { | ||
| gnbLevel: 100, | ||
| dropModalLevel: 200, | ||
| modalLayout: 900, | ||
| modalLevel: 950, | ||
| modalContent: 999, | ||
| }; | ||
|
|
||
| const deviceSizes = { | ||
| mobile: "375px", | ||
| tablet: "768px", | ||
| pc: "1024px", | ||
| }; |
There was a problem hiding this comment.
혹시 이거 근데 라이브러리 같은건가요...? 거의 철두철미 회사 컨벤션 같아요 디바이스까지 후덜덜...
🌱 기본 조건
.env파일 사용하기🧩 기본 과제
[ 로그인 페이지 ]
/mypage/:userId로 넘어갑니다. (여기서userId는 로그인 성공시 반환 받은 사용자의 id)/signup으로 이동합니다.[ 회원가입 페이지 ]
중복체크 버튼
회원가입 버튼
/login으로 이동합니다.[ 마이 페이지 ]
/mypage/:userId의 userId를 이용해 회원 정보를 조회합니다.🌠 심화 과제
[ 로그인 페이지 ]
createPortal을 이용합니다.[ 회원가입 페이지 ]
비밀번호 확인
중복체크
생각과제
실행영상
bandicam.2023-11-17.23-32-25-343.mp4
bandicam.2023-11-17.23-32-46-882.mp4
bandicam.2023-11-17.23-33-09-392.mp4