Day 13) 1. UI의 전체적인 구조를 잡아놓자! => Layout 2. 모든 페이지에 동일한 CSS를 주자! => Global-Styles

송인호·2022년 5월 25일
0

dailyStudy

목록 보기
9/35

1교시 포트폴리오 리뷰

인풋 창에는 벨류값이 존재한다.
value 는 창에 나타나는 글

내가 안된것

내가 안된것: 우편번호 검색을 한후 수정할 때 zipcocde,address 디폴트값 가져오기
해결 방법:
defaultValue 는 value가 없을 때 작동한다. 그래서 value가 빈문자열로 있으니 디폴트가 존재할 수 가 없다.

삼항연산자로 벨류넣어준다.


|| 연산자: 앞에 있으면 앞에, 없으면 뒤에꺼를 보여주라
&& 연산자: 앞에 있으면 뒤에, 없으면 앞에꺼를 보여주라


하나라도 바뀌었으면 변경되도록 boardAddress라는 객체를 만들어준다.

2교시 Layout

props.children

Layout: UI배치

여러 다양한 레이아웃 구조

변경되는 부분이 어디인지 봐야한다

레이아웃 컴포넌트?

변경되는 부분에 페이지컴포넌트를 넣어주면 된다.
{props.children}으로

실습

모든페이지에 달라 붙게 된다.


레이아웃 폴더 만들기

특정페이지 감추기

다이나믹 라우터에는 router를 찍어보면 asPath와 route의 값이 다르다.

폰트


폰트 만들기

폰트는 다운로드 받아서 온다.

FOIT 폰트가 다운로드가 안되면 안보여진다.
FOUT 폰트가 다운로드가 안되면 기본값으로 보여준다.

압축률이 높은 폰트를 다운받아야한다.

Subset-Font

경량화 폰트

잘 안쓰는 폰트는 빼고 만든다

검색 ex) 바나나 폰트 경량화버전

Fallback-Font


앞에 꺼 없으면 뒤에 꺼 다운로드 받기

react-slick

profile
프론트엔드 개발자

0개의 댓글