이미 예고했듯이 오늘부터는 무작정 따라만들기가 아닌, 논리를 구현하는 방법 위주로 설명이 진행됩니다.
어렵고 생소할 수 있지만! 꼭 넘어야 할 산입니다!
이해가 안되시거나 어려우시면 꼭! 첨부된 소스파일을 참고해 주세요!
구성요소도 이제 더이상 친절하게 표로 알려드리지 않습니다!
밑에 화면을 보시고! 알아서 만들어 보세요! 우훗~
(잘 모르시겠으면, 너무 고민하지 마시고 소스파일을 한번 확인해 보세요. 컨닝이 아닙니다.
실제로 프로그래밍할 때 다른 사람의 코드를 많이 참조 한답니다)
이제 Screen1을 만들어 봅시다. 과연 어떻게 만들 수 있을까???음…막막합니다.
어떻게 만들 수 있을까요??허…
우선, 어떻게 만들지부터 생각하지 마세요. 어떤 순서로 작동하는지 부터 생각해 보는 겁니다.
즉, 그릴 수 있는 큰 그림을 먼저 그리는 겁니다! 그리고 그 문제를 점점 작게 작게 쪼개보는 거죠.
음… 아직 감이 안오세요?? 저희가 한번 보여드릴게요.
앱을 시작하면 3초가 걸립니다. 그리고 앱을 처음 시작했으면 아이디 입력 창이 뜨고, 이미 아이디를 저장해 두었다면 다음 페이지로 넘어갑니다.
위의 순서도를 하나씩 해부해 봅시다. 순서도를 확인하면서 아래 내용을 잘 살펴봅시다.
#1. 3초를 세는 방법!
큰 그림을 그렸습니다. 이제 하나하나씩 큰 그림을 쪼개봅시다.
우선 3초를 세야겠죠?? 앞에서 했는데…. 네! Clock의 Timer를 써야겠죠??
아~ Clock component가 필요하겠다.
#2. 사용한 적 있는가?
매번 접속할 때마다 내 ID를 적는건 귀찮아요. 그럼...어쩌지?
처음에 ID를 입력받고 저장해 버리는 겁니다ㅋㅋ(마치 로그인 ID, 비밀번호 저장해두는 것과 같이요)
다음부터 접속할 때는 저장된 아이디의 존재 여부를 검사하여 매번 ID 입력을 피할 수 있습니다. 오! 문제를 해결할 갈피를 잡았습니다!
#3. ID 등록창 띄우기
같은 화면에서 ID 등록창을 띄운다…이는 무엇을 의미하죠?? 음… 등록창이 처음에는 숨어있었다는 거죠!
아하~ 그럼 아이디 등록창이 있는 Section1_B는 Properties가 원래 Hidden이였고, ID가 저장이 되어 있지 않으면 Showing으로 바꾸면 되는 거죠!
잘 이해가 되지 않는다면, 아래 사진을 한번 더 보면서 생각해 봅시다.
여기까지 알게된 사실을 좀 더 추가하여 순서도를 다시 그려봅시다.
자~ 그림을 그렸지만 아직 어떻게 해야할지 감이 안잡히는건 당연한 겁니다!
문제를 더 쪼개봅시다. 답이 나올 때까지!
#1. ID 저장 여부를 확인 및 저장!
ID 저장 여부를 확인하려면 우선 ID가 저장 되어있는 공간이 필요하겠죠!
"아! ID 저장 공간을 먼저 만들어야겠다!”
"그런데 저장을 하려면 변수를 만들어서 저장해도 되고, TinyDB를 사용해서 저장해도 되는데!
무엇을 선택할까??"
"이 저장된 ID는 앱을 꺼도 살아남아야 하니깐, 그리고 Screen2에서도 사용되야 하니깐! TInyDB를
사용해서 저장해야겠다!"
ID 저장 여부를 어떻게 확인할까요???
좀 더 쉽게 문제를 생각해 봅시다. 이 문제는 저장되어 있는 ID가 있냐 없냐의 문제입니다.
즉, 아이디 저장공간이 빈칸이 아니면 다음 Screen으로 넘어가면 되고, 아이디 저장공간이 빈칸이면 아이디 입력창을 띄우면 되는겁니다.
오호! 아이디 저장공간이 빈칸이니?라는 조건(질문)에 Yes, No로 대답할 수 있으니 IF 문을
사용하면 되겠습니다!
#2. 그런데 문제가 있다…(Advanced)
음… 이건 처음 생각하기 어려운 부분입니다. 그래도 한번 해보죠!
만약에 사용자가 이름을 입력할 때 빈칸을 입력하면 어떡하죠?
만약 빈칸을 입력한다면 ID가 빈칸이 되잖아요. 빈칸이 ID가 되는게 뭐가 문제냐구요?
제일 처음 ID 저장 여부를 ‘ID 저장 공간이 빈칸이냐’로 판단했잖아요!
즉! 사용자는 ID를 빈칸으로 입력하면 ID를 입력 안 한 것으로 판단하는거죠!
그럼 이 문제를 어떻게 풀까요? 음.. 방금 풀었던 문제랑 비슷한데!ㅋㅋ
사용자가 InputButton을 눌렀을 때 NameTextBox가 빈칸인지 확인하면 됩니다.
빈칸이라면 아무 작업을 하지 않고(아이디 입력창을 그냥 띄워둔다는 이야기), 빈칸이 아니라면 본래대로
저장을 하면 되는거죠!
자~ 이제 문제는 거의다 해결한 것 같습니다!
처음과 비교해 보세요! 어때요?ㅋㅋㅋ 뭔가 희열이 느껴지지 않나요! 내가 문제를 이렇게 분석하고
해결방법을 내놓다니!
하지만 아직은 이릅니다. 실제로 만들어보지 않았잖아요.
하지만 이미 어떻게 만들지는 다 생각해놨어요. 단지 구현의 문제일 뿐! 이는 직접 고민하고 만들어보며,
어떻게 사용하는지 찾아보고 물어보면서 해결할 수 있습니다.(쉽단말은 아닙니다~)
저희가 만든 블록을 보여드리겠습니다. 다만 이게 정답은 아닙니다. 여러분은 다르게 문제를 푸셨을 수도
있어요. 의도한대로 동작 한다면 그것 또한 정답입니다!
근데...저희가 만든거 바로 보는 것보단 스스로 한번 더 해보는게 어떨까요?
절대 바로바로 되지는 않아요. 시도하고 실패하고 또 시도해보면서 점점 완성되는거죠.
Try and Error!!!
드림코드 팀도 여러 앱을 만드는데 수많은 Try and Error를 거친답니다. 진짜로. 생각보다 많이!ㅋㅋ
꼭 구현된 블록과 알고리즘을 비교해 보세요!
그럼 다음 페이지에서 Screen2 논리를 세우고 구현해 봅시다.