구현 요구 사항
- 회원가입 페이지 - 입력 받는 정보 중 신용카드 정보와 주소는 팝업을 이용하여 입력 받음
- 관리자 페이지 - 회원 정보 data table, 페이지네이션, 검색, 신규 계정 생성, 계정별 노출 메뉴 설정 기능 구현
- 로그인 / 로그아웃 기능 구현 - 로그인 후 자신에게 허용된 메뉴만 보여야 함
Points
- Agile 방법론의 적용
- React에서의 input form 활용
- 다음 우편번호 api 사용
Things I Learned
1. Agile
프리온보딩 코스 시작 이후 가장 규모가 큰 과제였다. 4일 동안 5명의 팀원이 '애자일하게' 협동하여 구현 요구 사항을 충족하는 것이 목표.
애자일 소프트웨어 개발 방법론의 핵심은 작동하는 소프트웨어의 작은 구성 요소를 신속하게 제공하여 고객의 만족도를 개선하는 것입니다. (출처 Red Hat)
애자일 방법론의 적용을 위해,
- 일정 기간 내에 완료할 수 있는 작업으로 업무를 분할한다. 여러 명이 같은 일을 하면서 시간을 낭비하는 일이 없도록 업무를 잘 나눈다.
- 소통은 자주 빠르게 한다. (데일리 미팅)
- 리액트의 장점을 사렬 컴포넌트를 재사용하기 쉽게 만드는 일에 집중한다.
프리온보딩 사전 과제 때도 모달 컴포넌트를 만들긴 했는데, LoginModal, SearchModal 이런 식으로 필요한 곳마다 새로 만들었었다... 😅 이번에는 다른 팀원도 갖다 쓸 수 있도록, props에 children이나 style 요소를 전달하도록 만들어 보았다. 그런데 이 모달을 사용할 때마다 열고 닫는 기능을 위해 부모 컴포넌트에 state를 설정해야 했다. 팀원 분이 useModal이라는 hook를 작성하는 아이디어를 내서 문제를 해결했다. "custom hook는 보통 기능과 화면 구성의 분리를 위해 작성한다"는 멘트와 함께... 오우 멋있다...
input validation도 내가 맡은 회원가입 페이지 뿐만 아니라 로그인에서도 쓰기 때문에, 로그인 담당자 팀원 분도 따로 구현했더라. 전날 데일리 미팅에서 현재 validation 기능 작업 중이라고 공유를 하긴 했는데, 서로 충분히 컴이 안 된 것 같아서 아쉬웠다. 팀원 분은 hook로 작성하여 내가 갖다 쓸 수 있었는데, 시간이 모자라서 바꾸지를 못했다. 그러고보니 나는 회원가입 페이지 컴포넌트에 validation과 api 호출하는 함수들이 다 들어가 있었네. 관리자 페이지에서 계정을 생성할 때 회원 가입 컴포넌트를 재사용 했는데, 코드가 엄청 중복되는 불상사가. 허허허 😭 잊지 말자, **해당 컴포넌트에 꼭 필요한 부분만 넣기.**
2. React에서 input 다루기
React에서 stateful DOM components를 다루는 두 가지 방식이 있다.
- a Controlled Component: current value를 props로 가져와서 변경사항을 콜백 함수로 전달한다. 부모 컴포넌트에서 state를 관리한다.
// Controlled:
<input type="text" value={value} onChange={handleChange} />- an Uncontrolled Component: ref를 사용하여 DOM의 current value를 찾는다. 컴포넌트 내부에 state 저장한다.
input value가 submit하는 시점에만 필요하거나 validate되어도 무방하다면 Uncontrolled component로도 가능은 하지만, Controlled component를 추천한다고.
....??? 으아니 value는 전달 안하고 onChange만 전달했는데 내 코드 어떻게 돌아간 것인가...? 빨리 코드 고치러 가야겠다. 😱 여러분 회고가 이렇게 중요합니다...
그리고 처음에는 input들을 감싸는 form 태그를 사용했다가 브라우저 기본 validation 디자인을 사용하지 않으려고(...그리고 아래에 언급할, 다음 주소검색 창을 띄우다가 뜬 오류를 해결하려고) 모두 제거했는데, 시멘틱 마크업을 준수하는 것이 좋다!
브라우저에서 기본으로 제공하는 디자인이 아니라 자체 디자인으로 값 유효성 검사 결과를 보여줘야 한다고 form 태그를 버리면 안 된다.
프론트엔드 개발자로서 늘 쓰임새에 맞는 태그를 사용하여 시멘틱(semantic) 마크업을 준수해야 브라우저에서 웹 페이지를 정확히 분석할 수 있다.
3. 다음 우편번호 api 사용
요구명세서에 '회원가입 정보 중 주소는 다음 우편번호 api를 사용하여 입력받아도 무방하다'는 내용이 있어서, 회원가입 페이지 담당인 내가 이 부분도 하게 되었다.
다음 우편번호 서비스 가이드 문서를 읽으며 '리액트 다음 우편번호 api'를 검색해보았는데, 죄다 react-daum-postcode를 사용했다는 정보 뿐이었다.
굳이 라이브러리를 쓸 이유가 없을 것 같아서 npm 사이트에 들어가서 해당 라이브러리 소스 코드를 열어보았다. 오..? 생각보다 간단하잖아....?! 라이브러리를 소스 코드를 보니 리액트에서 사용하는 방식을 알 수 있어서 내 필요에 맞게 코드를 작성할 수 있었다. 라이브러리를 열어보고 필요한 부분만 습득하는 경험이 나름 뿌듯.
근데 멀쩡히 잘 돌아가던 코드가 회원가입 페이지 컴포넌트 안에 들어가니, 창에 입력한 내용이 넘어가지 않는 문제가 발생했다. 보아하니, 문제가 일어나는 시점에 url 끝에 '?'이 붙는다...? 🤔 아... 이런. form 태그 안에 다음 api 호출하는 컴포넌트가 들어가 있어서 선택 버튼이 눌리는 순간 submit이 된 것이었다. 해결방법으로, button type을 "button"으로 만들고 form 태그를 모두 없애버렸다...ㅋㅋㅋ (단-순) 이제 와서 보니 에러를 고치고 돌아가게는 만들었지만, controlled component나 form에 대해 제대로 이해하지 못한 채였구나. 리팩토링이 필요하다..!!!
오늘의 교훈: 회고는 중요하다
