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 사용하는게 정신건강에 이롭다. (그래도 삽질하면서 webpack에 대해 자세히 알수있는 계기가 되어서 그렇게 무의미 하진 않았다...)

 

 

3. STYLE COMPONENT

 

sass도 sass만의 매력이 있지만 애의 가장 큰 매력은 css와 javascript간의 상호 의존성을 높여준다는 것이다.

자동으로 class명도 안겹치고 랜덤하게 지어줘서 component에 css 종속시킬수도 있고 무엇보다 component 안의 property값으로 style을 분리시켜줄수 있다 css 없이 javascript 만으로 거기다 typescript도 지원 오지게 잘한다!

 

 

4. NODEJS SOKET

 

실시간 경쟁에 사용할 예정, soket.io를 사용할지 아니면 기본 net모듈로 하드코딩할지는 나중에 결정해 보자

 

 

5. immutable js

 

Tetris의 기본적인 x, y축인 2차원배열에다가 컬러값도 저장해야 되기 때문에 object를 삽입해서 작성할거다. 따라서 javascript에서 골머리 썩는것중 하나인 object 포인터때문에 지금까지 그래왔듯

{ ...obj } 로 카피한다음 덮에씌우고 작업할 예정인데 깊은 구조에서 정 힘들다 싶으면 사용할 예정

 

 

6. 테스트 코드 작성하면서 하기

 

테스트코드 작성하기 귀찮아서 지금껏 안해왔는데 사실 테스트코드를 작성하면 버그가 걸릴수도 있는 다양한 상황들을

짜는도중 예측하고 나중에 유지보수도 편해질거 같다는 생각에 이번엔 작성하면서 해볼예정

 

 

- Spec -

1. 실시간 경쟁방식 ( nodejs )

 

2. component 모듈의 엄격한 분리

게임같은경우엔 다양한 상태와 상황이 있다보니까 분리하기 매우 난해했었다... 정 안되면 react hook 한번 사용해볼 예정

 

3. block rotate 알고리즘 최적화 시도해보기

 

4. 유저 친화적으로 만들어보기