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의 차이점은 layout은 component의 집합체고 pages는 layout의 집합체이다

scripts엔 어디서나 사용하는 모듈들을 저장

reset.css 등 기본적인 페이지 레이아웃을 세팅하기 위한 globalStyle.ts

 

 

---

- React Router setting -

 

1. react-router-dom, @types/react-router-dom 설치하고

2. header.tsx에 일단 nav 만들어서 놓기 ( 후에 커지면 nav layout 분류 예정 )

3. main.tsx에 router-view인 switch 넣고

4. app에 header, main 불러와서 적용

 

 

- global style setting -

 

1. 이번 toy project는 style-componment만을 사용해서 theme도 따로 javascript 변수로 저장할거기 떄문에 root src에 globalStyle.ts 정의하고 src/index.ts 불러오기

 

2. reset css는 styled-reset 모듈적용

 

 

 

- TODO -

1. Tetris data 구조 짜기
2. Tetris data 관리를 redux로 할것인지, context로 할것인지 정하기
3. 일단 처음엔 class component로 짜다가 hooks도 적절히? 사용해 보기

 

여기까지의 git commit