[프리온보딩코스 과제 회고 #3] 권한 관리와 대시보드 그리고 유효성 검사

1. 과제 구현 사항

1. 로그인 페이지
   
   • 계정, 비밀번호 입력 시 로그인 기능 구현
   • 로그인된 계정은 자신에게 허용된 메뉴만 보이게 함(권한 관리에 해당)
2. 회원가입 페이지
   
   • 이름, 주소, 신용카드 정보, 나이 등의 회원 정보를 받아 회원가입 기능 구현
   • 주소, 신용카드는 팝업을 이용해서 입력받기
   • 가입 시 유효성 검사하기
3. 다양한 메뉴를 가지고 있는 홈페이지 관리자 페이지
   • 권한 별로 접근 가능한 메뉴가 다르게 설정되어야 함
   • 테이블 컴포넌트 페이지를 만들어 Data Table 구현, 페이지네이션 구현, 검색 기능 구현

2. 내가 맡은 파트

• 공통 컴포넌트 마크업 및 스타일링
• 로그인/회원가입 페이지 마크업, 스타일링 및 유효성 검사
• 유저 데이터 로컬스토리지 연동

3. 작업 중 생긴 일..

3.1 헤더

우선 로그인 하지 않은 상태와 로그인한 상태를 조건부 렌더링 해줘야 했는데, 로그인을 한 경우 로컬 스토리지에 LOGGEDIN_USER라는 키가 존재하기 때문에 userData state에 넣어준다! 그러고 userData가 있다면 로그아웃 버튼을 보여주고, 그렇지 않다면 로그인 버튼이 뜨게끔 해줬다! (여기서 언급하지 않은 location에 대한 이슈는 아래에 자세히 적어보도록...ㅎ)

📂 src > Components > common > Header.js

const Header = () => {
  const location = useLocation();
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    setUserData(loadLocalStorage(LOGGEDIN_USER));
  }, [location]);

  return (
    <Wrapper>
      <Link to="/">
        <img src={logo} alt="자란다 로고" />
      </Link>
      {userData ? <LogoutButton /> : <LoginButton />}
    </Wrapper>
  );
};

3.2 헤더 렌더링 오류

위의 코드의 location이 선언만 되고 사용되지 않았을 때에도 헤더를 렌더링 시키는 경우가 발생했다. 작업하다가 보니 선언만 되고 사용되지 않길래 코드를 삭제했는데, 헤더가 렌더링되지 않는 오류가 발생해서 다시 const location = useLocation();를 썼더니 정상 동작을 하는 것이다..! 대체 이게 무슨 일인지.. 사실 Header 조건부 렌더링 작업하던 과정이 그리 순탄치만은 않아 이것저것 다 써보다가 겨우 해결하여 저렇게 결론을 낸 코드였고, 리팩토링 과정에서 location이 쓰이지 않아 삭제한 것이었는데, 다시 헤더가 렌더가 되지 않는다니.. 대체 어쩌다가! 어느 과정에서! 이런 영향을 미치게 되었는지조차도 도통 생각이 나지도 않았다...ㄱ- (얼레벌레 코더의 삶...) 일단 location의 문제는 해결하여 정상 동작하게끔 제출은 했으나, 대체 location이 사용되지 않는데, 그 코드를 지우게 되면 렌더링 오류가 도로 발생하게 되는 것인지 의문스러웠다...🤔 토요일에 현찬, 현정, 성상, 우빈님이랑 모여 같이 이 useLocation이 호출만으로 왜 이런 오류를 발생시키는 건지에 대해서 같이 찾아보았고! 이 문제에 추가적인 내용은 블로그 주제로 정해서 열심히 블로그를 작성해주신 현찬님의 블로그 링크를 걸어보겠다! 

React Router -왜 useLocation은 render를 일으킬까?

 

4. 결과 화면

4.1 헤더 조건부 렌더링 및 로그인 페이지 유효성 검사

4.2 회원가입 페이지

5. 과제 회고

5.1 새롭게 알게 된 것🆕

1. svg 파일 컴포넌트로 사용하기

📂 src > Pages > SignUp.js

import { ReactComponent as Person } from "Assets/svg/person.svg";

...

<Input
  name="name"
  value={formData.name}
  onChange={handleSignUpChange}
  placeholder="이름을 입력하세요"
  // 이렇게 icon이라는 props로 Person svg 컴포넌트를 보내준다!
  icon={<Person />}
  error={errors.name}
  errorMessage="이름을 다시 입력해 주세요"
/>

📂 src > Components > common > Input.js

const Input = (
  {
    type = "text",
    name,
    value,
    onChange = () => {},
    placeholder,
    icon = null,
    error = false,
    errorMessage = null,
    successMessage = null,
    width = "100%",
    numberOnly = false,
    maxLength = null,
  },
  ref
) => {
  return (
    <Wrapper width={width}>
      <InputWrapper error={error} numberOnly={numberOnly}>
        <input
          ref={ref}
          type={type}
          name={name}
          value={value}
          onChange={onChange}
          placeholder={placeholder}
          maxLength={maxLength}
        />
        // props로 전달받은 icon을 렌더해준다!
        {icon}
      </InputWrapper>
      {error && errorMessage && <MessageBox>{errorMessage}</MessageBox>}
      {!error && successMessage && <MessageBox textColor="#87BF44">{successMessage}</MessageBox>}
    </Wrapper>
  );
};

