kth990303의 코딩 블로그

es2021 강좌의 틱택토 구현 요구사항대로 만들어보고 있는데, 이번 포스팅에서 얘기할 내용은 강의와 다르게 알고리즘 및 코드를 짜다보니 강의코드와 완전 다른 코드가 되어버렸다... 그래도 시간복잡도 및 코드길이가 충분히 좋기 때문에 걱정할 필요는 없어보인다. (다만, 알고리즘은 강의코드보다 아주약간 더 어려울수도?) 지난 포스팅은 아래와 같다. https://kth990303.tistory.com/188 [VanillaJS] 바닐라js로 틱택토를 만들어보자 바닐라js로 틱택토를 만들면서 기본기를 다져보자. 틱택토는 오목과 룰이 동일하나, 가로, 세로, 대각선 중 한 방향으로 5개를 자기 것으로 칠해야하는 오목과 달리, 3개만 자기 것으로 칠해도 되 kth990303.tistory.com 컴퓨터의 턴을 ..

바닐라js로 틱택토를 만들면서 기본기를 다져보자. 틱택토는 오목과 룰이 동일하나, 가로, 세로, 대각선 중 한 방향으로 5개를 자기 것으로 칠해야하는 오목과 달리, 3개만 자기 것으로 칠해도 되는 룰을 가진다. 여기서 사용되는 문법은 다음과 같다. (모르더라도 이번 포스팅을 보면서 알면 될 듯하다.) querySelector, createElement html 태그를 선택해주는 querySelector, 또는 html 태그를 추가해주는 createElement. html 파일을 생성해서 ... 와 같은 html 파일을 만들어도 되나, 여기서는 js로 대체하도록 한다. 만약 html 파일을 생성해서 진행한다면 querySelector로 태그를 선택하면 된다. 콜백함수와 고차함수 개념 고차함수가 말이 거창해..

웹개발을 한다면 개발자에게 있어서 비동기 함수는 필수적인 소양이다. 이번 포스팅에서는 내가 바닐라js를 다루면서 setTimeOut 비동기 함수를 사용하면서 겪었던 버그와 그 버그를 해결한 과정을 적어보겠다. 간단한 반응체크 측정게임을 만들어보면서 겪은 에러 위주로 포스팅할 것이다. 유튜브 조현영님의 동영상강좌 기능 + 셀프체크 기능에다가 내가 스스로 또다른 setTimeOut 함수를 추가하여 만들어보았다. 아래 깃헙주소에서 전체코드를 볼 수 있다. https://github.com/kth990303/TH-s-Web/blob/master/es2021/response-check.html GitHub - kth990303/TH-s-Web: 웹프로그래밍 공부 웹프로그래밍 공부. Contribute to kth..

요즘 리액트를 만지다가 기본 바닐라js의 중요성을 다시 한 번 깨닫게 됐다. 마침 리액트 프로젝트를 같이 하고 있는 친구가 중간고사 기간이라 프로젝트를 잠시 중단하겠다고 선언했기 때문에, 나도 그 기간동안 리액트의 기본이 되는 바닐라js를 다시 한 번 공부하는 시간을 가지는 중이다. 그렇게 해서 만들어본게 간단한 로또추첨기이다. 추첨 결과에 해당되는 6개의 볼이 1초씩 간격을 두고 차례대로 뜨며, 마지막으로 보너스에 해당되는 볼이 텀을 두고 뜨게 하는 프로그램이다. 어렵지 않아 초심자들이 바닐라js 감을 익히기에 좋을 듯하여 코드작성과정을 포스팅하려 한다. 개발환경은 vscode이다. 알고리즘 1. 1~45까지의 숫자 중 랜덤하게 7개의 숫자를 뽑는다. 이 때, 7개의 숫자는 중복돼선 안된다. 2. 7개..