MIT 앱 인벤터에서 코드 디버깅 및 오류 수정을 위한 팁 알아보기
이 단원의 활동은 다음과 같습니다:
디버깅이란 무엇인가요?
디버깅 는 코더가 코드가 작동하지 않는 이유를 파악한 다음 코드가 작동하도록 수정하기 위해 사용하는 프로세스입니다.
디버깅이라는 용어는 컴퓨팅의 선구자인 그레이스 호퍼 제독에게서 유래했습니다. 그녀는 1940년대에 하버드 대학교에서 마크 II 컴퓨터를 연구하던 중 나방이 컴퓨터에 끼어 작동을 멈췄습니다.
나방을 제거하면서 그녀는 시스템을 '디버깅'하고 있다고 말했습니다. 프로그래머들은 이제 이 용어를 "내 코드의 오류 수정"이라는 의미로 사용합니다.
코딩 팁
디버깅은 코딩에서 가장 답답하고 시간이 많이 걸리는 부분이기 때문에 충분한 시간을 할애하는 것이 정말 중요합니다!
그리고 인내심도 필요합니다!
작은 청크
가끔 프로그래머는 전체 앱을 한 번에 코딩한 후 테스트하고 싶은 유혹을 받습니다.
그 유혹에 빠지지 마세요!!!
무언가가 제대로 작동하지 않는 경우, 오류를 수정하기 위해 어디서부터 시작해야 할지 파악하기 어렵습니다.
앱의 코딩을 작은 덩어리로 나누세요.
다음 작업을 시작하기 전에 한 가지를 먼저 해결하세요.
조금 코딩하고, 조금 테스트하고, 작동하는지 확인한 다음, 조금 더 코딩하고, 조금 더 테스트하는 식으로 진행합니다.
예를 들어 앱에 모두 다른 기능을 하는 버튼이 5개 있는 경우입니다,
- 첫 번째 버튼에 대한 액션 코딩
- 그런 다음 테스트하여 작동하는지 확인합니다.
- 두 번째 버튼으로 이동
- 반복합니다.
코드에 오류가 있는 경우 돌아가서 5군데에서 수정하는 것보다 한 곳에서 코드를 수정하는 것이 더 낫습니다.
버전 관리
"작은 청크" 규칙을 따르고 앱의 한 부분이 빌드되어 작동 중이라고 가정해 보겠습니다.
새 코드를 추가하면 갑자기 모든 것이 작동을 멈춥니다.
오, 안 돼!
새 코드를 삭제하려고 했지만 앱이 여전히 작동하지 않습니다. 무엇이 잘못되었는지 잘 모르겠고 '실행 취소' 버튼이 있으면 좋겠습니다.
이와 같은 시나리오를 피하려면 다음과 같이 저장할 수 있습니다. 버전 을 저장하면 됩니다.
이렇게 하면 실수를 했는데 수정 방법을 모르는 경우 마지막으로 저장한 작업 버전으로 돌아갈 수 있습니다.
버전 관리를 사용하여 작업 중인 앱이 손상될 염려 없이 새로운 기능을 실험해 볼 수도 있습니다.
앱 인벤터에서 다른 버전을 저장하는 방법에는 '다른 이름으로 저장'과 '체크포인트'를 사용하는 두 가지 방법이 있습니다.
"체크포인트" 옵션을 사용하면 어떤 이름을 지정하든 복사본을 저장하지만 원본에서 계속 작업할 수 있습니다. 이 아이디어는 작동하는 버전을 "체크포인트"하고 프로젝트의 메인 버전에서 개발을 계속하는 것입니다.
프로젝트의 "다른 이름으로 프로젝트 저장" 옵션을 선택하면 작업 중인 코드의 복사본이 만들어지고 새 이름으로 저장됩니다. 모든 편집 내용은 새 복사본에 적용됩니다.
블록 축소
블록을 접는 것은 코드 작업 영역이 블록으로 복잡해지기 시작할 때 코드를 정리할 수 있는 방법입니다.
블록을 마우스 오른쪽 버튼으로 클릭하면 블록을 접을 수 있는 옵션이 표시됩니다.
블록을 다시 확장하려면 블록을 마우스 오른쪽 버튼으로 클릭하고 블록 확장을 선택합니다.
블록을 접으면 화면에서 하나의 막대로 압축됩니다.
일반 블록과 동일하게 작동하지만 공간을 덜 차지할 뿐입니다. 더 이상 편집할 필요가 없는 블록이 있어 화면을 정리하려는 경우 유용하게 사용할 수 있습니다.
블록 비활성화
블록을 비활성화할 수도 있습니다.
화면에는 남아 있지만 앱에서는 실행되지 않습니다.
블록을 비활성화하면 특정 코드 블록 없이 앱을 테스트할 수 있습니다. 나중에 활성화하면 실행됩니다.
알리미와 같이 테스트용으로만 사용하던 블록을 비활성화할 수도 있습니다.
앱 인벤터에서 블록을 비활성화하는 방법은 두 가지가 있습니다.
이벤트 핸들러 블록에서 블록을 드래그하기만 하면 해당 블록이 비활성화되어 실행되지 않습니다. 블록은 이벤트의 일부가 아니므로 실행될 방법이 없습니다. 언제든지 다시 스냅하여 사용할 수 있습니다.
블록 또는 블록 그룹을 마우스 오른쪽 버튼으로 클릭하고 '블록 사용 안 함'을 선택할 수도 있습니다. 블록이 회색으로 표시되어 실행되지 않음을 나타냅니다. 이렇게 하면 전체 블록 집합을 비활성화할 수 있습니다.
블록을 다시 활성화하려면 마우스 오른쪽 버튼을 클릭하고 '블록 활성화'를 선택하기만 하면됩니다.
댓글
프로그래머는 종종 코드에 주석을 남겨서 코드의 기능을 설명합니다.
댓글은 팀원, 멘토, 심사위원 등 다른 사람이 코드를 볼 때 도움이 될 수 있습니다.
나중에 코드로 돌아와서 코드의 어떤 부분을 잊어버린 경우에도 주석이 도움이 될 수 있습니다.
댓글을 추가하려면 블록을 마우스 오른쪽 버튼으로 클릭하고 '댓글 추가'를 선택합니다.
그 후 블록 모서리에 물음표가 나타나고 텍스트를 추가할 수 있습니다. 물음표를 클릭하면 댓글을 볼 수 있습니다.
멘토 팁
모범 모범 사례: 댓글은 프로그래밍에서 가장 유용한 기능입니다.
코더가 무언가를 코딩한 후 잠을 자고 다음 날 아침에 돌아와서 전날 밤에 무엇을 했는지 전혀 기억이 나지 않는 경우가 많습니다. 항상 코멘트를 작성하세요!
It’s also a great way to check your knowledge, because if your coding blocks are easy to comment on then you must understand them really well! Another thing to be aware of is that <, >, =, ≤, ≥ are hard for students for the first time (and for programmers who are years into their careers). When we set a math statement to < when it should be ≤ this is called an “off by one” error and this is a problem that happens to developers with 20 years of experience 😛 It is a very popular problem so be on the lookout for that.
가장 좋은 디버깅 유형은 러버덕 디버깅입니다! 코드가 정말 막혀서 이해가 되지 않는 경우입니다. 다른 사람이 문제를 발견할 수 있는지 알아보기 위해 시간을 내어 다른 사람과 이야기를 나누고 싶지만 안타깝게도 주변에 아무도 없습니다! 그래서 믿을 수 있는 고무 오리를 책상에 두고 오리 친구에게 큰 소리로 문제를 설명합니다. 하지만 오리 친구가 이해할 수 있도록 아주 간단한 용어로 설명해야 하며, 그 후에는 스스로 문제를 발견할 수 있습니다! 제 동료들도 모두 책상에 고무 오리를 두고 이 방법을 자주 사용합니다!
학생들에게 물어볼 수 있는 가이드 질문 숙련된 코더가 버그를 디버깅하는 데 얼마나 걸리는 것 같나요? 정말 빨리 끝낼 수 있다고 생각할 수도 있지만, 각 대형 사이트에는 버그가 얼마나 오래 존재하는지 확인하는 전용 페이지가 있으며(Facebook예시), 페이지가 다운되거나 깨져서 현재 디버깅 중인지도 표시해 줍니다(Facebook 예시).
버그를 어떻게 찾나요? (많은 양의 테스트!) 얼마나 많은 테스트를 해야 한다고 생각하시나요? 다른 사람들에게 얼마나 많은 테스트를 하도록 해야 하나요?
버그를 발견했는지 어떻게 알 수 있나요? 이미지를 계속 클릭하다가 클릭해야 할 버튼이 이미지 아래에 있다는 사실을 깨닫는 경우가 있습니다. 버그인가요? 앱 제작자가 의도한 디자인 선택이며 버그가 아니라고 생각하지만 여러분은 그럴 수도 있습니다.
멘토 팁은 AmeriCorps의 지원을 받아 제공됩니다.
디버깅 팁
알림 및 라벨
알림 Notifier 컴포넌트는 코드가 깨진 이유를 파악하는 데 도움이 될 수 있습니다.
앱 인벤터 앱에 알리미를 배치하려면 사용자 인터페이스 팔레트에서 알리미를 끌어다 놓습니다.
알림을 사용하는 가장 쉬운 방법은 특정 블록이 실행되었는지 여부를 확인할 수 있는 정보가 포함된 쇼알람 블록을 추가하는 것입니다.
메시지 외에도 변수 값이나 이미지스프라이트의 위치와 같은 정보를 표시할 수 있습니다.
다음을 추가할 수도 있습니다. 레이블 을 추가하여 앱에 현재 정보를 표시할 수도 있습니다.
예를 들어 앱이 실행되는 동안 특정 이벤트가 발생했을 때 변수 값을 알고 싶을 수 있습니다.
Label.Text를 원하는 내용으로 설정하면 앱에 표시됩니다.
오류를 디버깅한 후에는 레이블을 보이지 않게 설정하거나 앱에서 완전히 삭제할 수 있습니다.
DO IT
The Do it 기능은 디버깅을 위한 또 다른 훌륭한 도구입니다.
휴대폰과 AI 컴패니언 앱 또는 에뮬레이터를 사용하여 앱을 실시간으로 테스트하는 동안 새 명령인 '실행'에 액세스할 수 있습니다.
연결 메뉴를 통해 휴대폰 또는 에뮬레이터에 연결할 때까지 명령은 회색으로 표시됩니다.
Do it을 사용하면 앱 자체와 상호 작용할 필요 없이 블록을 실행할 수 있으므로 변수나 요소의 현재 값을 확인할 수 있습니다.
"전역으로 가져오기" 변수 블록을 드래그하고 마우스 오른쪽 버튼을 클릭하기만 하면 됩니다. 드롭다운 메뉴에서 "실행"을 선택하면 해당 코드 블록이 실행됩니다.
결과가 있는 상자 위에 노란색 Do It 상자가 나타납니다. 이 기능은 모든 컴포넌트 프로퍼티에도 사용할 수 있습니다!
앱에서 무언가를 변경할 때도 할 작업을 사용할 수 있습니다. 예를 들어 목록의 항목을 변경하고 싶을 수 있습니다. 그렇게 하려면 블록을 드래그하고 실행을 선택합니다. 결과는 표시되지 않지만 앱 내에서 목록이 업데이트됩니다.
앱에서 기존 코드 블록을 실행할 수도 있습니다.
예를 들어, 여기에서는 Do It을 사용하여 ListView 요소가 업데이트됩니다. 이는 앱에 반영됩니다. ListView에 Do It 명령으로 설정된 새 요소가 표시됩니다.
테스트 데이터 사용
앱에서 사용할 정보가 많은 경우 테스트 데이터를 사용하는 것이 도움이 될 수 있습니다. 테스트 데이터는 앱이 올바르게 작동하는지 확인하는 데 사용할 수 있는 더 간단하고 작은 데이터 집합입니다.
주변 레스토랑을 표시하는 앱을 만들고 있다고 가정해 보겠습니다. Google 스프레드시트를 사용하여 레스토랑 정보를 저장하고 있습니다.
한두 개의 테스트 레스토랑으로 시작하여 앱이 제대로 작동하는지 테스트할 수 있습니다.
테스트가 완료되고 작동하면 전체 레스토랑 데이터 세트를 Google 시트에 추가할 수 있습니다.
속성 변경
앱을 실시간으로 테스트하는 경우 앱을 실행하는 동안 디자이너에서 속성 값을 변경하고 그 효과를 확인할 수 있습니다.
때로는 이 방법이 문제를 발견하는 데 도움이 될 수 있습니다.
예를 들어 게임을 코딩하고 있다고 가정해 보겠습니다. 스프라이트가 실행 중일 때 휴대폰에서 스프라이트의 위치가 제대로 보이지 않는다고 가정해 보겠습니다.
라이브 테스트 중에는 다음을 수행할 수 있습니다.
- 디자이너로 이동
- 스프라이트의 X 및 Y 값을 변경합니다.
- 실행 중인 앱의 화면에서 스프라이트의 위치가 변경됩니다.
이를 사용하여 화면의 좌표를 테스트하고 이해합니다.
활동 1: 버그 수정
타이머 앱의 버그 수정
- 앱 인벤터에 앱을 로드합니다.
- 에뮬레이터 또는 디바이스에 연결하여 앱을 테스트합니다.
- Try pressing Start without typing anything into the textbox. What happens?
- 초 수에 0 또는 음수를 입력해 보세요. 어떻게 되나요?
- 조건부 블록을 사용하여 버그를 수정하세요!
활동 2: 댓글 추가하기
앱 인벤터 프로젝트에 댓글 추가하기
앱에 블록 그룹이 하는 일을 설명하는 코멘트를 하나 이상 추가합니다. 팀원 같은 다른 사람이 이해하기 가장 어렵다고 생각되는 블록 그룹을 선택하세요. 가장 이해하기 어렵다고 생각되는 블록 그룹을 선택하세요.
돌아보기
이 팁은 테크노베이션 프로젝트를 위한 모바일 앱 코딩을 시작할 때 도움이 될 수 있습니다.
하지만 기억하세요...
주요 용어 검토
- 디버깅 - 코더가 코드가 작동하지 않는 이유를 파악하고 수정하는 데 사용하는 프로세스입니다.
- 버전 관리 - 진행 상황에 따라 앱의 작동 버전을 저장합니다.
- 테스트 데이터 - 앱이 올바르게 작동하는지 확인하는 데 사용할 수 있는 간단한 데이터 집합입니다.
- 댓글 - 코드의 기능을 설명하기 위해 코드에 포함된 텍스트입니다.
추가 리소스
다음은 몇 가지 App Inventor 디버깅 리소스입니다.
