Main Content

앱 디자이너 코드 보기에서 코드 관리하기

코드 보기는 MATLAB® 편집기에서 제공하는 동일한 프로그래밍 기능을 대부분 제공합니다. 또한, 코드를 탐색하고 많은 번거로운 작업을 방지하는 데 도움이 되는 다양한 기능도 제공합니다. 예를 들어, 검색 표시줄에 해당 이름의 일부를 입력하여 콜백을 검색할 수 있습니다. 검색 결과를 클릭하면 편집기에서 해당 콜백의 정의로 스크롤됩니다. 그리고 콜백 이름을 변경하면 앱 디자이너는 코드에서 이에 대한 모든 참조를 자동으로 업데이트합니다.

컴포넌트, 함수 및 속성 관리하기

코드 보기에는 코드의 여러 측면을 관리하는 데 도움이 되는 세 가지 창이 있습니다. 다음 표에 이러한 창 각각에 대한 설명이 나와 있습니다.

창 이름창 모양창 기능
컴포넌트 브라우저

Component Browser showing the property inspector for a button component.

  • 상황별 메뉴 — 목록에서 컴포넌트를 마우스 오른쪽 버튼으로 클릭하여 컴포넌트 삭제 또는 이름 변경, 콜백 추가 또는 도움말 표시 옵션이 있는 상황별 메뉴를 표시할 수 있습니다. 컴포넌트 브라우저에 컴포넌트 레이블 포함 옵션을 선택하면 그룹화된 컴포넌트 레이블을 표시할 수 있습니다.

  • 검색 표시줄 — 검색 표시줄에 이름의 일부를 입력하여 컴포넌트를 신속하게 찾을 수 있습니다.

  • 컴포넌트 탭 — 이 탭을 사용하여 현재 선택된 컴포넌트의 속성값을 보거나 변경할 수 있습니다. 또한, 이 탭의 맨 위에 있는 검색 표시줄에 이름의 일부를 입력하여 속성을 검색할 수도 있습니다.

  • 콜백 탭 — 이 탭을 사용하여 선택된 컴포넌트에 대한 콜백을 관리할 수 있습니다.

코드 브라우저

Code Browser showing the Callbacks tab with three callbacks.

  • 콜백, 함수, 속성 탭 — 이러한 탭을 사용하여 앱에서 콜백, 헬퍼 함수 또는 사용자 지정 속성을 추가 또는 삭제하거나 이름을 변경할 수 있습니다. 콜백 탭이나 함수 탭에서 항목을 클릭하면 편집기에서 코드의 해당 섹션으로 스크롤됩니다. 이동할 콜백을 선택한 다음 콜백을 목록의 새 위치로 끌어서 놓아 콜백의 순서를 재배열하십시오. 이렇게 하면 편집기에서 콜백의 위치도 변경됩니다.

  • 검색 표시줄 — 검색 표시줄에 이름의 일부를 입력하여 콜백, 헬퍼 함수 또는 속성을 신속하게 찾을 수 있습니다.

앱 레이아웃

App Layout showing a thumbnail of an app that contains a radio button group, a slider and a push button.

  • 앱 축소판 — 축소판 이미지를 사용하여 많은 컴포넌트를 포함하는 대규모의 복잡한 앱에서 컴포넌트를 찾을 수 있습니다. 축소판에서 컴포넌트를 선택하면 컴포넌트 브라우저에서 해당 컴포넌트가 선택됩니다.

코드에서 편집 가능한 섹션 식별하기

코드 보기 편집기에서 코드 중 일부 섹션은 편집이 가능하고, 일부 섹션은 그렇지 않습니다. 편집할 수 없는 섹션은 앱 디자이너에서 생성하고 관리하는 반면, 편집할 수 있는 섹션은 다음에 해당합니다.

  • 사용자가 정의하는 함수의 본문(예: 콜백 및 헬퍼 함수)

  • 사용자 지정 속성 정의

디폴트 색 체계에서 편집할 수 없는 코드 섹션은 회색으로, 편집할 수 있는 코드 섹션은 흰색으로 표시됩니다.

App code. A properties block and body of a function have a white background, while a methods block and function declaration have a gray background.

앱 프로그래밍하기

앱 디자이너는 앱을 MATLAB 클래스로 정의합니다. 앱 디자이너가 코드의 클래스와 객체 지향 프로그래밍을 관리하므로 사용자는 이러한 지식이 없어도 앱을 작성할 수 있습니다. 하지만 앱 디자이너에서 프로그래밍을 하려면 함수만 사용하는 것과는 다른 워크플로를 따라야 합니다. 툴스트립의 리소스 탭에서 유용한 정보 표시 버튼을 클릭하여 언제든지 이 워크플로의 요약 내용을 검토할 수 있습니다.

UI 컴포넌트 관리하기

