20.12.02 styled component 와 flex box

Header Component에 여전히 redux와 관련된 코드 useSelector가 있으므로 정리하기.

 

CalenddarDay Container 에서 props로 넘겨주어야 presentatioanl Conponent인 CalendarDay가 받아서, props로 Header에 넘겨준다. 

 

today가 nested라서 문제가 발생. 

 

typescript의 type와 interface의 차이를 찾아보자. 

typescript의 타입을 분리저장해서 한눈에 보고 싶다. 

 

분리하였으나 today를 내려 주는 부분이 계속해서 에러가 생긴다. 

에러명

Type '{ todaykey: object; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'todaykey' does not exist on type 'IntrinsicAttributes'.  TS2322

 

1. props의 today와 키값으로 내려주는 today의 이름이 같아서 에러가 생기나? 

<Header today={today} />

2. object라서 문제인가? 

 

두가지로 해결해 보려했으나, 결국 원인은 모르겠고 에러메세지 검색을 통해서 다른 방법을 찾았다.

stackoverflow.com/questions/48240449/type-is-not-assignable-to-type-intrinsicattributes-intrinsicclassattribu

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes

today를 오늘 날짜로 받아오는 부분을 수정했다. 

 

reviewModal에 시간수정하는 부분 추가하기 작업 시작

 

1. 일단 오피스아워 때 피드백 받은 대로 모달창을 직접 디자인할 생각. 

codepen.io/igotoweb/full/qBadByM

codepen.io/igotoweb/full/yLaNyLz

 

2. 모달창 디자인은 타이틀과 콘텍스트, 시간으로 구성하고 화면 전체를 차지할 정도로 크게 보이게 하고 싶다.  

 

모달창의 경우 재사용성이 있을 것 같아서, BigModal이라는 Atom으로 만들 생각이다. 근데 이게 아톰인지 헷갈린다.. ㅎㅎ

 

styled Componet 가 어떤 문법이라고 생각했는데, 라이브러리였다; 

1. 벨로퍼트님 블로그 

react.vlpt.us/styling/03-styled-components.html

2. 유튜브 예제 (영어) 

www.youtube.com/watch?v=3SpAg5tr7Ws

 

처음 감을 잡을 때는 유튜브가 좋아서 시청 후 작업 시작. 

1. 공홈 

styled-components.com/docs/basics#installation

2. 타입스크립트로 인스톨. 

 

진행하다가 다시 npm start를 했더니, today가 오늘 날짜로 업데이트 되지 않는 상황이 발생. 

마지막에 state값으로 저장이 되어 있기 때문인 것 같다. 

 

- 유저가 로그아웃했다가 로그인 한다면, 오늘 날짜를 보여주는게 맞다. 

- 유저가 특정한 날짜를 지정했다면, 새로고침을 해도 그 날짜로 유지되는게 맞다. 

- 클라이언트를 종료 시켰다가, 새로시작한다면..? 

 

일단 로그아웃시에도 초기화가 되지 않으므로 해당 문제를 해결하자. 

- todayF 를 함수를 리턴하도록 변경

- resetF 함수를 만들어서 sidebar의 로그아웃시에는 state값을 null로 초기화 하도록 변경

- 다른 곳에서 로그아웃을 해도 동일하게 동작하도록 추후에 수정이 필요하다. 

- calendarDay에서, 날짜를 지정할 때 today.year 값이 null일 경우에만 오늘 날짜를 받아오도록 수정. 

   이렇게 세팅해 두어야, 내일이나 어제로 가는 버튼을 동작할때 handleToday의 state값이 보존된다. 

 

다시 styled components로 돌아가서 공부하기 시작. 

 

벨로퍼트님의 블로그를 참고하다가 설명이 잘 이해되지 않아서 공홈 레퍼런스를 구현 중 다시.. 타입스크립트 에러와 만났다 ^^

 

Property 'primary' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | ... 251 more ... | "onTransitionEndCapture"> & { ...; }, any>'

 

그래그래.. 한줄당 에러 한번이 안나면 니가 타입스크립트겠니.. 

stackoverflow.com/questions/60992002/react-styled-components-props-and-typescript

워낙 기초 예제라 해결방법은 금방 찾을 수 있었다. 

 

본격 CSS타임. 

드림코딩 엘리님 동영상 강의 flex box 

www.youtube.com/watch?v=7neASrWEFEM&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=9

container

display : 컨테이너에 지정해준다. flex로 할 경우 이제 부터 flex를 사용하겠다는 의미. 

flex-direction : row, row-reverse, column, column-reverse

flex-wrap : nowrap(한줄에 아이템이 있음), wrap(화면에 꽉차면 내려감), wrap-reverse

flex-flow: 위의 두개를 합친것. column nowrap 

justify-content : 중심축에서 아이템들을 어떻게 배치랗 것인지. flex-start, flex-end, center, space-around, space-evenly, space-between

align-items : 반대축에서 아이템들을 어떻게 할 것인지 결정 baseline 

align-content : 반대축에서 아이템들을 어떻게 할 것인지 결정. justify content에 있는 속성 모두 사용 가능. 

 

items

order : 잘 안씀. 순서 바꾸기. 

flex-grow : 컨테이너를 꽉 채우기. 1등 숫자를 넣으면 됨. 

flex-shrink : 컨테이너가 작아졌을때 어떻게 행동하는가. 1등 숫자를 넣으면 됨. 

flex-basis : grow, shrink를 쓰지 않아도 사이즈 지정이 가능. 60%, 30% 등. 

align-self : 컨테이너에서 벗어나서 위치를 지정. center. 

 

flexbox 는 중심축과 반대축이 있다. (main axis , cross axis)

 

% 부모 높이의 100%를 채움. 따라서 부모와 연관. 

vh, vw는 부모와 상관없음. 

 

color tool : UI 

material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

유용한 게임 

flexboxfroggy.com/

Flexbox Froggy