Thunkable에서 코드 디버깅 및 오류 수정을 위한 팁 알아보기
이 단원의 활동은 다음과 같습니다:
디버깅이란 무엇인가요?
디버깅 는 코더가 코드가 작동하지 않는 이유를 파악한 다음 코드가 작동하도록 수정하기 위해 사용하는 프로세스입니다.
디버깅이라는 용어는 컴퓨팅의 선구자인 그레이스 호퍼 제독에게서 유래했습니다. 그녀는 1940년대에 하버드 대학교에서 마크 II 컴퓨터를 연구하던 중 나방이 컴퓨터에 끼어 작동을 멈췄습니다.
나방을 제거하면서 그녀는 시스템을 '디버깅'하고 있다고 말했습니다. 프로그래머들은 이제 이 용어를 "내 코드의 오류 수정"이라는 의미로 사용합니다.

코딩 팁

디버깅은 코딩에서 가장 답답하고 시간이 많이 걸리는 부분이기 때문에 충분한 시간을 할애하는 것이 정말 중요합니다!
그리고 인내심도 필요합니다!
작은 청크
가끔 프로그래머는 전체 앱을 한 번에 코딩한 후 테스트하고 싶은 유혹을 받습니다.
그 유혹에 빠지지 마세요!!!
무언가가 제대로 작동하지 않는 경우, 오류를 수정하기 위해 어디서부터 시작해야 할지 파악하기 어렵습니다.

앱의 코딩을 작은 덩어리로 나누세요.
다음 작업을 시작하기 전에 한 가지를 먼저 해결하세요.
조금 코딩하고, 조금 테스트하고, 작동하는지 확인한 다음, 조금 더 코딩하고, 조금 더 테스트하는 식으로 진행합니다.
예를 들어 앱에 모두 다른 기능을 하는 버튼이 5개 있는 경우입니다,
- 첫 번째 버튼에 대한 액션 코딩
- 그런 다음 테스트하여 작동하는지 확인합니다.
- 두 번째 버튼으로 이동
- 반복합니다.
코드에 오류가 있는 경우 돌아가서 5군데에서 수정하는 것보다 한 곳에서 코드를 수정하는 것이 더 낫습니다.

버전 관리

"작은 청크" 규칙을 따르고 앱의 한 부분이 빌드되어 작동 중이라고 가정해 보겠습니다.
새 코드를 추가하면 갑자기 모든 것이 작동을 멈춥니다.
오, 안 돼!
새 코드를 삭제하려고 했지만 앱이 여전히 작동하지 않습니다. 무엇이 잘못되었는지 잘 모르겠고 '실행 취소' 버튼이 있으면 좋겠습니다.
이와 같은 시나리오를 피하려면 다음과 같이 저장할 수 있습니다. 버전 을 저장하면 됩니다.
이렇게 하면 실수를 했는데 수정 방법을 모르는 경우 마지막으로 저장한 작업 버전으로 돌아갈 수 있습니다.
버전 관리를 사용하여 작업 중인 앱이 손상될 염려 없이 새로운 기능을 실험해 볼 수도 있습니다.
Thunkable 무료 버전은 프로젝트 한도가 10개이므로 프로젝트 한도에 도달하면 새 프로젝트를 저장하기 전에 가장 오래된 버전을 삭제하면 됩니다.
프로젝트의 사본을 만들려면
- 화면 오른쪽 상단에 있는 3개의 점을 클릭합니다.
- 드롭다운에서 '프로젝트 복제'를 선택합니다.
- 저장된 사본의 이름을 변경하여 추적할 수 있습니다. v1, v2로 번호 매기기가 잘 작동합니다.

블록 축소
블록을 접는 것은 코드 작업 영역이 블록으로 복잡해지기 시작할 때 코드를 정리할 수 있는 방법입니다.
블록을 마우스 오른쪽 버튼으로 클릭하면 블록을 접을 수 있는 옵션이 표시됩니다.
블록을 다시 확장하려면 블록을 마우스 오른쪽 버튼으로 클릭하고 블록 확장을 선택합니다.


블록을 접으면 화면에서 하나의 막대로 압축됩니다.
일반 블록과 동일하게 작동하지만 공간을 덜 차지할 뿐입니다. 더 이상 편집할 필요가 없는 블록이 있어 화면을 정리하려는 경우 유용하게 사용할 수 있습니다.

블록 비활성화
블록을 비활성화할 수도 있습니다.
화면에는 남아 있지만 앱에서는 실행되지 않습니다.
블록을 비활성화하면 특정 코드 블록 없이 앱을 테스트할 수 있습니다. 나중에 활성화하면 실행됩니다.
알림과 같이 테스트용으로만 사용하던 블록을 비활성화할 수도 있습니다.

