Grid
grid box 에서 grid-template-column 에 대한 속성중
auto-fill은 해당 공간에서 반드시 컬럼수를 유지할 필요가 없을 경우, 반응형으로 변화하게 하기위해 사용.
보통 Repeat에 같이 사용함.
mixmax는 이름 그대로 최솟값, 최댓값을 정하는 속성이다.
여기서 1fr 는 공간단위를 말한다고 한다.
auto-fill이 공간 축소 시에 같이 content가 줄어드는 반면, auto-fit은 content는 그대로인 상태로 view만 줄이게 된다.
ㅁ ㅁ ㅁ ㅁ ㅁ 의 구조로 있을 경우 auto-fill은 ㅁㅁㅁㅁㅁ이 된다는 것이고
auto-fit은 ㅁ ㅁ ㅁ (ㅁ ㅁ) 처럼 나타나게되어 괄호 안에 있는 content는 잘려서 보이게 된다.
fr(fraction)
그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타냅니다.
→ 남은 공간을 기준으로 얼만큼 할당할 것인지를 나타냄.
→ 해당 fr 말고 다른 fr이 있다면, 그 값들을 모두 합친것 중 n / sum 만큼의 공간적 비율을 할당하겠다는 말.
→ 따라서 내가 사용한 곳에서는 1fr이 auto-fill로 인해 반복된다는 점을 보았을 때, 3가지 이미지의 크기는 동일하도록 알맞게 공간이 할당된다는 말.
오늘은 대부분의 시간을 기존 project refactoring에 사용했음.
container쪽은 react hooks 를 활용하여 function component로 만들고, redux쪽에는 immer + redux-saga 로 만들어줬는데
saga naming에 대해서는 action관련 부분은 REQUEST, SUCCESS, FAILURE 로 나누고 generator는 watch —- 로 정리, 이후 saga function 에 넣어주는 걸로 규칙을 정해서 만들어줬음.
일단 화면 자체는 render가 되는데, 세부적인 동작에 대해서는 하나하나 점검하면서 고쳐야할듯