UI 컴포넌트를 앱에 추가하면 앱 디자이너가 해당 컴포넌트에 디폴트 이름을 할당합니다. 이 이름(app 접두사 포함)을 사용하여 코드에서 해당 컴포넌트를 참조하십시오. 컴포넌트 브라우저에서 이름을 더블 클릭하고 새 이름을 입력하여 컴포넌트의 이름을 변경할 수 있습니다. 이름을 변경하면 앱 디자이너는 자동으로 해당 컴포넌트에 대한 모든 참조를 업데이트합니다.

Component Browser showing the name of a figure and a button component. The name of the button is app.Button, and the text "Button" is highlighted and editable.

코드에서 컴포넌트의 이름을 사용하려면 컴포넌트 브라우저에서 이름을 복사하여 시간을 절약할 수 있습니다. 코드의 편집 가능한 영역에서 컴포넌트 이름을 추가하려는 위치에 커서를 놓습니다. 그런 다음, 컴포넌트 브라우저에서 컴포넌트 이름을 마우스 오른쪽 버튼으로 클릭하고 커서 위치에 삽입을 선택합니다. 또는, 목록에서 코드로 컴포넌트 이름을 끌어서 놓을 수 있습니다.

Context menu associated with the app.Button component. The context menu includes the Insert at Cursor option.

어떤 컴포넌트를 삭제하려면 컴포넌트 브라우저에서 원하는 컴포넌트의 이름을 선택한 후 Delete 키를 누르십시오.

콜백 관리하기

컴포넌트가 사용자 상호 작용에 응답하도록 하려면 콜백을 추가하십시오. 컴포넌트 브라우저에서 컴포넌트를 마우스 오른쪽 버튼으로 클릭하고 콜백 > (콜백 속성) 콜백 추가를 선택합니다.

앱에서 컴포넌트를 삭제하는 경우 앱 디자이너는 콜백이 편집되지 않았으며 다른 컴포넌트와 공유되지 않은 경우에만 연결된 콜백을 삭제합니다.

콜백을 수동으로 삭제하려면 코드 브라우저콜백 탭에서 콜백 이름을 선택하고 Delete 키를 누르십시오.

콜백에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.

앱 내에서 데이터 공유하기

데이터를 저장하고 이를 여러 콜백 간에 공유하려면 속성을 생성하십시오. 예를 들어, 앱에서 데이터 파일을 읽고 앱 내의 여러 콜백이 해당 데이터에 액세스할 수 있도록 허용하고자 하는 경우 파일을 볼러올 때 속성에 데이터를 저장합니다.

속성을 생성하려면 편집기 탭의 속성 드롭다운을 확장한 후 프라이빗 속성 또는 퍼블릭 속성을 선택하십시오. 앱 디자이너가 템플릿 속성 정의를 만든 후 해당 정의 옆에 커서를 놓습니다. 속성의 이름을 원하는 대로 변경하십시오.

properties (Access = public)
        X % Average cost
end

코드에서 속성을 참조하려면 구문 app.PropertyName을 사용하십시오. 예를 들어, app.XX라는 속성을 참조합니다.

속성을 생성하고 사용하는 방법에 대한 자세한 내용은 앱 디자이너로 만든 앱 내부에서 데이터 공유하기 항목을 참조하십시오.

여러 곳에서 실행되는 단일 소스 코드

앱의 여러 부분에서 코드 블록을 실행하려면 헬퍼 함수를 생성해야 합니다. 예를 들어, 최종 사용자가 편집 필드에서 숫자를 변경하거나 드롭다운 목록에서 항목을 선택하면 이에 따라 플롯을 업데이트하는 헬퍼 함수를 생성할 수 있습니다. 헬퍼 함수를 만들면 공통 명령의 소스를 단일화할 수 있기 때문에 불필요한 코드를 유지할 필요가 없습니다.

헬퍼 함수를 추가하려면 편집기 탭의 함수 드롭다운을 확장한 후 프라이빗 함수 또는 퍼블릭 함수를 선택하십시오. 앱 디자이너가 템플릿 함수를 만든 후 이 함수의 본문에 커서를 놓습니다.

헬퍼 함수를 삭제하려면 코드 브라우저함수 탭에서 함수 이름을 선택하고 Delete 키를 누르십시오.

헬퍼 함수를 작성하는 방법에 대한 자세한 내용은 헬퍼 함수를 사용하여 코드 재사용하기 항목을 참조하십시오.

입력 인수 만들기

입력 인수를 앱에 추가하려면 편집기 탭에서 앱 입력 인수 를 클릭하십시오. 입력 인수는 여러 창이 있는 앱을 만들 때 일반적으로 사용됩니다. 자세한 내용은 앱 디자이너의 시작 작업 및 입력 인수 항목을 참조하십시오.

앱에 대한 도움말 텍스트 추가하기

사용자에게 앱에 대한 정보를 제공할 수 있도록 앱에 대한 요약과 설명을 추가합니다. 도움말 텍스트를 추가하거나 기존의 도움말 텍스트를 편집하려면 앱 도움말 텍스트 를 클릭하십시오. 앱 도움말 텍스트 대화 상자를 사용하여, 앱에 대한 간단한 요약과 앱 기능과 사용법에 대한 보다 자세한 설명을 명시할 수 있습니다. 앱 디자이너는 이 같은 도움말 텍스트를 앱 정의문 아래에 주석 형태로 추가합니다.

