순서대로 생각하기
코드를 짜면서 가장 중요한 점은 이 동작을 실행시키기 위해서 어떤 순서가 이루어지는지 파악하는 것
순서를 토대로 순서도를 그리고 차례대로 코딩을 시작한다.
👿 예전 코딩의 문제점
프론트엔드 개발자가 되기위해 컴퓨터 학원에서 6개월동안 학습을 했는데 정작 내 머리에서 생각해서 코드를 처음부터 짠 경험은 없다.
이런점이 바로 언어는 다 알지만 정작 프로그래밍은 할 줄 모르는 사람이 많은 이유인걸 알게되었다.
최근 제로초님 강의를 보면서 프로그래밍을 하기 위한 사고방식을 배우고 있는데 처음부터 이렇게 배웠더라면 하는 아쉬움이 남았다.
이제부터라도 작은 코드를 짤때도 순서도를 그려보고 코드를 차근차근 짜는 연습을 해야겠다.
💛 끝말잇기 게임 만들기
끝말잇기 게임을 만들기에 앞서 사람의 머리로는 당연하게 여겨졌던 끝말잇기 게임을 컴퓨터의 입장에서 생각해보자.
순서표 그리기
순서대로 생각한 후 간단한 순서표를 그린다.
순서도를 그리고 코드를 작성하면서 상호보완적인 관계로 수정해나간다.
디테일한 과정이 필요한 순서표는 보충한다.
코드 작성
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>끝말잇기</title>
<style>
</style>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어:<span id="word"></span></div>
<input type="text">
<button>입력</button>
<script>
const number = parseInt(prompt('몇 명이 참가하나요?'), 10); //10진법 사용자로부터 값을 받음
//alert(number); 경고창
// const yesOrNo = confirm ('맞나요?'); 확인창
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $order = document.querySelector('#order');
let word;
let newWord; //새로 입력한 단어
const onClickButton = () => {
if (!word || word[word.length - 1] === newWord[0]) {
//비어있다.
word = newWord; //입력한 단어가 제시어가 된다.
$word.textContent = word;
const order = Number($order.textContent); //현재순서
if (order + 1 > number) {
$order.textContent = 1;
} else {
$order.textContent = order + 1;
}
} else { //올바르지 않은가
alert('올바르지 않은 단어입니다!');
}
$input.value = '';
$input.focus();
};
const onInput = (event) => {
newWord = event.target.value;
};
$button.addEventListener('click', onClickButton);
$input.addEventListener('input', onInput);
</script>
</body>
</html>완성된 코드를 예제로 테스트하며 보완
중복되는 코드는 간단하게 생략할 수 있는 방법을 찾아서 최대한 겹치지 않게 짠다.
connecting the dots 💫