svg 파일을 컴포넌트로 사용했을 때의 장점은 하나의 svg 파일로 다양한 색상, 크기를 가진 아이콘으로 활용할 수 있다는 점! 이전에는 항상 img src로 불러와서 활용했었는데, 이렇게 컴포넌트로 만들어 작업하는 것이 훨씬 좋은 거 같다!

 

5.2 이번 과제를 통해 느낀 점🤔

두 번째 미션과 동일하게 과제 안내 사항을 보고 UI, 기능 설계를 팀원들과 함께 의논하며 결정을 해야 했는데, 다들 서로 배려해서 의사소통하여 좋은 결과물을 만들어낸 것 같아 뿌듯했다. 칠리소스 짱짱👍 특히 첫날 킥오프 미팅에서 다양한 의견을 제시해주신 민기님과 현찬님! 너무너무 고마워요! 생각해보니 두 분이 적극적으로 기능에 대해 다양한 의견을 제안해주셔서 우리의 기능 명세가 좀 더 빠르고 간결하게 나오지 않았나 싶습니다! 😊(문득 민기님의 "유알 어 티쳐!" 생각나면 혼자 웃습니다..ㅎㅎ)

그리고 이번에 다은님과 현정님과 함께 공통적으로 사용할 수 있는 컴포넌트를 마크업하고 스타일링하는 걸 이번에 좀 제대로 해본 거 같아서 재밌었고, Utils 함수의 중요성에 대해 다시금 깨달았던 과제였다. 다 하고 나서 Utils로 뺄 수 있는 게 뭐 있나~ 하고 엄청 눈에 불을 켜고 찾아봤던 우리..ㅎㅎ 다음에도 이렇게 재사용성이 있는 컴포넌트를 만들 수 있게 설계를 제대로 해야겠다는 생각이 들었다!

유효성 검사를 구현할 때 로그인의 경우 비교적 단순해서 괜찮았지만, 회원가입의 경우 다양한 경우의 수로 조건을 걸어야 해서 많이 힘들었다. 더군다나 항상 그걸 이용하는 유저였지, 그 케이스를 고려해본 적은 없었던 지라 되게 많이 헤맸었다! 또 정규식 표현 활용하여 하다 보니 생소해서 작업이 좀 더디게 진행되었는데, 다른 분들이 도와주셔서 예상 시간보다 더 빨리 완성할 수 있었다! 진짜 라이브러리와 팀의 소중함을 너무나도 절실히 느낀 이번 과제... (본인들의 파트가 아닌데도 새벽 5시까지 열정 넘치게 도와주신 현찬님, 민기님, 우빈님 감사합니다!👍) No Library Yes 피땀 눈물..(= 라이브러리가 없다면 개발자에겐 피땀 눈물뿐...🤕)

다은님과 현정님과 셋이서 5일동안 동고동락하면서 우리가 맡은 파트를 완성해냈는데, 생각보다 너무 잘한 거 같아서 뿌듯했다..!(전 제게 비교적 관대한 편입니다..^^) 끝까지 고생한 우리 다은님 현정님 수고 많았어용! 우리 나머지 팀원들도 물론!😁

그리고 이번에는 8명이서 한 팀이다 보니 애자일하게 작업을 하려고 각별히 신경을 썼었다!!! 아침, 저녁으로 만나 서로 작업 진행에 대해 열심히 공유했고 길지 않은 시간인데도 불구하고 서로의 작업이 어떤 식으로 전개되고 있는지 알 수 있어서 좋았다. 단순히 내가 개발하는 기능뿐만이 아니라 다른 팀원분들의 파트까지도 이해할 수 있어서 더 좋았던 것 같고, 앞으로의 과제들도 이렇게 팀원들끼리 매일매일 스탠드업 미팅을 해야겠다는 확신이 들었다! 🔗 우리 팀 미팅 로그

[7ill Resource] 자란다 기업 과제 미팅 로그

처음 기획 단계에서 기능 분담을 잘해서 브랜치 merge 과정에서 conflict 없이 각자 개발한 기능을 합칠 수 있어서 굉장히 좋았다! 이번 과제에서 현찬님의 제안👍으로 git flow를 도입해서 제대로 지켜가면서 작업을 했는데, 비록 내가 많이 아는 건 아니지만 우리 조 다은님과 현정님께 git에 관련된 내가 아는 지식들을 알려드릴 수 있어서 뿌듯했다..! (깃린이 탈출 #가보자고) 더 열심히 공부해서 더 더 많은 걸 알려줄 수 있는 사람이 되어야겠다는 다짐..!

▼ 추가로, 다른 조 코드까지 보고 나였다면 어떻게 코드를 작성하였을지에 대해서 회고까지 작성해주신 성상님! 넌 감동이었어..★

원티드 프리온보딩 기업과제 #3, 회고

▼ 이번 과제의 한 줄 요약: 서로에 대한 신뢰가 넘쳤 흘렀던 우리 칠리소스 짱👍💙