오늘은 효율적으로 레이아웃을 구성하는 방식을 배우기 앞서 props.children을 배웠다.
그 전에 app.tsx 기존 app.js파일의 작동방식과 관련이 있는데, 이 앱 파일의 component부분에 합쳐져 페이지가 실행된다고 했다.
이 props.children도 같은 기능을 한다고 보면된다.
이것을 사용하면 페이지 전체를 가져와적용할 수 있다.
이것을 공통된 레이아웃 베너, 해더, 사이드바 등을 만드는데 사용할 수 있다.
먼저 레이아웃을 만들어놓고 app.tsx를 수정해 해당 컴포넌트를 받아오면된다.
이것을 app.tsx의 컴포넌트를 감싸는 형태로 바꿔주면 저 레이아웃이 모든 컴포넌트를 감싸 화면에 보여지게 되고, props.children자리에는 각 페이지들의 내용이 들어오게된다.
이런식으로 레이아웃을 만들어보았고, 일단 전체에서 적용이되지만, 
만약 적용하고싶지 않은부분이 있다면 해당 파일명을 배열로담아
그 파일이 실행되는 실제주소인 asPath를 router을 통해받아 그것을 제외 하는것이니 false일 경우에만 원하는 부분이 보이게 작성할 수도 있다.
그리고 캐러셀 적용도 해보았다.
블로그와 react-slick 의 docs를 보면서 했는데 ant-design보다 덜 복잡해 보기가 어렵진않았으나, 뭔가 이상하게 나오긴했다.
사진은 내가좋아하는 고양이들이 나온것을 사용했다.
작동은되니 일단 성공!
양쪽에 화살표가 나오도록하려면 스타일을 줘야한다는데 무슨말인지 모르겠어서 일단 저렇게 두었다.
자동으로 넘어가게 하고싶었는데 그부분은 적용이 안되어 좀더 알아봐야겠다.
그리고 글로벌 스타일을 주는법을 배웠다. 기존 styles폴더말고 emotion으로 통일시키기위해 스타일폴더안에 글로벌스타일 파일을 만들고, font-style 등을 바꿔보았다..
폰트는 public폴더에, url에는 폰트파일위치.
글로벌스타일은 자식들에서 따로 설정을 해주지 않았다면 적용됨.
만약 자식들에 폰트 사이즈 등이 적용되었다면 자식의 값? 으로 적용됨.
@font-face는 폰트 만들때 사용. 이름은 원하는 이름으로, 나중에 쓰고싶을때 그 이름을
font-family: "여기";에 넣어주기.
오늘은 과제를 하면서 정리해나가는 시간이었다. 다만 마음이 급해 차분히 하지못했다.
좀 더 차분히 생각을 정리하고, 물어보기전에 콘솔창에서 찍어보고... 그렇게하자.
마음이 급하다고 생각만큼 빨리 잘 되지는 않으니....
노력. 신중.
