운동 기록 앱 만들기!
버튼을 클릭했을때 버튼의 실행 대상(e.target)이 계속 바뀌는 문제
Button 태그를 눌렀을때 해당 버튼의 id 값을 가져오고 싶었음.
const addRow = (e) => {
logger(e.target)
};
...
<ButtonCont>
<Button
id={`add_button_${tables.indexOf(table)}`}
bgColor="#fff"
width="100%"
_onClick={(e) => {
addRow(e);
}}
>
<Image
src={PlusButton}
width="30px"
height="30px"
margin="20px 0"
></Image>
</Button>
</ButtonCont>
빨간 네모, 검정 네모, 파란 네모를 눌렀을때 모두 다른 target이 나옴.
서칭을 조금 해보니... 이벤트 버블링의 가장 마지막에 위치한 최하위 요소를 반환하는 것이라고 한다.
내가 의도하고자 한것은 e.currentTarget 인데 e.currentTarget은 console.log(e.currentTarget) 에 담았을때, null이 나옴...
또 그 이유를 찾아보니... 이벤트가 동작하는 동안에만 그 값을 보여주는데 이벤트가 끝나면 null을 뱉는다고 한다.
const addRow = (e) => {
dispatch(exerciseCreator.addSetData());
const target = e.currentTarget;
};
...
<ButtonCont>
<Button
id={`add_button_${tables.indexOf(table)}`}
bgColor="#fff"
width="100%"
_onClick={(e) => {
addRow(e);
}}
>
<Image
src={PlusButton}
width="30px"
height="30px"
margin="20px 0"
></Image>
</Button>
</ButtonCont>위와 같이 로컬 변수에 담아두면 해결!
api 명세에 대한 이슈
백엔드 팀원들에게 제안한 나의 post api request
{
"myExercise": [
{
"exerciseName": "벤치 프레스",
"set": [
{
"type": "exercise",
"count": 2,
"weight": 20
},
{
"type": "break",
"time": 60
}
]
}
]
}백엔드 팀원들이 제안한 post api request
{
"myExercise": [
{
"exerciseName": "벤치 프레스",
"set1": {
"count": 2,
"weight": 20
},
"set2": {
"count": 3,
"weight": 25
},
"set3": {
"count": 4,
"weight": 30
},
"break1": {
"time":
}
}
]
}위 방식에 대한 백엔드 팀의 근거
- set1, set2 이런식으로 key:value로 담아주면 db 보관하기가 편하다.
- set를 수정하고 삭제하는 과정에서 데이터가 잘못되었는지를 분간하기 쉽다.
위 방식에 대한 나의 의문
- set1을 제거하면 set2부터 key 이름을 모두 -1 해줘야하는데 불필요한 로직으로 보이고 순서를 명확히 제공해주는 배열 자료형을 쓰면 해결할 수 있다.
- set를 수정하고 삭제하는 과정에서 데이터가 잘못되었는지는 프론트의 로직을 잘 짜야 해결할 수 있지, 백엔드에서는 유저가 어떤걸 의도했는지 validation 할 수 없음.
- 배열 자료형과는 달리 break1이 몇 set 사이에 위치하고 있는지 불분명하다.
결론
- 배열에 담아서 통신하기로...
빠굥