First Project 2일차 - 로그인 페이지

👉 오늘 진행한 것

오늘 부터 드디어 코드를 작성하기 시작했다. 그래서 제일 먼저 화면에 보이는 로그인 페이지를 만들어 보았다.

짠! 최대한 심플하게 만들어 보았다. 서버에서 아직 API가 만들어지지 않았기에 로그인이 되었다고 가정하고 메인페이지로 가서 헤더부분을 만들어 보았다.

왼쪽에 로고를 넣어준 후 그 다음 오른쪽에 프로필 사진과 프로필을 클릭하면 마이페이지 메뉴창이 나오도록 만들어 주었다. 메뉴창은 자주 쓰일 것 같아서 컴포넌트 단위로 만들어 주었다.

👉 오늘 어려웠던 점

메뉴창을 컴포넌트 단위로 만드는데 Props를 넘겨주는 단계에서 에러가 발생했다.

//생략..

interface Props {
    show: boolean;
    onCloseModal: (e: any) => void;
    style: CSSProperties;
}

const Menu: FC<Props> = ({children, style, show, onCloseModal}) => {
  const stopPropagation = useCallback(e => {
    e.stopPropagation();
  }, []);

// 생략..

이런식으로 만들어서 필요한 값만 전달해주면 메뉴창을 만들 수 있게 만들었는데, ‘props’ is missing in props validation 에러가 나를 힘들게 하였다..

구글링, github, stackoverflow 등 다 찾아보아도 잘 작성한 것 같았는데 어디가 문제였을가.. 그래서 eslint에서 react/props-tpyes: off를 해야하나 망설이던 찰나에 팀원 한 분이 나를 구해주셨다.

정말 간단한 문제였다.

//생략..

interface Props {
    children: React.ReactNode
    show: boolean;
    onCloseModal: (e: any) => void;
    style: CSSProperties;
}

const Menu = ({ children, style, show, onCloseModal }: Props) => {
    const stopPropagation = useCallback((e) => {
        e.stopPropagation();
    }, []);

// 생략..

이런 식으로 바꿔주니 바로 되었다!! 크~~~!! 👍👍👍

무튼 이런식으로 오늘 로그인, 회원가입 입력 폼과 헤더 로고, 프로필 사진, 메뉴 컴포넌트 등을 만들어 보았다. 로그인 폼은 그래도 경험이 있어서 수월하게 할 수 있었지만.. 게시판은 다르다. 이제 본격적으로 메인 페이지인 게시판을 만들어야 하는데 이 부분은 한 번도 해본적이 없는 터라.. 많은 난관에 부딪힐 예정이다. 😭