코드는 컴퓨터가 실행하는 명령어 집할일 뿐 그 이상도 그 이하도 아닙니다. 데이터는 명령어에 의해 전달되기도 하고 수정되기도 하지만 궁극적으로는 데이터를 이용해 결과물을 만듭니다.
문제는 데이터를 수정할 때 생깁니다. 소스 코드는 수정할 때마다 에러가 발생할 위험이 있는데, 데이터 값을 변경하려고 코드를 바꾸면 다른 명령어에 영향을 미쳐 필요치 않은 위험을 초래합니다. 잘 디자인된 애플리케이션에서는 주요 데이터를 소스 코드밖에 두어 에러가 발생할 걱정 없이 데이터를 수정할 수 있습니다.
1. 구성 데이터란?
구성 데이터는 애플리케이션 코드에 직접 입력된 값입니다. 다음 예제를 통해 살펴보겠습니다.
// 코드에 삽입된 설정 데이터
function validate(valeu){
if(!value){
alert("Invalid value");
location.href = "/error.php";
}
}
function toggleSelected(element){
if(hasClass(element, "selected")){
removeClass(element, "selected");
}else{
addClass(element, "selected");
}
}
이 코드에는 구성 데이터 3개가 있습니다. 첫 번째는 사용자에게 보여 줄 "invalud value"문자열입니다. 이때 UI에서 사용되는 문자열은 자주 발뀔 수 있습니다. 두 번째는 /error.php라는 URL입니다. URL은 개발이 진행되며 의사결정에 따라 언제든 변경될 수 있습니다. 세 번째는 CSS 클래스인 "selected"입니다. 이 클래스명은 에제에서 총 세 번 사용되므로 클래스명이 변경되면 총 세 군데를 수정해야 하는데 이렇게 여러 곳을 수정하면 하나는 놓치고 넘어갈 수도 있습니다.
이렇게 소스 코드에 직접 입력된 값은 언제든지 바뀔 수 있어 설정 데이터로 간주합니다.
다음 항목은 모두 구성 데이터에 대한 예시입니다.
- URL
- UI에 보여지는 문자열
반복되는 고유한 값
- 설정값(ex. 페이지당 게시물 수)
- 변경될 수 있는값
구성 데이터를 변경할 때 꼭 기억해야 할 것은 홈페이지에 보일 메시지를 수정하려고 자바스크립트 소스 코드까지 변경하는 건 아무도 원치 않는다는 것입니다.
다음 시간에는 구성 데이터를 분리하고 저장하는 방법을 알아보겠습니다.
그럼 이만.
끝.
'IT 관련 > javascript & jquery' 카테고리의 다른 글
javascript 자동화 (0) | 2022.02.04 |
---|---|
[javascript] 파일과 디렉토리 구조 (0) | 2022.02.02 |
javascript 브라우저 탐지 (0) | 2022.01.21 |
자바스크립트 이벤트 처리 javascript (0) | 2022.01.16 |
[javascript] try...catch문 (0) | 2022.01.14 |