Toy Project/react (6) 썸네일형 리스트형 동시성모드, selectable hydrate 관련 좋은 영상 https://www.youtube.com/watch?v=bpVRWrrfM1M Tetris 개발일지 (day 4) 1. userBlock shilhouete 그리기 블럭 shilhouete을 그리기 전 현재 위치에서 블럭이 얼마나 떨어질수 있는지를 구해야 한다. 1. 위와같이 현재 블럭의 y 좌표값을 기준으로 각각 얼마나 떨어질수 있는지 구하고 2. 떨어질수 있는 범위중 제일 낮은 값이 현재 블럭이 떨어질수 있는 값이다. getblockDropPos(pos: [number, number][], background: string, stage: ModelStage): {pos: [number, number][], background: string} { // key is rowIndex, value is column index let toCheckPos: { [key: number]: number } = {} for (c.. Tetris 개발일지 (day 3) 1. canSettle 메소드 작성 canSettle (positions: [number, number][]) { for (let pos of positions) { if ( pos[0] > this.state.stage.length - 1 || pos[0] this.state.stage[0].length - 1 || pos[1] < 0 || this.state.stage[pos[0]][pos[1]].settle ) return false } return true } position의 x, y가 stage를 넘어설때 이미 stage에 놓아져 있을때 위와 같을때 false를 반환한다. 2. event handler 작성 stage component엔 내부적으로 사용자의 키보드에.. Tetris 개발일지 (day 2) 1. 테트리스 구조 나누기 후에 게임 저장 기능도 만들거기 때문에 해당 데이터들은 Tetris에 props로 뿌려주는 방식으로 할거며 없을수도 있으니 ? 키워드를 붙인다 만약 없으면 Tetris component에서 initial value로 생성해서 뿌려주는 방식 2. Type 구조 짜기 export type Cell = { background: string; settle: boolean; } export type ModelStage = Cell[][] export type ModelScoreBoard = { score: number; rows: number; level: number } export interface ModelBlock { shape: boolean[][], background: st.. TETRIS 개발일지 (day1) - 개발 환경 세팅 - 1. github에 새 repo를 만든다 2. cra로 빠르게 개발환경을 만들어준다. create-react-app react-tetris --typescript // --typescript 적용시키는 추가옵션인데 요놈도 cra 업데이트 하면서 편해졌따 3. 폴더 구조 components/ someComponents/ index.tsx logic/ styles/ layouts/ someLayout.tsx pages/ somePage.tsx scripts/ helper.ts globalStyle.ts App.tsx index.ts components는 기능이 커지면 아예 따로 layouts로 바꾸던가 하위에 폴더를 하나 더 만들고 logic, style 분리 layout, pages.. TETRIS 개발일지 (prologue) - 사용 framework & lib - 1. REACT + TYPESCRIPT 요즘 typescript에 푹 빠져사는중인데 요놈이 react랑 너무 잘맞아서 붙이는중 2. CREATE REACT APP webpack으로 밑바닥부터 react + babel + typescript + sass 등등 자잘한거 설정해 봤는데 build속도 너무 느렸다.. production 모드에서 느린건 그렇다 쳐도 dev 모드에서도 엄청 느려서 무자비한 삽질로 캐싱로더, fork-ts-checker-webpack-plugin 등 별별거 다 붙이는 도중 개발환경세팅하는데 배보다 배꼽이 더 커지겠다는 느낌이 들어서 그냥 cra 사용하고 eject해서 수정하는 방식으로 변경했다. 정말 cra 사용하는게 정신건강에 이롭다. (그.. 이전 1 다음
