순서도 그리기
제품을 만들기 위해서는 프로그래밍적인 사고력이 필수이다. 지금이야 입문하는 단계로 함수가 어떻게 적용되는지 파악하기에도 어렵겠지만 이 함수가 왜 이렇게 쓰이는지 사고력을 키우자.
프로그래밍에서는 절차가 매우 중요한데, 아래 대전제를 기억하자.
- 프로그램 절차의 개수는 정해져 있어야 한다.
- 각 절차는 항상 같은 내용이어야 한다.
- 모든 가능성을 고려해야 한다.
- 예시는 절차를 검증하는 데 사용한다.
어떤 프로젝트를 구상하는데 있어 순서도를 그리는게 중요하다.
파워포인트도 좋지만 얼마전에 생활코딩님 유튜브 커뮤니티에 올라온 사이트가 있어 나는 해당 사이트에서 그려보았다. vscode에도 설치가 된다는데 왜 안될까,,,
+++ 설치가 아니라 확장자 명을 .excalidraw로 넣으면 된다 ㅇㅇ!
위 끝말잇기 순서도를 예시를 들면 일반적인 절차는 타원형으로, 판단으로 요구하는 절차는 마름모로 표시한다. 판단 결과가 '예'이면 절차를 거슬러 올라가는데 이는 '반복'을 의미한다.
순서도가 어디가 시작이고 끝인지도 두 겹의 원 기호로 표시한다. 참고로 두 겹의 사각형은 특수한 상황(대기, 이벤트 발생)을 의미한다.
끝말잇기 게임 만들기
먼저 html 간단히 만든다. 이때 script 태그는 다른 태그들보다 아래 있어야 한다. html은 위에서부터 아래로 실행되므로 환면을 그리는 태그들이 먼저 실행돼서 화면이 그려져야 script 태그에서 자바스크립트로 화면을 조작할 수 있다.
프로그래밍할 때는 항상 순서도를 옆에 띄어 놓고 보면서 하자.
1. 몇명이 참가할지 선택한다.
크게 두가지로 표현할 수 있다. 입력창(input 태그) 또는 prompt 함수이다. prompt함수를 이용해보자.
전달한 값을 저장하기 위해 변수를 사용한다.
const number = prompt('몇 명이 참가하나요?');값이 변수에 제대로 저장했는지 확인하기 위해 console.log를 쓰고 prompt함수에 입력되는 값들은 전부 문자열이기 때문에 아래처럼 숫자로 변환해준다. realNumber 변수를 사용하지 않고 바로 숫자로 변환해주겠다.
const realNumber = Number(number);
console.log(typeof realNumber);
const number = Number(prompt('몇 명이 참가하나요?'));2. 첫 번째 사람이 어떤 단어를 말한다.
주로 프로그램이 대기하는 경우에 순서도를 끊는데, 이렇게 대기하는 경우는 보통 이벤트 발생을 기다리거나 타이머의 콜백함수가 실행되길 기다리는 상황이다. 그리고 이벤트 리스너나 타이머는 대표적인 자바스크립트 비동기 코드이다. 즉 비동기 코드가 실행될 때를 기점으로 순서도를 끊는다고 생각하자
자바스크립트에서 HTML 태그를 가져오는 것을 선택한다고 표현한다. 아래 함수를 사용하게 된다.
document.querySelector('선택자')여러 개의 태그를 선택하고 싶다면 document.querySelectorAll('선택자')를 사용한다.
여러 개의 태그 중에서 특정한 태그만 사용하고 싶다면 태그에 id속성을 달아둔다. 해당 id를 가진 태그는 유일하므로 태그에 id를 달아두면 선택자로 선택하기 쉬워진다.
document.querySelector('#아이디');두 번째와 세 번째 태그를 동시에 선택하고 싶다면 id는 하나의 태그에만 쓸 수 있으므로 class를 사용한다.
document.querySelectorAll('.클래스');eg
<script>
const $input = document.querySelector('input');
console.log($input);
</script>$ input 변수는 선택한 input 태그를 저장하기 위해서이다. 여러 태그를 선택하는거면 $$ 하자. (제로초님의 방법인데 유용한듯하다)
사용자가 태그와 상호 작용을 할 때 이벤트라는 것이 발생한다. 자바스크립트는 이벤트를 자동으로 감지할 수 없어 이벤트리스너 라는 것을 직접 추가해야 한다.
태그.addEventListener('이벤트이름', 리스너함수);
event.target.value로 input 태그에 입력한 값을 알아낼 수 있다. 참고로 event는 매개변수이므로 다른 이므름으로 지어도 된다. 보통 e로 하는듯?
3. 첫 단어를 입력한 사람인지 판단하기
사용자가 이벤트를 발생시키지 않으면 다음 절차로 넘어가지 않을수 있기에 순서도를 수정해준다.
근데 여기서 첫 단어를 입력한 참가자인지를 판단해야하기 때문에 순서도를 아래 처럼 다시 수정한다.
입력 버튼을 클릭한 사람이 첫 단어를 입력한 참가자인지 코드로 판단할려면, 무언가를 기억하고 있어야 하기에 저장할 만한 변수가 필요하다. 즉 단어를 기억하는 변수를 만든다.
코드에서 제시어를 #word id로 설정하였다. 제시어가 들어갈 자리인데제시어가 없으므로 빈 값으로 있다. 따라서 판단을 첫 번째 참가자인가?에서 '제시어가 비어있는가'로 변경하자.
제시어는 변할수 있기 때문에 let을 사용했다.
이제 '입력된 단어가 제시어가 된다'를 코딩하려면 참가자가 입력한 단어를 저장해야한다. 따라서 변수가 또 필요하다. 이 변수는 newWord로 선언하겠다.
태그.textContent // 태그 내부의 문자열을 가져옴
태그.textContent = 값 // 태그 내부의 문자열을 해당 값으로 설정함word = newWord; 로 제시했으면 화면에 표시될수 있게 textContent를 이용한다.
$input.value = ''; 은 제시어를 입력했을 때 사용자가 지우지 않고 바로 다음 입력할 수 있게 빈 값으로 만들어준다.
4. 올바른 단어인지 판단하기
끝말잇기에서 단어가 올바른지 판단하려면 제시어의 끝 글자와 현재 단어의 첫 글자를 비교하면 된다.
문자열의 길이와 상관없이 항상 마지막 문자를 가져오는 방법은 글자 수에서 1을 빼면 마지막 자릿수가 나온다. 자릿수는 0부터 시작하니.
다음 사람에게 순서를 넘기기위해 순서도를 다시 수정한다. number 변수에 참가자가 몇 명인지 저장하였고, #order 태그 안에는 몇 번째 참가자인지 순서가 나와 있다.
#order 태그를 선택해 $order 변수에 저장했다. #order 태그 내부의 값을 꺼내 숫자로 변환하고 이름 order 변수에 저장했다.
quiz) 세 글자 이상의 단어를 저장하고 있는 word라는 변수가 있을 때 뒤에서 세 번째 글자를 가져오는 코드를 작성
word[ word.length - 3 ]5. 틀렸을 때 오류 표시하기
올바르지 않은 단어를 입력한 경우만 처리하고, 이전 사람이 input 태그에 입력한 단어가 그대로 남아 있어서 지워야하니 아래 코드를 추가한다. 추가로 focus를 이용하여 입력 태그 내부에 커서를 위치하게 해서 다음 사용자가 입력하기 편하게 도와주게 한다.
입력태그.value // 입력창의 값을 가져옴
입력태그.value = 값 // 입력창에 값을 넣음
입력태그.focus() // 입력창을 하이라이트
최종 코드 이다.
순서도 최적화 하기
마지막 순서도에서 '입력창을 비우고 커서를 둔다' 절차가 중복되고 코드에서는 '입력한 단어가 제시어가 된다' 와 '다음 사람에게 순서를 넘긴다' 절차에 해당되는 코드가 중복된다.
중복된 코드는 '제시어가 비어있거나 입력한 단어가 올바른가?'리는 절차로 줄일 수 있다.
코드를 수정을 하면,,
요약
- 순서도를 그린다.
순서도를 만들 때 사용자의 이벤트(버튼 클릭, 입력창 글자 입력 등)가 필요한 곳에서 순서도를 끊어야 함을 잊지말자. - 대화 상자 띄우기
- prompt - 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null 값이 전달
- alert - 단순한 알림창으로, 호출하면 확인을 누르기 전까지 다음 스크립트 실행이 중단된다. 디버깅 용도로 사용할 때는 console.log를 사용
- confirm - 사용자에게 확인을 받을 때 사용. 사용자가 확인을 누르면 true가 전달되고, 취소를 누르면 false가 전달
- HTML 태그 선택하기
document.querySelector('선택자')
document.querySelectorAll('선택자')
document.querySelector('#아이디')
document.querySelectorAll('.클래스')- 태그에 이벤트 달기
태그를 선택한 후에 addEventListener 메서드를 사용해 이벤트를 연결.
테그.addEventListener('이벤트 이름', 리스너함수);리스너 함수의 매개변수로 event 객체를 제공해서 이벤트와 관련된 정보를 얻을 수 있다. input 태그에 입력된 값을 가져오려면 event.target.value를 넣으면 된다. event.target은 이벤트가 발생한 대상 태그를 가르킨다.
const 리스너함수 = (event) => {
console.log(event.target.value);
};입력창에 입력된 값은 value 속성으로 가져온다. value에 값을 대입하면 대입한 값으로 변경된다.
입력태그(input, select, textarea 등)가 아닌 일반 태그들의 내부 값을 가져올 때는 textContent 속성을 사용한다.
- 순서도 최적화하기
책을보고 하나씩 따라하는데도 이해와 생각보다 순서도를 구상하게 정말인지 어렵다. 지속할수 있을까? 의심이 들지만 그냥 꾸준히 계속 해야할 뿐이다. 그래도 재밌다...
