2주차 배운 것

  • state
  • map
  • 공통 컴포넌트
  • 모달

과제

마이페이지

  • 이메일 인증의 경우 학교 도메인인 @seoultech.ac.kr이 입력되는지 확인
  • 닉네임은 두글자 이상
  • 백엔드 필요한 기능은 일단 alert로 구현

로그인, 회원가입

  • 로그인 화면에서 입력창 클릭 시, 회원가입 버튼 사라짐
  • 회원가입 시 아이디, 비밀번호, 이메일 값 검증

What I Learned This Week

210922

  • prettier 설정 완료

210924

  • 논리 && 연산자: JS 에서 true&&expression은 항상 true, false&&expression은 항상 false
  • 이메일 input은 \@와 .을 무조건 포함하도록

210924

  • <input>의 onBlur과 onFocus를 사용해 봄 ` const [isInput, setIsInput] = useState(false);` state 값을 이렇게 최초에 false로 주고,
// Login/index.jsx
    const handleFocus = (e) => {
    if (isInput) {
      console.log("false");
      setIsInput(false); // 최초에 false였으니까..
    } else {
      console.log("true");
      setIsInput(true);
    }
  };

onBlur와 onFocus 모두 handleFocus가 핸들링 하도록 했다. 최초 값 (focus 없음)이 false이기 때문에 input 창을 누르면, else를 통해 true가 되고, 다시 focus를 잃으면 onBlur가 해당 함수를 호출하면서 false로 만든다.
감이 잘 오지 않아서 console.log()를 통해 값을 찍어 봤다.

클릭을 해보면서 state가 어떻게 변하는지 관찰해 볼 수 있었다.

  • styled.div는 div뿐 만 아니라 a나 span등 여러가지가 가능

210930

  • 처음으로 layout을 좀 layout답게 썼다고 말할 수 있을 것 같다. 마이페이지의 TopNavigation이 다 좌측엔 페이지 이름, 우측엔 x 버튼 형태
  • 페이지 이름을 props로 넘겨 사용했다
// Auth/index.jsx
<MainWrapper>
  <TopNavigation activePage="auth" />
</MainWrapper>

이렇게 현재 페이지 이름을 넘겨주면, TopNavigation에서는 페이지별로 매핑을 해주고 (매핑이 좀 비효율적 방법으로 된 것 같긴한데,, 전에 짜둔부분이라 그냥 맞춰서 했다…ㅎ..)

// TopNavigation.jsx
const mapPageToNavi = {
  messageBox: <MessageBoxNavigation />,
  main: <MainNavigation />,
  myPage: <MyPageNavigation />,
  join: <XvectorNavigation pageName="회원가입" />,
  auth: <XvectorNavigation pageName="학교 인증" back="/mypage" />,
  updateNick: <XvectorNavigation pageName="닉네임 변경" back="/mypage" />,
  authDetail: <XvectorNavigation pageName="이메일 인증" back="/mypage" />,
};

const TopNavigation = ({ activePage }) => {
  return <NavigationWrapper>{mapPageToNavi[activePage]}</NavigationWrapper>;
};

// XvectorNavigation.jsx
const XvectorNavigation = ({ pageName, back }) => {
  return (
    <MainWrapper>
      <h1>{pageName}</h1>
      <Link to={back}>
        <img src={xVector} alt="닫기" />
      </Link>
    </MainWrapper>
  );
};

페이지 이름과 x를 누를시 어느 페이지로 이동할지 알려줬다.

  • 그리고 mypage 하위의 라우팅을
  <Route exact path="/mypage" component={MyPage} />
  <Route exact path="/mypage/updateNickname" component={UpdateNickname} />
  <Route exact path="/mypage/auth" component={Auth} />
  <Route exact path="/mypage/auth/detail" component={AuthDetail} />

이런식으로 해서…. 너무 비효율적으로 mypage를 반복적으로 적어줬는데.. 더 좋은 방법이 있을 것 같다. 내일 찾아봐야지!

211001

  • 학교 이메일 인증을 위해서 input 값을 받을 때, 도메인이 맞는지 확인했다.
    const seoultech = "@seoultech.ac.kr"; // 학교 이메일 주소
    const patternEngNum = /[a-zA-Z0-9]/;

    if (!value.includes(seoultech) || !patternEngNum.test(value)) {
      setIsError(true);
    } else {
      setIsError(false);
    }
    setEmail(value);
  };

마치며

휴 이제 리액트 쫌 안다고 어디가서 말할 수 있을 것…같다…ㅎㅎ..ㅎㅎ..