- 개발 환경 세팅 -
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 -
- Tetris data 구조 짜기
- Tetris data 관리를 redux로 할것인지, context로 할것인지 정하기
- 일단 처음엔 class component로 짜다가 hooks도 적절히? 사용해 보기
'Toy Project > react' 카테고리의 다른 글
동시성모드, selectable hydrate 관련 좋은 영상 (0) | 2021.07.03 |
---|---|
Tetris 개발일지 (day 4) (0) | 2020.05.27 |
Tetris 개발일지 (day 3) (0) | 2020.05.26 |
Tetris 개발일지 (day 2) (0) | 2020.05.25 |
TETRIS 개발일지 (prologue) (0) | 2020.05.22 |