728x90
핵심 Keyword
1.
2.
3.
Data 와 Watch 에 대한 고민
Vue 개발을 할 때, 지양해야하는 개발 습관 중 하나가 data와 watch 를 늘리는 것이라는 피드백을 받았다. 간단한 기능 개발 업무를 부여받았는데, 조건에 따른 처리가 필요한 기능 개발이었다. 그래서, data 를 생성하고 watch 를 통해 처리를 했는데, 이런 개발은 굉장히 지양할 필요가 있다는 것이었다.
이유는 간단하다. 애플리케이션의 리소스를 잡아먹는 것들이기 때문이다.
실제로, 나는 조건문을 위한 데이터를 생성해서 처리를 하였는데, 이미 다른 data 의 상태 조회를 통해 같은 기능을 구현할 수 있었다. 그래서 가능하다면 이미 생성되어 있는 data 들을 통해서 처리할 수 있는 방법을 고민해보고 기능을 구현하는 것이 더 좋은 방법이라고 할 수 있겠다.
watch 를 늘리는 행위는 더욱 안 좋은 행위라고 할 수 있다. watch 는 EventListener 의 동작과정을 고민해보면 왜 사용을 지양해야하는지 이해할 수 있는데, 특정 행위나 데이터가 조건에 걸리기만을 계속해서 확인하는 과정을 애플리케이션에 추가하는 것과 다를 바가 없기 때문에, 많은 watch 를 추가한다는 것은 사용성에 악영향을 미칠 수밖에 없다.
Null 과 Undefined 는 명확히 다른 것이다. (JS의 변수 초기화 과정)
나는 변수 초기화가 0으로 되어 있는 data 를 만났다. 숫자 데이터가 들어올 상황이라 0으로 초기화가 되어 있는 상황이었는데, 공교롭게도 수의 범위가 -1~100 이런 식으로 값이 들어오고 있었다.
0으로 초기화를 진행하면 0을 선택한 상황으로 시작을 하는 것과 다름이 없으니, 해결을 해야 했는데, 나는 단순히 -50을 넣어버리는 식으로 처리를 했다. 혹은 null 을 넣기도 했는데, 나는 'JS의 변수 생성과 초기화 과정을 공부하고, null 과 undefined 의 차이를 명확히 아는 것이 도움이 될 것 같다'는 피드백을 받았다.
우선 JS에서 변수를 생성하고 초기화하는 것을 간략하게 이해해보자.
JS에서는 변수를 생성하면, 메모리 영역에 해당 변수를 위한 주소를 부여하고, 해당 변수 영역을 undefined 로 초기화해버린다.
let a;
이렇게 변수를 생성만 하더라도, a = undefined; 이런 식의 코드가 자동적으로 실행된다고 이해해도 되겠다.
JS는 왜 이렇게 동작할까?
이유는 간단하다. 해당 변수의 메모리 영역에 garbage 값이 들어 있을 수 있기 때문에 한번 비워주는 과정이라고 생각할 수 있다.
아무튼, 이처럼 undefined 라는 것은 JS 엔진이 명시적으로 해당 메모리 영역을 초기화했고, 값이 없다는 의미를 내포하고 있는 값이다.
이런 특징 때문에 undefined 를 개발자가 직접 사용하는 것은 권장되지 않는 방식이다.
그렇다면, 값이 비어있다는 것을, 초기화를 아직 하지 않았다는 것을 개발자는 어떻게 표현해야할까?
이때 필요한 것이 바로 Null 이다. Null 은 개발자가 초기화가 진행되지 않았으며, 값이 비어있음을 명시적으로 나타내기 위해서 사용된다.
그래서, 나의 실제 업무에서도, Null 로 초기화를 해놓고, null 이 아닌 다른 값이 들어오면 사용자가 사용했다는 것을 감지하도록 코드를 구성하면 되겠다.