4주 프로젝트-2주차

Project Implementation

11/30

• UI/UX 디자이너님으로부터 XD 파일을 넘겨받아 작업진행을 시작했다. XD라는 것도 처음 알게되서 우분투에서 진행하려다가 에뮬레이터 등 설치문제로 데스크탑에 일단 무료체험판을 깔아서 진행했다. 이미 만들어진 시안을 토대로 작업해보니 레이아웃을 잡는데 오래 걸리지 않아서 좋았다.(SR 단계에서 UI 디자인 진행에 대한 중요성을 확실하게 알 수 있었다.)

• header를 fixed 옵션없이 flex에서 진행하는 방법을 적용했는데, 내용을 본격적으로 표시하는 contents 단에서 height 문제가 발생했다. 다행히 같이 진행해주시는 팀원분께서 min-height을 이용한 방법을 제안해주셔서 해결되었다. calc의 '공백' 문제에 대해서도 뼈저리게 느낄 수 있었다.

12/1

• 구현된 페이지 문의내역이 있어서 gif로 보여드리니 바로 피드백이 왔다. hover라던가 정렬 위치 등에 대한 부분인데 피드백이 빨라서 바로 수정할 수 있어서 좋았다. 확실히 시각적으로 하는 편이 빠른 듯.

• 오후에 전달된 페이지가 있어서, 해당 페이지에서 활용할 부분을 미리 만들어보는 시간을 가지는 계획을 짰다. → 공부하던 중 2차 XD가 넘어와서 바로 시작했다.

• react에서 모달이 아닌 팝업 구현에 시간 소모를 많이 했다. hook을 이용한 상태에서 제대로 동작하지 않아 class로도 만들어서 2중 코딩을 했다. 그와중에 발생했던 CSS CORS 문제로 인해 꽤 많은 시간을 소모했고, 이 문제를 해결한 라이브러리(react-new-window)를 발견했다. ㅇ<-<

12/2

• 질문을 올려두고 일어나니 답변이 달려있었다. 해당 부분을 적용하니 해결되었다.(why?) 일단 원리에 대한 부분이라서 재질문 해두었다. ㅠ.. truthy한 값이 유효하게 되어 계속 유지된다고 알려주셨다.

• 유효성검사에서 손쉽게 하는 것을 찾아보다가 react-hook-form을 발견했다. 다만, 전송 하는 부분 연동하는 걸 어떻게 할지 고민해봐야할 듯..

12/3

• react-hook-form을 활용하면 코드 가독성 면은 물론 유효성 검사를 위한 별도 모듈을 제작해주지 않아도 되어 엄청 편했다. 로그인, 초대에서 먼저 리팩토링을 진행했다. 가장 입력풋이 많은 사업장리스트 추가에서도 리팩토링을 진행해볼 예정이다.

• 전체 체크박스 클릭에 대한 부분을 진행했다.

• 검색 필터 설정에서 useState와 setState에 대해 다시 한번 깨달음을 얻었다.

• 프론트엔드쪽에서 CSS 통일을 진행했다. 페어분께서 단축형식으로 자주 쓰는 css 폰트나 자간 스타일을 설정해주셔서 무척 편했다. 추후 px를 rem으로 변경할 예정이다.

12/4

• div지옥이 일어나는 부분들이 보여서 section을 활용하거나 컴포넌트별로 처리할 수 있는 부분을 진행해서 코드 리팩토링을 했다.

• 첫 프로젝트에 시도해보고자했던 axios의 기본 config를 설정해보았다. 기본 url 설정은 무난했는데 jwt 인증을 헤더로 실어보내는 부분 설정이 잘못되어, 팀원분들의 의견을 참조하여 header 설정 부분을 다시 다듬어보기로 했다.

• 오늘 사업장리스트 리팩토링을 하면서 많은 정보를 전달해야하는 부분에서 form 태그는 정말 중요하다고 느꼈다. 다음에 구현할 페이지는 직원 정보 입력인데 더 많은 데이터를 전달해야하는 부분이라 더 잘 활용할 수 있을 것 같다.

• 다음 주소찾기 API 를 활용해서 주소찾기를 해야하는 부분이 있는데, 해당 부분에서 react-daum-postcode를 활용하여 처리했다. 일반 react 화면에서 띄워보기도 하고, 팝업으로도 띄워봤는데 엄청 편하다.

• state가 많은 부분에서 useReducer 리팩토링을 진행하고 있다. boolean 값에 대해서만 진행해보고 있는데, type에 따른 state 변경이 정말 편리한 거 같다.

• 주말에는 직원정보 입력 및 useReducer를 이용한 리팩토링을 완료하고자 한다. axios 헤더관련 테스트도 가능하다면 진행할 예정.