걱정 반 설렘 반이었던 프로젝트가 시작되었다.
내가 맡은 페이지는 회원가입과 장바구니 페이지이다.
회원가입 페이지는 비교적 빠르게 완료되었다. UI적으로 간단해서 빠르게 뻐대를 세우고 CSS작업을 마쳤다.
회원가입 구현 중에서 그나마 시간이 걸렸다고 한다면 유효성 검사였다(사실 그게 전부였지만).
처음으로 정규표현식을 사용해 보았다. 하나하나 뜯어보고 이해하기에는 시간이 많이 걸릴 것 같아 조건에 맞는 수식을 인터넷에서 복사 붙여넣기 했는데,
match함수가 아닌 include함수를 쓰는 바람에 오류가 나서 좀 헤맸던 것을 제외한다면 정규표현식 사용 자체는 길게 걸리지 않았다.
그 다음에는 정규표현식을 사용하여 input값이 그에 맞지 않으면 빨간 글씨체를 노출시키는 것이었다. 이것 또한 삼항연산자를 사용하여 해당 p태그에 클래스네임을 다르게 주어 해결하였다.
const emailCheck =
email === '' ? 'hidden' : email.includes('@') ? 'hidden' : 'show';
const checkPwd =
password === ''
? 'hidden'
: password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/)
? 'hidden'
: 'show';
// hidden은 말 그대로 display: none이고, show는 display block이다.유효성 검사를 마친 input 값은 fetch함수를 통해 서버로 전달되며,
이미 가입된 이메일일 경우 가입이 되지 않는다.
다음은 장바구니 페이지인데, 일주일의 시간 대부분을 여기에 쏟아부었다 해도 과언은 아닐 것이다.
먼저 상품 컴포넌트 별로 주문 수량 카운트를 컨트롤 하는 것이 생각보다 오래 걸렸다.
set함수로 업데이트를 하고자 하면 바로 원본 데이터가 손상되어버려 고민이었는데,
알고보니 업데이트 하기 전에 한번 복사를 한 후에 복사한 배열을 바꾸고 그 배열로 원본 데이터를 업데이트 하는 방식이었다.
기수 내에서 악명 높았던 체크박스 역시 이같은 방법으로 조금 수월했던 것 같다.(물론 여러 삽질을 한 후였지만)
장바구니 페이지에서 체크박스는 거의 필수적으로 있는 구현 사항이다.
다른 페이지에서 장바구니 페이지로 넘어가면 모두 선택되어 있는 것이 default값이고 거기서 별도의 작업 없이 구매하기 버튼을 통해 바로 결제로 넘어갈 수 있다.
체크박스 구현을 생각해 보면서 첫 단추부터 잘못 꿰었다. 백엔드 분과 이야기를 나누어도 보고 혼자 생각해 봤을 때 때 체크박스 true false값은 서버에서 받을 필요가 없고, 그냥 프론트에서 자체적으로 관리할 수 있겠다는 생각과 함께 기본값은 false로 해야겠다라고 생각을 했더랬다.
그렇게 초기값을 false로 주고 시작하니 제대로 될 리가 없었다. 하나가 되면 다른 하나가 말썽이고, 잘 되나 싶으면 꼭 어딘가에서 문제가 발생했다.
그렇게 이틀을 고민하다 결국 멘토님께 물어보고 난 후, 아! 이 값은 서버에서 초기값을 true로 받아와야 하는 것이구나 라는 것을 깨달았다.
그렇게 임시 데이터에서 check 초기값을 true로 설정하고나서 시작하니 거진 이틀동안 고민했던 구현을 단 3시간만에 구현에 성공하였다.
결론은 꺼진 불도 다시보고 징검다리도 두드려보고 건너자 라고 할 수 있을 것 같다.