MATLAB 명령 창에서 앱 도움말 텍스트를 표시하려면 help 함수를 호출하고 앱 이름을 지정하십시오. 그 외에도 앱 도움말 텍스트는 앱에 대한 문서 페이지 위쪽에 표시됩니다. doc 함수를 호출하고 앱 이름을 지정하여 앱에 대한 문서 페이지를 볼 수 있습니다.

한 번에 하나의 인스턴스만 실행되도록 앱 제한하기

앱 디자이너에서 앱을 만들 때 앱에 대한 두 가지 실행 동작 중 하나를 선택할 수 있습니다.

  • 한 번에 하나의 앱 인스턴스만 실행되도록 허용.

  • 여러 개의 앱 인스턴스가 동시에 실행되도록 허용. 이는 디폴트 동작입니다.

앱의 실행 동작을 변경하려면 컴포넌트 브라우저에서 앱 노드를 선택하십시오. 그런 다음 탭의 코드 옵션 섹션에서 단일 실행 인스턴스를 선택하거나 선택 해제합니다.

Component Browser Inspector for the app node. The Code Options section is expanded and shows the Single Running Instance check box.

단일 실행 인스턴스를 선택하고 앱을 여러 번 실행할 경우, MATLAB은 새 인스턴스를 만들기보다는 기존 인스턴스를 재사용하여 맨 앞으로 가져옵니다. 이 옵션의 선택을 해제하면 MATLAB은 사용자가 앱을 실행할 때마다 새 앱 인스턴스를 만들고 기존 인스턴스를 계속 실행합니다. 이러한 실행 동작은 사용자가 MATLAB 툴스트립의 탭에서 실행하거나 명령 창에서 실행하는 앱에 적용됩니다.

앱 디자이너에서 앱을 실행할 경우에는 이 옵션이 선택되었는지 여부에 상관없이 실행 동작이 변경되지 않습니다. 앱 디자이너는 항상 새 인스턴스를 생성하기 전에 기존 앱 인스턴스를 닫습니다.

코드 문제 및 런타임 오류 수정하기

MATLAB 편집기와 같이 코드 보기 편집기는 코드에서 오류를 찾는 데 도움이 되도록 코드 분석기 메시지를 제공합니다.

Code Analyzer message for an edit field callback. The code in the function body sets EditField.Value. The message says "Use app.EditField to reference a property of app" and includes a button labeled "Fix".

앱 디자이너에서 바로 앱을 실행하면( 실행 클릭) 런타임에 오류가 발생하는 경우 앱 디자이너가 코드에서 오류의 원인을 강조 표시합니다. 오류 메시지를 숨기려면 오류 표시(빨간색 원)를 클릭하십시오. 오류 표시를 사라지게 하려면 코드를 수정하고 변경 사항을 저장하십시오.

Error message. The line of code with the error has an error indicator next to it.

앱 디자이너에서 앱 코드를 대화형 방식으로 디버그하여 코드 내 문제를 진단할 수도 있습니다. 자세한 내용은 MATLAB 코드 파일 디버그하기 항목을 참조하십시오.

코드 보기 모양을 자신에 맞게 구성하기

코드 보기 편집기에서 코드가 표시되는 방식을 사용자 지정할 수 있습니다. 코드 보기 기본 설정을 변경하려면 MATLAB 데스크탑의 탭으로 이동하십시오. 환경 섹션에서 기본 설정을 클릭합니다.

색 설정 변경하기

편집할 수 있는 코드 섹션의 색 설정을 변경하고 구문 강조 표시를 사용자 지정하려면 MATLAB > 을 선택하고 데스크탑 툴 색과 MATLAB 구문 강조 표시 색을 조정하십시오. 이러한 설정은 앱 디자이너 코드 보기 편집기와 MATLAB 편집기 모두에 영향을 줍니다. 자세한 내용은 데스크탑 색 변경하기 항목을 참조하십시오.

편집할 수 없는 코드 섹션의 배경색을 변경하려면 MATLAB > 앱 디자이너를 선택하고 읽기 전용 배경색을 조정하십시오. 이 설정은 MATLAB > 색 기본 설정에서 시스템 색 사용 옵션이 선택되어 있지 않은 경우에만 변경할 수 있습니다.

탭 기본 설정 변경하기

코드 보기 편집기에서 탭과 들여쓰기 크기를 지정하려면 MATLAB > 편집기/디버거 > 을 선택하십시오. 여기에서 탭과 들여쓰기의 크기 및 탭이 작동하는 방식에 대한 세부 정보를 지정할 수 있습니다. 이러한 기본 설정은 앱 디자이너 코드 보기 편집기와 MATLAB 편집기 모두에 영향을 줍니다. 자세한 내용은 편집기/디버거 탭 기본 설정 항목을 참조하십시오.

관련 항목