kth990303의 코딩 블로그

자바스크립트로 작업을 하던 중 아래 에러가 발생했다. property면 객체 변수를 의미하는 것일텐데, 대체 뭘까 하고 찾아보았다. Uncaught SyntaxError: Invalid shorthand property initializer 문제 상황 및 해결 객체 변수 지정을 : 가 아닌 =로 하고있었다. name: ''이 아닌 name='' 사실 몇번째줄 에러인지 알려주기도 했고, property initializer(객체 변수 초기화(지정))이 올바르지 않다길래 대략 느낌은 왔지만, 순간적으로 =를 :로 비슷하게 보기도 했고, 너무 쉬운부분이다보니 대충 넘어간 것 같기도 하다. const hero={ name='', lev:1, maxHp:100, hp:100, xp:0, att:10, }; 위 코..

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개..

이번 포스팅에선 VanillaJS에서 굉장히 많이 쓰이는 addEventListener, 그리고 이벤트리스너 함수에서 빠뜨릴 수 없는 콜백함수에 대해 알아본다. 콜백함수는 바닐라js 뿐만 아니라 js를 사용하는 모든 프레임워크(react, vue, angular, ...)에서 굉장히 중요한 개념이므로 꼭 제대로 알아두어야 한다! addEventListener, 콜백함수 특정 이벤트가 발생했을 경우를 선택해주는 함수이다. 이렇게 용어를 보기만 해선, 전혀 무슨 소리인지 모를 것이기 때문에 바로 예시로 들어간다. input 요소에 글자를 입력할 때마다 현재 입력된 글자가 무엇인지 알려주는 프로그램을 만들어보자. 아래 코드를 보자. document.querySelector('input').addEventLis..

사실 프론트 프레임워크를 다룬다면 querySelector는 거의 쓰이지 않지만, 바닐라js를 다룬다면 꽤나 자주 보게 될 querySelector에 대해 알아보자. 프론트 프레임워크를 배울거라고 querySelector 안배우겠다고 하면 안된다. 결국 프론트 프레임워크도 바닐라js 기반으로 만들어진 것이기 때문에 바닐라js를 어려워하면 프론트 프레임워크를 잘 다루지 못할 확률이 매우 높기 때문이다. (내가 그래서 지금 다시 바닐라 복습하고 있다 ㅠㅠ) 그리고 바닐라js에서 querySelector는 꽤나 자주 보이는 함수이다. 우선 이 코드에서 다양한 태그를 선택해볼 것이다. 1번째 참가자 제시어: 입력 F12를 눌러 Chrome Console에서 여러가지 실험을 해볼 것이다. querySelector..

리액트를 하면서 js 기본을 좀 더 갈고닦아야할 필요성을 느껴서 다시 javascript es2021 기본 강좌를 들어보고 있다. 즉, 이 포스팅은 조현영님의 es2021 강좌의 내용을 듣고 기록하고 복습하는 용도로 작성한 것이다. 모든 강의를 포스팅하진 않을 것 같고, 기록해둘만한 내용이나, 시간이 좀 괜찮을 때 포스팅할 듯하다. 우리가 흔히 인터넷을 하다 보면 이 창을 한번쯤은 봤을 것이다. 우린 이제 javascript로 이 창을 띄우는 방법을 이번 포스팅을 통해서 배울 것이다. 참고로 이 창을 띄우는 방법은 한가지가 아니다. 총 3가지가 존재하는데, 용도에 따라 다 다른 함수를 가진다. Prompt 사용자에게 값을 전달받기 위한 함수이다. 아까 위에서 본 이미지가 바로 prompt 창으로 띄워준 ..