GTDList 개발 로그 12 - 30 기본 CRUD

 두번째 개발일지다! 이번에는 2일치 작업 분량을 한번에 올릴 예정이다. 28일에 작업한게 많지 않은 것도 있지만, 그래도 CRUD를 구현했다는 점에서 하나의 마일스톤을 달성했기 때문에, 여기서 정리를 다시 하는게 맞다고 생각했다.

 

 우선 현재의 구현 상태는 이렇다 : 

시연 동영상 2

 다행히 27~28일 동안 리팩토링에 노력을 기울인 만큼 딱 나온 것 같다. 추가된 기능은

1. 플러스 마이너스 눌러서 CREATE, DELETE 가능.

2. 각각의 데이터 형태마다 다른 input 렌더링, 조작 가능.

정도 긴 한데, 쓰면서 느끼는 거지만 노력 대비 추가된 기능은 적은 듯... 하다.

 

그러거나 말거나 앞으로 해결해야하는 문제점은 2가지이다.

1. 실제 백엔드에 저장하기 위해서 Ctrl + S 혹은 메뉴에서 저장 버튼을 눌러서 저장할 수 있게 하는 event 구현

2. DateTime 입력시에 문자열 포멧팅 <-> input의 value가 제대로 치환이 안되는 문제

 

 일단은, 지식적으로는 좀 얻어간게 많았다.

1. 우선 확장하기 쉽도록 코드베이스를 갈았다.

 task가 기본적으로 MySQL에서 가져올 하나의 컬럼과도 같은 형태로 들어올거라, 단순히 전부 순회하면서 뿌릴 수가 없다. 그래서 각각의 속성별로 렌더링과 비렌더링, 어떤 input타입을 이용하는게 좋을지 등을 따로 type으로 정해두었다.

 

 지금은 이정도의 기능이 끝이지만, 나중에는 order 같은 속성을 더해서 name, time, memo 등의 순서를 바꾸거나, cellWidth 같은 속성을 더해서 실제 셀 크기를저장할 때 쓰일 수 있을 것이다. 하드코딩이 되어있지만 추후에 DB에서 유저 정보랑 같이 저장해서 받아올 수도 있을 것이다. 물론 지금은 더 큰 문제들을 먼저 해결해야 하지만.

2. 기초적인 코딩 작명법, 코딩 관습을 학습했다.

단순하게는 event 처리의 작명법이나 props에서 바로 value를 가져오는 것, 그렇지 않은 것의 차이등이 있다.

on <-> handle 만 달라지게 하는 작명.

이런 이벤트를 몇번이고 아래로 전달하는 경우가 많은데(ListTaskView 컴포넌트가 모든 것을 가지고 있다보니 그런 일이 발생한다.) redux 예제를 한번 살펴봐야할 필요성을 느끼고 있다.(그래서 실제로 공부 중!)

3. 왜 @emotion/react, @emotion/styled를 쓰는 건가? 에 대해서 알았다.

css파일이 따로 있다는 것 자체가 관리하기 어렵다는 것을 알았다. 처음에는 가독성 때문에 css가 중간에 들어가는게 문제가 되지 않을까 생각을 했는데, 오히려 같이 있는게 더 쉬운 것 같기도 하다. 제대로 css태그를 쓰려면 

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

 

 pragma를 제대로 세팅해야 한다는 것도 알아냈다. 아마 create-react-app 버전과 관련된 이슈인 것 같은데, 뭐 간단하게 해결 가능해서 여기다 메모를 해두는게 좋을 듯하다.

---

 의도적으로 기본적인 것을 제외하고는 스타일링, 애니메이팅을 하지 않고 있다. 나중에 백엔드까지 전부 박아넣고 나서 마지막으로 하게 될 듯하다. 아직도 메인페이지와 백엔드, 로그인 등의 기능들은 멀~었기 때문에... 이번에 만들어 봐야지.