본문 바로가기

IT 관련/javascript & jquery

코드에서 구성 데이터 분리하기

코드는 컴퓨터가 실행하는 명령어 집할일 뿐 그 이상도 그 이하도 아닙니다. 데이터는 명령어에 의해 전달되기도 하고 수정되기도 하지만 궁극적으로는 데이터를 이용해 결과물을 만듭니다.

문제는 데이터를 수정할 때 생깁니다. 소스 코드는 수정할 때마다 에러가 발생할 위험이 있는데, 데이터 값을 변경하려고 코드를 바꾸면 다른 명령어에 영향을 미쳐 필요치 않은 위험을 초래합니다. 잘 디자인된 애플리케이션에서는 주요 데이터를 소스 코드밖에 두어 에러가 발생할 걱정 없이 데이터를 수정할 수 있습니다.

 

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