농부처럼 코딩하기

특정 아이템 위에 마우스를 올렸을 때 아이템의 제목요소가 슬라이드되서 아래서 위로 나타나는 기능 구현했다. 처음에 이것저것 해봤는데 반응형도 지원해줘야하고 고민을 좀 하다가 height가 0인 더미 요소를 생성하고 그 자식으로 슬라이드될 요소를 생성하니 간단하게 동작했다. .item_dummy{ height: 0; } .item_title{ position: absolute; top: // change here } 이벤트에 따라 item_title이 적용된 요소에 top 속성을 변경하는 css class를 추가/삭제

처음 고민은 어떤 상태값을 전역으로 관리하느냐는 것이였다. 기존에 context api를 이용해서 시간값을 전역상태로 관리하고 있었기 때문에 시간값은 전역상태도 들어가고, Player의 위치 변화에 따라서 cellgrid의 상태값이 변경되기 때문에 Player 상태정보를 전역상태로 관리하려고 하였으나, cellgrid 상태값을 변경하기 위해서는 결국 cellgrid도 전역상태도 관리해야 했다. 그래서 로직부분을 player에서 처리하기로 했고, 그러면 player를 전역상태로 관리할 필요도 없어져서 위와 같은 구조가 만들어지게 되었다. 구현결과 Player의 이동 로직과 cellGrid의 상태 변경 로직을 모두 Player에서 하고 있어서 cellGrid의 상태 변경 로직을 reducer에서 해주는게 어..

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

동적, 상호작용하는 홈페이지 제작에 익숙해지기 위해 작은 기능별로 하나하나 직접 구현해보기로함. 목표는 https://www.does.kr/ < 홈페이지 소개하기에 나온 많은 효과들 최대한 많이 구현해보자 첫번째로 유한한 요소돌이 시간에 따라 자동으로 스코롤되며 계속 보여주는 기능을 구현해보기로 함. 추가로 기울어진 상태로 만들어 보기로 했다. 애니메이션 효과를 위해서 Transform을 이용해 리스트 요소의 위치를 변경해준다. 요소의 transform을 변경해주면 브라우저의 dom파싱이나 렌더트리 재생성 작업없이 요소의 정보를 변경 가능해서 애니메이션 작업을 할때는 transform을 변경하는 방법이 좋다. 1. 부모의 transform을 시간에 따라 이동시킨다. 2. 특정 위치에 도착하면 첫번째 자식..

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

Github.io로 간단하게 내 블로그를 호스팅한 뒤 게시물을 올려야 하는지 어떻게 올려야 할 지 고민하다 DB를 사용해보기로 했다. 헌데 찾아보니 Github블로그는 정적페이지라 DB 사용이 어렵다는 글을 보고 일단 DB는 잠시 접어두고 많이들 Github블로그를 꾸미는데 많이 사용하는 jekyll에서는 어떻게 게시물을 포스팅하나 찾아보니 _pages라는 폴더를 만들고 그 안에 올리려는 게시물을 정해진 파일명 규칙으로 해주고 확장자를 .md .html로 해주면 자동으로 게시판 형식으로 만들어 준다고 한다. 그럼 똑같이 폴더하나 정해 놓고 해당 폴더 하위폴더 돌면서 파일들 탐색하면 되겠다. 코드를 작성하고 돌려보니.. 웹 브라우저 환경에서는 자바스크립트의 fs(파일시스템 라이브러리)를 사용할 수 없다는 ..