실전 프로젝트 - 1

박경준·2021년 7월 27일
0

운동 기록 앱 만들기!

버튼을 클릭했을때 버튼의 실행 대상(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 사이에 위치하고 있는지 불분명하다.

결론

  • 배열에 담아서 통신하기로...
profile
빠굥

0개의 댓글