kth990303의 코딩 블로그

리액트 공부를 하던 도중 아래 에러가 발생했다. Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 근데 정말 신기한 점은 컴포넌트명에 딱히 오타가 없어보인다는 점이다. 리액트에서 디버깅을 시도했는데, 브레이크포인트를 아무리 앞쪽으로 잡아도 바로 저 에러부터 뜨니까 너무 답답했었다. 그런데 알고보니 정말 간단한 곳에 문제가 있었다. 틱택토 컴포넌트를 다른 파일에서 쓸 수 있도록 export default TicTacToe; 를 해놓았으니, 받을 때도 import로 받았어야 했는데 require로 받아버렸다. 그래서 안되는..

+) 22.01.31. 추가 1. Object여서 length를 사용하지 못해 undefined로 뜨는 경우는 아래 포스팅 참고! 2. 배열을 넘겨줬는데 왜 length를 쓰면 undefined로 뜨는지 의문사하는 경우도 아래 포스팅 참고! https://kth990303.tistory.com/254 [typescript] JS에서 length가 undefined로 뜨는 현상 고치기 객체의 개수를 파악하기 위해 diaryList.length를 console.log하면 아래와 같이 나타나는 현상을 수정해보자. 문제점 일단 diaryList가 제대로 넘어온건 맞는지 확인하기 위해 console.log로 diaryList도 쳐보도. kth990303.tistory.com 이 포스팅은 리액트 훅(useState..

자바스크립트로 작업을 하던 중 아래 에러가 발생했다. 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 컴퓨터의 턴을 ..

+) 21.12.22 추가 이 프로젝트는 2022년에 나 혼자서 스프링 + 리액트 풀스택으로 진행해볼 예정이다. 위 말이 거짓말이 되지 않도록 열심히 공부하자! https://kth990303.tistory.com/234 [211222] 스프링과 리액트로 1인분 하기 위해 요즘 하고 있는 공부 예전에 '운동일지 다이어리'를 친구랑 같이 만들다가, 어쩌다가 흐지부지된 프로젝트가 있다. (안좋게 끝난 건 아니다. 서로 각자의 공부를 해야될 것 같다고 결론이 났다.) https://kth990303.tistory.co kth990303.tistory.com 이 프로젝트는 협업 프로젝트이기 때문에 내 일정 뿐만 아니라 친구 일정도 중요한데, 친구가 중간고사 끝나고 재정비를 가진 후 11월부터 프로젝트를 해야할 ..

바닐라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..