농부처럼 코딩하기

React로 테트리스 구현중에 발생한 문제로 자바스크립트에 대한 이해가 부족한게 많이 느껴졌다. 문제 상황을 간단히 설명하면 UsePlayer라는 Custom Hook에서 State : Player의 x,y 를 가지고 있으며 - 1초마다 y축으로 -1씩 이동하거나 - 방향키 입력에 따라 x,y 이동을 구현하는데 두 가지 입력에 따른 player의 위치를 자연스럽게 변경하려 했다. const onkeydown = (e) => { switch (e.key) { case "ArrowLeft": isPossibleMove(-1, 0); break; case "ArrowRight": isPossibleMove(1, 0); break; case "ArrowUp": break; case "ArrowDown": isP..

컴포넌트 계층 구조에서 useState를 통한 상태변경 과정을 이해했다..라고 생각하고 react로 작은 프로젝트를 만들어보기로 했다. 테트리스로 정했고 1차적으로 시간 변화에 따라서 내 블록이 이동하는 것까지 구현하기로 했다. 일단 js파일 하나에서 구현했고 다행히..? 금방 완성됬다. 현재 한 파일에 모든 코드가 다 들어가 있어서 별 기능도 없는데도 벌써부터 코드에서 구린내가 나기 시작해서 컴포넌트 별로 분리하고 로직과 렌더링 부분을 분리하기로 마음먹었다. 찾아보니 로직부분은 hook을 이용한다고 한다. hook은 쉽게 말하면 리액트의 함수를 한번 감싸서 내 상황에 맞게 커스터마이징해서 사용한다고 생각하면 된다. 여기서 구조 잡는게 정말 쉽지 않았다.. 이것만 한건 아니지만 거의 반 이상을 투자했는데..