4주 프로젝트-3주차

Project Implementation

12/5~7

• 주말에 갑작스러운 사고가 생겨서 일단 사고 수습을 진행하느라 하루를 보냈다. 다음날 팀원들과 코드스테이츠측에 급하게 연락을 취해 월요일 일정에 부득이하게 참여하지 못할 것이라고 알렸다.

• 일요일에는 월요일에 진행할 수 없는 부분을 커버하기 위해 구현을 서둘렀다. useReducer를 통한 코드 리팩토링 및 목표로 구현하고자 했던 페이지의 레이아웃과 기능까지 추가를 완료했다. 밤 12시가 되었을 즈음, 머지 후 팀원들에게 내용을 전달했다.

• 믿음직스러운 팀원분들 덕에 월요일 내리 병원에 있을 수 있었다 ㅠㅠ.. 슬랙을 통해 팀원이 공유해준 내용과 업체측에서 추가된 내용을 파악했다. 서버와 테스팅부분이 어떻게 되었는지 내일 확인해봐야할 것 같다.

12/8

• 걱정했던 헤더 세팅 및 다음주소API 상호작용은 문제 없이 잘 진행되었다. 다만 화면 새로고침 시, 로그인이 풀리는 현상에 대해서는 cookie가 아닌 localStorage로 저장을 진행해서 테스트해보기로 했다.
  → localStorage로 설정한 후, 새로고침 시 데이터도 올바르게 잘 받아오고 로그인이 풀리는 것 같지는 않다! 내일 팀원들과 한번 더 체크해봐야겠다.

• input form의 제어/비제어에 대한 문제는 잡아가면서 알게 되는 부분이 많은 것 같다.

• 다량의 정보를 입력하고 관리하는데 있어 useReducer 가 굉장히 사용하기 편하고 가독성, 효율성 면에서도 참 좋았다. 다만 관리해야하거나 취해야하는 액션이 많아질수록 코드가 길어지는 부분은 피해갈 수 없어서 모듈화를 진행해볼 예정이다.

  • 체크박스 관련 참조사항 & 관련 예시

• 팀원분이 미리 세팅해둔 calender 라이브러리를 input에 적용하는 작업은 재미있었다. moment를 이용한 date 값에 대한 부분도 공부할 수 있어서 좋았다.

• CSS의 상속에 대해 공부를 하게 되었고, 취소선이 생기는 부분의 원인은 어떻게 파악해야하는지도 알게 되었다. 그리고 전역에 걸쳐 적용했을 때 영향받는 부분을 발견해서 클래스이름 지정도 매우 중요함을 인식하게 되었다.

• 서버와의 상호작용에 앞서 서버에서 받는 데이터 키와 클라이언트 키를 미리 맞춰놓는 작업이 정말 중요한 것을 알았다. 서로 커뮤니케이션을 하지 않은 채, 임의의 값을 세팅해서 진행하게 되면 추후 수정할 때 불필요한 시간이 소모된다.

• 디자이너와 개발자간의 의사소통에 대해 오늘 많은 깨달음을 얻었다. 디자인이 나온 그대로 작업을 하는 것도 중요하지만 "데이터의 흐름"이 어떻게 되는지 알아야 하고, 새롭게 컨버젼을 시도하는 경우 기존 디자인이나 데이터에서 유지되는 것은 있는지도 파악을 해야 일처리가 수월해질 수 있다. 특히, CSS 의 경우 기본으로 설정해둔 값이 존재한다면(border, hover 등) 미리 전체에서 활용할 수 있게 변수등록을 해두는 것이 좋다.

12/9

• localstorage에 어떤 값을 저장해나갈 것인가에 대한 부분도 중요한 것 같다. 로그인 상태는 유지되지만, 새로고침을 할 때, 일부 데이터가 유실되는 부분도 발견했다.(새로고침의 늪...) 이 부분은 로컬에 저장을 하거나 혹은 다른 방향은 어떤게 있을지 고민해봐야겠다.

• form 데이터필드가 많아지면 많아질수록 form이 아니라 컴포넌트화를 진행해야 하는게 올바른가에 대한 고민을 하고 있다. 팀원분의 의견을 받아서 리팩토링을 시도해볼 부분으로 남겨두었다. form자체에서도 컴포넌트 상호작용이 되는지도 체크 예정. + useReducer 포함

• 넘겨줘야할 값이 많아질 경우, 백엔드와의 소통도 무척 중요하다. 백엔드 팀원분께 미리 데이터 필드에 대한 정보를 넘겨서 수정 진행할 부분을 맞춰나갔다.

• 초반 데이터 필드를 디자인할 때, className이나 주석을 통해서 잘 적어놔야겠다. 아니면 코드 자체의 참조할 수 있는 부분 적어놓는 부분을 따로 기재해둔다던가 하는 방향이 필요하다고 생각한다.
  → 주석의 가독성을 높이기 위해 확장 프로그램(Better Comments)를 설치했다.

12/10

• form필드 내부 컴포넌트화 및 useReducer 모듈화작업을 끝냈다! 1000줄이 넘어갔던 페이지가 250줄 가량으로 줄어든 것을 보고 속이 다 시원해졌다 ㅠㅠ... 잠깐 백엔드팀원분과 이야기나누면서 모듈작업했던 것도 써봤는데 확실히 가독성도 좋았다.
  → 모듈화 작업하는데 redux를 참조해서 진행했다.

• 서버 DB와 연동을 위해 백엔드분과 소통하면서 맞춰나갔다. 그냥 전달하면서 교체하기보다 서로 화면 보면서 교체작업을 진행하니 훨씬 좋았다. 이런식으로 전달해주면 좋겠어요~ 라는 부분에 대해 안 되는 부분은 어떻게 하면 될 수 있을까? 혹은 어떻게 조율할 수 있을까? 라며 고민해보는 것도 좋았다. (서버 DB에 실제로 들어갈 수 없는 필드값을 프론트엔드에서 어떻게 처리해줄 수 있을지 등..)

• 초반 CSS 레이아웃이 잘못되기 시작하면 뒤로 만들어나가는 CSS 가 연결되어 이러지도 저러지도 못한 상황을 만나게 되는 걸 이번에 많이 경험하는 것 같다. 수정할 수 없는 범위의 레이아웃 이라면(특히 전체에 영향을 주는..) 이를 수정하지 않는 범위 내에서 어떻게 다른 CSS를 수정할지에 대한 관점도 키워야할 것 같다.

12/11

• 오늘은 미팅타임을 가지고 궁금한 부분 물어봤다. 코드에 대해 궁금한 점이 있어서 문의드렸는데 추려서 올려주면 검토해주시겠다고 했다. 세부적으로 아쉬운 부분도 있으셨던 것은 오늘 말고 다음에 해주시기로 했다.

• 작업페이지가 늘어난 걸 보고 예상은 했지만, 기업측에서 예상했던 것보다 진도가 빠르다고 하셨다. 목표로 했던 것 이상으로 달성한 것 같아서 뿌듯! 남은 기간 추가작업도 꼭 완료할 수 있도록 노력해야겠다.

• 작업페이지가 늘어난 만큼, 서버랑 상호작용해야하는 부분이 늘어났다. 백엔드팀과 소통을 통해 진행하기로 했다.