pre-task to apply prography
- cd frontend
- npm install
- npm start
- check localhost:3003
├── src # source files
│ ├── components # atomic design을 위한 atoms, molecules, organisms
│ ├── pages # atomic design을 위한 templates, pages
│ ├── modules # 상태 관리에 필요한 ducks 구조의 redux action, reducer
│ ├── sags # redux-saga에 필요한 middlewares
│ ├── lib # 필요에 따라 만든 모듈들
│ └── server.tsx # SSR를 위해 만든 express 기반의 서버
│
├── .eslintignore, estlintrc.js # lint에 필요한 파일
├── .prettierrc # Pritter 설정 파일
├── package.json # npm setting 파일
├── tsconfig.json # ts compile 설정 파일
├── webpack.config.js # env에 따라 webpack을 실행시키는 default 설정 파일
├── webpack.client.js # CSR 설정 파일
└── webpack.server.js # SSR 설정 파일
Atoms
Molecules
Organisms
Templates + Pages
서버가 있는 것처럼 모든 input에 비동기 동작을 둠
- Todo Create, Update(취소선, 텍스트변경), Delete 동작 수행 시, 서버로 데이터 전송하는 것을 고려한 loading 구현
- Todo Create시, saga 미들웨어 로직에서 api으로 uuid를 사용해 id 부여해 insert
정확하게 캐싱과는 거리가 멀지만 redux 상태 값에 항목들이 존재하면 load action을 dispatch하지 않습니다.
- todo: 자신만의 private한 기능이라 생각해 다른 사용자로 인한 데이터 부수효과가 없을 것이라 판단해 상태 값 유지
- movie: 데이터 양이 많아 접속할 때마다 최신 값을 가져오는 것보다 현재 필요한 데이터에 초점을 맞추는 것이 좋다고 판단
- SEO를 위해서라도 필요한 기능이라고 판단
- 페이지 첫 접근 시, Content 내용들이 html 파일에 포함되어 SEO에 효과적
- todo 내용이 많을 때의 수정 삭제 버튼 뷰의 위치를 중앙으로 배치
- code spltting을 구현하려고 했으나, html에 Content 내용이 들어가지 않아 시도만 함
- rendering memorization 최적화