📢 이 문서는 처음부터 끝까지 스스로 작성한 문서입니다.
내가 계획중이였던 로직
저는 현재 한 프롭테크 기업에서 Web Frontend를 담당하고 있는데요,
다중선택이 가능한 체크박스들의 값을 서버로 전송하는 로직을 새롭게 짜고 있었습니다.
예를들어, '내가 좋아하는 색깔들'을 submit할때
// 순서대로 red, blue, green, white
LikeColor = [1, 0, 0, 1]로 순서대로 true(1)인지 false(0)인지 서버로 보내려고 했었어요
왜냐면 백엔드 개발자 분들이 정의 해놓은 DB구축 엑셀에서도 1은 red이고 2는 blue ... 라고 '명시'가 되어있었기 때문이죠.
사수분의 피드백
저는 이 DB구축 엑셀 시트가 변경될 가능성을 생각하지 못하고 있었어요.
현재로서는 완벽하다고 생각하겠지만 정책 변경 등의 사유로 중간에 하나가 추가되거나 삭제되면 배열의 특성상 인덱스가 하나씩 밀리는 생각을 못했던 겁니다.
그러니까 확장성을 염두에 두지 않고 작업을 들어간 것이였죠..
다행이도 작업이 많이 들어가기 전에 프론트엔드 사수분이 제 실수를 잡아 주셨고
enum ColorCode {
red = 1,
blue = 2,
greem = 3,
white = 4,
}
LikeColor = [1, 4]위처럼 체크된 코드값의 배열을 보내는 것으로 수정하기로 했습니다.
추가로 알면 좋은 내용
참고로
enum ColorCode {
red = 1,
blue = 2,
greem = 4,
white = 8,
}
LikeColor = 3위처럼 배열을 보내는 것이아니라 3이라는 숫자를 보내는 기법도 있다고 하는데요,
3에 이미 1+2라는 의미가 내포되어 있는 경우를 활용할 수 있는 경우라고 합니다.
후기
사실 체크된 값들을 서버로 전송할때 체크된 value를 배열로 보낸다는 사실은 이전 퍼블리셔로 일할때도 능히 알고 있던 내용이였습니다.
하지만 새로운 기업에 들어오고 새로운 환경에서 그리고 DB구축 시트까지 존재해서 저도 모르게 혼란이 있었던 것같아요. 체크한 밸류의 값을 서버로 전달한다는 기본 기능은 같은 것인데 UI가 바뀌면서도 다른 것이니 새로운 방법을 찾아야한다라고 생각했던 것 같아요.
아무리 일차원적인 실수라도 본인이 범하고 있는 실수는 혼자 알아채기 힘든 법인데 좋은 사수분께 가이드 받아서 정말 다행이라고 생각하고 있어요 :)
