🏷️수업목표
- 레이아웃 구조잡기
- 레이아웃 HIDDEN 영역 설정하기
- 슬로벌 스타일 적용하기
- 폰트
1. 레이아웃 구조잡기
레이아웃이란 프로젝트 전체의 UI 구조를 의미합니다.
쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미합니다.
app.tsx 작동원리와 props.children
수동 부분은 프롭스가 한개, 자동부분은 두개다. props.chidren 은 자동으로 이름이 붙은 것!레이아웃 만들 때 쓴다.
실습
이렇게 하면 다람쥐초등학교가 props 타고 들어옵니다.
쏙 들어가고, 전체 컴포넌트를 당겨오는 형태.
최종적으로 바디영역이 전체 Layout의 children이 되며, 각각의 모든 페이지는ba 바디영역에 보여지게 됩니다.
2. 레이아웃 HIDDEN 영역 설정하기
위처럼 설정하면 어떤 레이아웃이던지 배너나 헤더가 존재합니다. 어떤 페이지에서는 특정 레이아웃이 보이지 않아야 할 때가 있습니다. 이럴 때는 특정 페이지에서 레이아웃을 나타내주지 않게 하는 조건을 걸어주면 됩니다.
만약, 특정 페이지에서 Layout의 Header 부분을 보여주고 싶지 않다면, 지정하려는 특정 페이지의 asPath 값을 배열로 담아주고,
includes() 를 사용해 배열내 값과 현재 페이지의 asPath의 값을 비교하여 동일하지 않을 경우에만 레이아웃 화면을 출력해주면 페이지에 따라 화면을 달리 구성할 수 있습니다!
실습
해당 주소명을 변수명으로 해서 헤더, 배너 안나오게
여기 트루면 느낌표때매 펄스대니까 안나옴
3. 컴포넌트 합성
Apollosetting 분리 실습
유즈쿼리ㅡ 유즈뮤테이션이 되게하려면 아폴로프로바이더 안에 ㅇㅆ어야한다.
위에 주소써있는 아폴로세팅 나중에 엄청 세팅할것이 많아서 길어진다. 얘를 나눠놓아보자
왼쪽 -> 오른쩍
왼쪽에 있는거 아폴로세팅을 당겨오기 (왼쪽) 최종 실행결과는 나누기 전, 후 마찬가지
아폴로세팅 밖에있으면 유즈쿼리, 유즈뮤테이션 안된다!!
4. 글로벌 스타일 , 폰트
글로벌스타일이란 우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미합니다. 우리는 글로벌스타일을 _app.tsx 에 적용해 주어야 합니다.
@emotion/react에서 Global을 import 시켜 태그로써 사용하고, 속성값으로 styles를 넣어 주어야 하는데,
글로벌 스타일은 css로 작성해주게 되며 이곳에 작성해준 globalStyles를 위의 Global태그의 속성값 style={}안에 집어넣어주게 되면 적용이 완료됩니다.
폰트는 직접 다운받은 파일을 사용할수도, 웹폰트를 사용할 수도 있습니다.
글로벌스타일, 폰트 실습
글로벌 스타일은 전역 씨에스에스다.
scr<commons<styles 폴더 만들었음. 앱에 넣어주기퍼블릭에 폰트 넣어줄 파일 만들어서 다운받은 폰트 넣어주기
스타일즈에 가져오기
이미지랑 폰트는 다운로드 받아서 보여지게되는거라 조금 느리다
얼마나 다운로드를 빠르게 할 것인가?
FOIT:다운되기 전까지는 폰트 안보여준다
FOUT:다운되기 전까지 기본폰트로 보여주다가, 완료되면 바뀐폰트로 보여준다.
브라우저간 상이함!폰트의 용량은 용량이 작은거가 좋겠다. 압축률 높은 폰트가 좋음
subfont 라는게 있는데 아래처럼 잘 안쓰이는거는 뺀 것. 경량화폰트=서브폰트
fallback-Font 다운 실패했을 때 보여줄 대비책 폰트
앞에 실패하면 뒤에꺼, 뒤에꺼.
리뷰
우편번호 버튼 누르면 주소검색 모달 뜨고
우편번호랑 주소 나오게 상세페이지 툴팁으로 지도표시 아이콘 위에 올리면 나온다. 패치헤ㅐ와쓰니까 툴팁 뜬다
등록, 조회, 수정 순서로 가기.
유아이랑 콘테이너, 프리젠터 같이 열어서 보
defaultvalue : 위에 제목이랑 내용부
수정하기에서 초기값이 있을수도 있으니까 디폴트벨류가 존재하는 것.
수정하기가 아니라서 defaultvalue가 없으면, 뒤에 ??"" 넣어도 된다(조건부 렌더링) / 온체인지 함수 발동되면 state에 값 저장되는 것.주소부분 defaultvalue 있는거는 온체이치 입력하면 state에 입력된다.
근데 상세주소는 원래 우리가 하던거랑 같이하면 되는데, 우편번호랑 밑에는 리드온리가 들어가있어서 value가 들어가있다.검색을 통해 넣어주는건 고정값 벨류. state 두개를 만들고, 주소 클릭하게되면 주소가 stete로 들어가게 한다음, props로 불러온다.
우편번호 검색 -> 함수실행 -> 우편번호, 주소 스테이트저장 -> 벨류에 스테이트 꺼내오기 (리드온리)
근데 얘네는 뭘까
주소 수정하기 하면 바뀌긴 했는데 눈에 안보임
내가 입력한 값 : ziop code, addredd
내가 입력한거 스테이트에 있자나. 집코드가 있니? 있으면 그거 보여줘. 수정 첫페이지면 : 뒤 프롭스 보여주고 등록첫페이지면 ?? "" 버여주고
추가
내가 접속한 주소 있으면 트루, 없으면 펄스. 이거 가지고 여기서 보여줄지 말지 결정. 이즈히든헤더가 펄스여야
내주소가 보여주지말자에 들어가 있다 트루.
🤷🏻♀️ 궁금한 것
- 캐러셀 달았지만 안에 사진이랑 컴포넌트들의 사이즈 속성이 조금 맞추는게 어렵다.. 뭐때문에 오른쪽 으로 넘기기 화살표가 안뜨지? 가로사이즈를 키우니까 나오던데 근데 그럼 사진이 이상해진다. 주말에 다시 해봐야겠음
❗️ 배운 것
⭐️ npm에서 다운받을 수 있는 react-slick을 사용해보았다.
1. 파일설치
yarn add react-slick/npm install react-slick --save둘중 하나 다운(나는 yarn)npm install slick-carousel(css이랑 font관련)- 타입스크립트용 react-slick 설치
npm install react-slick @types/react-slick slick-carousel
2. 캐러셀 컴포넌트 만들기
React Slick 홈페이지에서 fade 로 적용시킨 캐러셀이다. settings 위에 render () 어쩌구 하는게 있었는데 안되길래 그거 빼버리니까 작동됬다. 임포트 되어있는 baseUrl은 기존에 있는 이미지 쓰지않으려면 삭제해도 될듯.
import styled from "@emotion/styled";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
// import { baseUrl } from "./config
const Wrapper = styled.div`
background-size: cover;
`;
export default function Carousel(): JSX.Element {
const settings = {
dots: true,
fade: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
};
return (
<Wrapper>
<Slider {...settings}>
<div>
<img
src={"/IMG_8112.jpg"}
style={{ width: "500px", height: "300px" }}
/>
</div>
<div>
<img
src={"/IMG_8113.jpg"}
style={{ width: "500px", height: "300px" }}
/>
</div>
<div>
<img
src={"/IMG_8114.jpg"}
style={{ width: "500px", height: "300px" }}
/>
</div>
<div>
<img
src={"/IMG_8115.jpg"}
style={{ width: "500px", height: "300px" }}
/>
</div>
</Slider>
</Wrapper>
);
}배너밑으로 가져오기
import styled from "@emotion/styled";
import Carousel from "../carousel";
const Wrapper = styled.div`
height: 300px;
background-color: pink;
padding-left: 500px;
padding-right: 1000px;
`;
export default function LayoutBanner(): JSX.Element {
return (
<>
<Wrapper>
<Carousel />
</Wrapper>
</>
);
}
✨ 느낀점
와 나 css 진짜 구리다^^ 항상 css가 느려서 일단 기능먼저 다 해놓고 주말에 몰아해야지(?) 하는데 주말에도 다른게 밀려있어서 css는 계에에에에속 밀리는중 와하하
