오늘 curly brace 하나로 1시간 정도 필요없는 시간을 디버깅에 할애하였다.
그래서 소개해본다.
올바른 코드
export const setColor = ({ index, color }) => ({
type: types.SET_COLOR,
index,
color,
});
인자 부분이 ( { index, color } ) 의 object형으로 이루어져있고,
내부에 구조 분해 할당을 이용해서, 넣어주는 올바른 코드이다.
export const setColor = ( index, color ) => ({
type: types.SET_COLOR,
index,
color,
});
하지만, 오늘 타이핑을 하다 실수를 한건지, 인자를 저런식으로 줘서, setColor 관련 함수가 들어간 컴포넌트들이
모두 다 index와 color를 받지 못하는 사고가 있었다. setColor 함수는 이용할때 Object를 줬는데, 정작 호출 되는 함수는
자신이 정의된 인자가 Object가 아닌데도, 에러를 띄우지 않고, 들어간 Object도 자기혼자 구조분해할당을 해당 객체가 없으니
할당도 되지않고 에러를 띄우지도 않는다. 차라리 Warning이라도 띄워주던지..
C Family Language 를 주로 이용한 나는 이런 것들이 아직 익숙하지않다.
type에 대한 문제, 특히나 프로젝트가 커질수록 실수 할 가능성이 높은 것들에 대한 불안 요소가 싫기도 하고
그래서 TypeScript를 이용 하는 거고, 사실 필수적으로 이용 해야할 것같다.
'FrontEnd > JavaScript' 카테고리의 다른 글
JS url 요청 할때 한글이나 특수문자가 들어갈 경우 (0) | 2021.10.19 |
---|---|
유사 배열의 순회 (0) | 2021.10.18 |
JavaScript 콜백 함수(Callback Function)의 이용 (0) | 2021.07.28 |
자바스크립트 이벤트리스너 (0) | 2021.07.27 |