1. 배송 정보 입력

• 배송 정보 입력

강의 정리

주문 페이지

개발하려는 페이지와 비슷한 구조를 갖고 있는 기존의 페이지를 활용해서 빠르게 구현을 시작한다. 개발자가 예상한 대로 링크를 통해서 페이지에 들어오지 않고, 직접 URL을 입력해서 들어오는 경우도 실제로는 고려해주는게 좋을 것 같다. 사용자가 이상적으로 행동할 것이라고 믿으면 안된다.

요즘 느끼기에는 Page 컴포넌트를 작성할 때, 파일명과 컴포넌트명에 -Page를 붙여주는 게 좋은 것 같다. 리액트는 컴포넌트로 UI를 작성하기에 결국 모두 컴포넌트이지만, page 컴포넌트는 작은 컴포넌트들이 모여 하나의 페이지 컴포넌트를 만들고, 진입점, 비즈니스 로직을 호출하는 곳등의 역할이 있기 때문에 명시적으로 표현해주는 게 좋은 것 같다. 어플리케이션이 복잡해질수록 현재 파일이 페이지인지, 컴포넌트인지 판단하기에도 좋다고 생각한다. 파일명에 Order.page.tsx와 같이 작성하는 경우도 봤는데 괜찮은 것 같았다. 결국 컨벤션, 합의가 중요할 것.

배송지 정보를 입력할 때, 주소록에 들고 있다가 선택하는 것도 무조건 직접 만들어 볼 것. OrderFormStore에서 배송지 정보 form을 관리한다. form 검증할 때 trim 항상 활용해주기. 핸드폰 번호를 받을 때, -(하이푼)을 넣냐, 마냐가 정말 서비스마다 달랐던 것 같다. 뭘로 해도 가능하도록 코드 레벨에서 처리해주는 것도 봤고, 정규표현식을 활용하여 특정 케이스만 받도록 하는 것도 봤다. 개인적으로는 하이푼 없이 번호만 받는게 좋은 것 같다.

form에서 input을 다룰 때 type attribute를 잘 활용하는게 중요하다. PC에서는 느끼기 힘들지만, 모바일의 경우에 키패드라던가 차이점이 명확하게 존재한다.

우편번호 검색

온라인에서 쇼핑몰을 이용해 봤다면 무조건 입력해봤을 우편번호 검색이다. Daum 우편번호 서비스를 활용한다. 예제 코드에는 protocol이 가려져 있는데, 무조건 ssl로 사용할 것. 외부 패키지를 사용할 때, cdn으로 다운받아야 하는 경우에는 script 태그를 사용하는데 React의 경우에 index.html 파일에 넣어준다. 또 JS의 경우에는 html이 JS를 불러올 때 순서대로 불러오기 때문에, 우리 리액트 코드의 스크립트보다 상위에 위치해야 한다. 그래야 외부 패키지를 다운로드 받고, 우리 리액트 앱이 실행된다. TypeScript에서 사용하는 경우에는 new daum과 같이 작성하면 타입을 알지 못한다. 따라서 Styled-Components에서 타입을 잡아줬던 것 처럼 타입을 잡아준다. 우편번호 검색창을 깔끔하게 보여주기 위해서, 모달을 만드는 것 처럼 Wrapper 컴포넌트를 만든다. Daum 우편번호 서비스 명세대로 그대로 활용해주면 된다.

form 같은 경우에 계속 입력하면서 확인해야 하면 e2e 테스트를 활용할 수 있다. codeceptjs 자체는 테스팅 도구지만, 뒤에서 돌아가는 playwright은 automation 하는 용도다.