이벤트 핸들러 블록에서 블록을 드래그하기만 하면 해당 블록이 비활성화되어 실행되지 않습니다. 블록은 이벤트의 일부가 아니므로 실행될 수 없습니다. 회색으로 표시됩니다. 언제든지 다시 끌어다 놓으면 다시 활성화할 수 있습니다.
댓글
프로그래머는 종종 코드에 주석을 남겨서 코드의 기능을 설명합니다.
댓글은 팀원, 멘토, 심사위원 등 다른 사람이 코드를 볼 때 도움이 될 수 있습니다.
나중에 코드로 돌아와서 코드의 어떤 부분을 잊어버린 경우에도 주석이 도움이 될 수 있습니다.
댓글을 추가하려면 블록을 마우스 오른쪽 버튼으로 클릭하고 '댓글 추가'를 선택합니다.
그 후 블록 모서리에 물음표가 나타나고 텍스트를 추가할 수 있습니다. 물음표를 클릭하면 댓글을 볼 수 있습니다.


멘토 팁
모범 모범 사례: 댓글은 프로그래밍에서 가장 유용한 기능입니다.
코더가 무언가를 코딩한 후 잠을 자고 다음 날 아침에 돌아와서 전날 밤에 무엇을 했는지 전혀 기억이 나지 않는 경우가 많습니다. 항상 코멘트를 작성하세요!
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의 지원을 받아 제공됩니다.

디버깅 팁
알림 및 레이블
테스트할 때 알림 및 레이블과 같은 구성 요소를 사용하여 정보를 표시할 수 있습니다. 앱을 완전히 테스트한 후에는 제거하면 됩니다.

추가합니다. 알림 팔레트에서 알림 옆의 + 기호를 클릭하여 블록 창에 알림을 추가합니다.

추적하려는 정보로 알림 메시지를 설정합니다.
그런 다음 코드에서 Alert.Show를 사용하여 이벤트 발생 시기를 표시합니다.
메시지 외에도 변수 값이나 스프라이트의 위치와 같은 정보를 표시할 수 있습니다.
다음을 추가할 수도 있습니다. 레이블 을 추가하여 앱에 현재 정보를 표시할 수도 있습니다.
예를 들어 앱이 실행되는 동안 특정 이벤트가 발생했을 때 변수 값을 알고 싶을 수 있습니다.
Label.Text를 원하는 내용으로 설정하면 앱에 표시됩니다.

오류를 디버깅한 후에는 레이블을 보이지 않게 설정하거나 앱에서 완전히 삭제할 수 있습니다.
테스트 데이터 사용
앱에서 사용할 정보가 많은 경우 테스트 데이터를 사용하는 것이 도움이 될 수 있습니다. 테스트 데이터는 앱이 올바르게 작동하는지 확인하는 데 사용할 수 있는 더 간단하고 작은 데이터 집합입니다.
주변 레스토랑을 표시하는 앱을 만들고 있다고 가정해 보겠습니다. Google 스프레드시트를 사용하여 레스토랑 정보를 저장하고 있습니다.

한두 개의 테스트 레스토랑으로 시작하여 앱이 제대로 작동하는지 테스트할 수 있습니다.
테스트가 완료되고 작동하면 전체 레스토랑 데이터 세트를 Google 시트에 추가할 수 있습니다.
속성 변경
앱을 실시간으로 테스트하는 경우 앱을 실행하는 동안 디자이너에서 속성 값을 변경하고 그 효과를 확인할 수 있습니다.
때로는 이 방법이 문제를 발견하는 데 도움이 될 수 있습니다.
예를 들어 게임을 코딩하고 있다고 가정해 보겠습니다. 스프라이트가 실행 중일 때 휴대폰에서 스프라이트의 위치가 제대로 보이지 않는다고 가정해 보겠습니다.
라이브 테스트 중에는 다음을 수행할 수 있습니다.
- 디자이너로 이동
- 스프라이트의 X 및 Y 값을 변경합니다.
- 실행 중인 앱의 화면에서 스프라이트의 위치가 변경됩니다.
이를 사용하여 화면의 좌표를 테스트하고 이해합니다.

활동 1: 버그 수정
타이머 앱의 버그 수정
- 프로젝트를 복사합니다.
- 앱을 미리 보고 실행합니다.
- Try pressing Start without typing anything into the textbox. What happens?
- 초 수에 0 또는 음수를 입력해 보세요. 어떻게 되나요?
- 조건부 블록을 사용하여 버그를 수정하세요!
Click here to see a possible solution
This is one possible solution to the bug.

활동 2: 댓글 추가하기
Thunkable 프로젝트에 댓글 추가
앱에 블록 그룹이 하는 일을 설명하는 코멘트를 하나 이상 추가합니다. 팀원 같은 다른 사람이 이해하기 가장 어렵다고 생각되는 블록 그룹을 선택하세요. 가장 이해하기 어렵다고 생각되는 블록 그룹을 선택하세요.
돌아보기
이 팁은 테크노베이션 프로젝트를 위한 모바일 앱 코딩을 시작할 때 도움이 될 수 있습니다.
하지만 기억하세요...

주요 용어 검토
- 디버깅 - 코더가 코드가 작동하지 않는 이유를 파악하고 수정하는 데 사용하는 프로세스입니다.
- 버전 관리 - 진행 상황에 따라 앱의 작동 버전을 저장합니다.
- 테스트 데이터 - 앱이 올바르게 작동하는지 확인하는 데 사용할 수 있는 간단한 데이터 집합입니다.
- 댓글 - 코드의 기능을 설명하기 위해 코드에 포함된 텍스트입니다.
추가 리소스
다음은 더 많은 Thunkable 디버깅 리소스입니다.