1주차 회고

[anpaul0615]

1주차 회고

• 프로젝트 구조 작성 및 데이터그리드 입출력 기본구현 정도는 가뿐하게 할수있을줄 알았는데, 웬걸 프로젝트 구성에 생각보다 많은 시간을 사용했다.

• 사실 이번 개인프로젝트 주제 선정을 데이터그리드로 한것도 앞으로 지속적으로 고쳐나가면서 사용해보려는 의도가 있었는데, 어차피 나중에 타입적용 해야되니깐 처음부터 타입스크립트로 시작하자고 생각했다.

• 그러다보니 수업에서 배웠던 내용에서 벗어난 몇몇 주제들(특히 redux-toolkit 을 타입스크립트와 함께 사용하는 문제) 때문에 한두시간씩 쭉쭉 빠져나갔다.

• 이렇게 주말까지 와서 시간이 부족한 나머지 입력기능은 손도못댔고, 겨우겨우 출력기능(의 개미손톱만큼) 만 구현했다.

• 테스트 환경도 같이 구성했는데, 여기에서도 간간히 jest + typescript 이슈가 발생해서 마음이 자꾸만 조급해졌다.

• 중간에 수형님이 타입스크립트 사용에 대해 약간의 언지를 주셨는데, 그때 시점이 위의 시행착오들로 거진 다 해결하고 난 뒤라서.. 해놓은게 아까워서 그냥 진행하겠다고 했다. (고집부려서 미안합니다..)

• 짜투리시간에 종종 다른분들은 어떻게 진행하고 있나 하고 염탐(?)을 했었는데, 다들 정말정말 잘 진행하고계셔서 내 프로젝트가 조금 걱정이 됐다. (어떤분은 CI/CD 구성에 벌써 배포까지 해서 링크를 올리셨다.)

• 1주차는 아쉬운대로 마무리하고, 2주차는 조금 더 정밀하게 계획해봐야겠다.

1주차 작업 세부내용

• 프로젝트 구조 작성

  • cra + typescript + redux-toolkit 기반 프로젝트 구성
  • jest + typescript 테스트 환경 구성

• 출력기능 기본구현

  • 그리드 상태 타입 정의
  • 그리드옵션 타입 정의
  • component/container/service/store 보일러플레이트 작성
  • component/container/service/store 보일러플레이트 테스트 작성

1주차 보강작업

• store/modules/grid 테스트 보강 (async action 에 대한 extraReducers 부분)
• components/Grid 테스트 보강 (렌더링 검증 부분)

2주차 계획

• 1주차 보강작업

• 기본 출력기능 구현

  • 그리드옵션을 readonly 입력박스로 표출

• 기본 입력기능 구현

  • readonly 입력박스를 클릭하면, 클릭 위치 포커싱
  • readonly 입력박스를 더블클릭으로 editable 입력박스로 전환
  • editable 입력박스에서 값 입력
  • editable 입력박스에서 엔터(enter) 키 입력하면, 현재 위치 값 갱신 + readonly 입력박스로 전환

• 입력기능 고도화

  • 포커싱 되어있는 상태에서 방향키(←↑↓→) 입력하면, 포커싱 위치 갱신
  • 포커싱 되어있는 상태에서 삭제(delete) 키 입력하면, 현재 위치 값 삭제
  • 포커싱 되어있는 상태에서 취소(esc) 키 입력하면, 포커싱 해제
  • 그리드 내 입력박스 영역을 마우스드래그하면, 복수개의 그리드 포커싱
  • editable 입력박스에서 탭(tab) 키 입력하면, readonly 입력박스로 전환 + 다음 readonly 입력박스로 포커스이동 + readonly 입력박스를 editable 입력박스로 전환
  • (추가중)

• gh-pages 데모페이지 배포 구성

  • 출력 상태값을 입력하고 렌더링 버튼 누르면 그리드 갱신되는 웹페이지
  • master 브랜치 push 이벤트로 빌드되도록 github action 구성

3주차 계획 (임시)

• 스크롤 적용
• 클립보드 붙여넣기 구현

4주차 계획 (임시)

• 필터링 구현
• 그리드 입력박스 렌더러 커스터마이징 적용
• 스타일링