드디어 1차프로젝트가 시작되었다.
우리팀은 boopdoggy라는 강아지의 음식을 파는 곳을 클론코딩하게 되었다.
프로젝트를 시작하기전 멘토님들과 상담을 통해 어떤 기능을 구현하고, 어떤 것은 뺄 것인지 정하고 각자 구현할 페이지를 맡았다.
내가 맡은 페이지는 회원가입과 로그인페이지 그리고 마이페이지이다.
이 웹사이트는 특이하게 회원가입과 로그인이 한 페이지에서 모두 이루어진다.
이건 내가 만든 레이아웃이다. 레이아웃이 쉬운편?이라서 금방 만들었다. 또 너무 밋밋한거같아서 배경도 넣어봤다..ㅎ
여기서 글씨체, 폰트사이즈등 프로젝트 공통으로 적용되는 부분은 메인페이지에 맞춰서 작업하기로 하여 임시로 만들었다.
이제 코드를 볼까..?
우선 로그인 이라는 큰 테두리안에 SignIn과 SignUp을 컴포넌트로 나눠서 구현했다.
state에서 각 인풋별로 value를 받아와 validation을 확인한다.
처음에는 똑같은 기능을 하는 함수를 2개로 나눠서 input value를 관리했다. 하지만, 같은 기능을 하는 함수가 2개나 있을 필요가 없다는 멘토님의 피드백을 받고, 하나의 함수로 합쳤다.
어떤식으로 접근해야될지 몰라서.. 엄청 시간이 많이 들었다... (해보니 별거 아니었다.....나는 함수 하나에서 validation까지 하려니 안되는 것...)
email과 password는 정규표현식을 사용해서 작성해보았다.
정규표현식도 처음 써봤는데 재밌는친구같다ㅎ
마지막으로 회원가입에 성공하면 마이페이지로 이동할 수 있게 함수를 작성했다.
아직 백엔드랑 연결이 안되어서 데이터를 주고받고는 못하지만, 일단 기능은 되는거같다......
이제 시작인데 벌써 지쳤...
