[TIL] 3주차 - 3. Layout / Global-Style / Font

 

1. Layout 구조잡기 : UI의 전체적인 구조

 

Layout 이란?

프로젝트 전체의 UI 배치를 말합니다.

고정할 틀을 만들어 놓고 그안에 알맹이를 집어 넣는 것인데

여기서 고정할 틀은 Header, Navigation, Menu, Footer 등이고

알맹이는 Main 에 해당합니다. 

 

배너 같이 모든 페이지에서 공통되게 사용되는 부분이 있다면

레이아웃을 통하여

모든 페이지에서 새로 만들 필요도

import할 필요도 없어서 굉장히 효율적이게 됩니다.

 

즉, 알맹이에 해당하는 Main만 바뀌면 됩니다.

 

Layout을 잘 잡으면

프로젝트 전체의 유지보수가 쉬워진답니다.

 

---

 

_app.tsx

_app.tsx는 모든 페이지를 실행하기 전에 먼저 실행되는 설정 파일입니다.

 

이 파일이 실행될때 들어오는 컴포넌트는

</component {...pageprops}>에

들어오는 페이지 컴포넌트입니다.

레이아웃은 틀를 만들어놓고

그안에 알맹이를 넣는 방식이라 했죠?
그 알맹이라는 것이 각각의 컴포넌트입니다.

ex) 게시물 등록하기에서는 등록하기 페이지 가 컴포넌트.

ex) </boardwrite >

 

이렇게 바뀌는 부분이 body입니다.

 

이알맹이들을 지칭하는 것이
props.children 입니다.
(자동으로 등록되 이름이라서 임의로 이름 바꿀 수 없음.)

레이아웃 컴포넌트의 폴더구조

 

위 사진의 레이아웃 컴포넌트의 폴더 구조에서

빨간 동그라미를 친 부분이

각각의 컴포넌트를 하나로 조립하는 index.tsx 입니다.

여기로 들어가보면

 

 

_app.tsx의 <Component {...pageProps} />가 index.tsx의

props: IProps로 가고 props가 {props.children}로 가게 되어

최종적으로 레이아웃의 body(위에서 말한 Main)로 들어가게 됩니다.

 

 

결과적으로 바디영역이 전체 Layout의 children이 되며,

각각의 모든 페이지는 바디영역에 보여지게 됩니다.

 

 

---

 

헤더영역 , 배너영역, 내비게이션 영역 이런 부분들의 사이즈가 커진다면?

예를 들어 헤더에는 로그인 로그아웃 기능이 들어간다.
네비게이션은 라우터 적용해야 한다.
라는 식으로 프레젠터 만으로 해결 안되는 영역일 수 있고
각각의 컨테이너가 필요할 수도 있습니다.
한파일에 작성하기에 너무 클 수 있죠.

 

이런 경우는 한 파일에서 해결하기 보다

container와 presenter로 나누는 식으로

해주는 것이 좋습니다.

 

---

 

특정 페이지에서는 특정 레이아웃이 보이지 않았으면 할 때

 

 

1. 특정 레이아웃을 적용하고 싶지 않은 페이지의 asPath 값을 배열로 담아줍니다.

2. includes() 를 사용해 배열내 값과 현재 페이지의 asPath의 값을 비교하여 동일하지 않을 경우에만 레이아웃 화면을 출력해줍니다.

 

이렇게 하면

페이지에 따라 화면을 다르게 구성할 수 있습니다.

 

---

2. Global-Style 적용하기 (+ 폰트 - WOFF2) : 모든 페이지에 동일한 CSS

 

Global-Style은 글로벌 레이아웃(모든 페이지 css)입니다.

모든 컴포넌트에 기본적으로 적용시켜주는 스타일이므로

_app.tsx 에서 적용해줍니다.

 

_app.tsx 로 들어가서

 

import { Global } from "@emotion/react"

위와 같이 이모션에서 Global을 임포트 해주고

 <Global/> 을 아무데나 둡니다.

 

이렇게.

Global 태그에 속성값으로 styles를 넣어서 css 적용을 해줄 수 있습니다.

 

위사진 속 styles 폴더 안에 globalStyles.ts 파일을 만들어주고

 

* 은 모든 페이지를 뜻합니다.

 

이모션에서 css를 임포트 받은 뒤

globalStyles를 작성하여 export 시켜줍니다.

다시 _app.tsx로 돌아가서 Global태그의 속성값 style={}안에

globalStyles를 집어넣으면 css 적용이 완료됩니다.

 

폰트 적용된 모습

 

 

---

 

css cascading 폭포

이때 자식 컴포넌트에서 각자 css를 제어하고 있으면
globalStyles로 제어한 것은 안먹히고

자식에서 제어한 것이 먹히게 됩니다.

 

css에서 c는 cascading 입니다.

위에서 아래로 흐르는 폭포처럼
위에서 부터 차례로 먹혀드는데
부모에서 제어를 해줬어도 자식이 제어하고 있으면

부모가 제어한게 안먹히고 자식이 제어한것이 먹히게 됩니다.

즉, 가장 아래 가장 마지막에 있는 기능이 먹히게 됩니다.

 

---

3. Font

 

폰트는 파일 또는 웹폰트로 사용 가능합니다.

파일을 통해 폰트 적용을 해보겠습니다.

 

 

public 폴더 아래 fonts 폴더를 만들고

그안에 폰트 파일을 둡니다.

 

@font-face 로

폰트를 호출할 이름(font-family),

폰트의 경로(src) 를 선언합니다.

 

폰트를 사용하려는 페이지의 style부분에서

font-family: "폰트명";

폰트명을 적어주면 폰트 적용이 됩니다.

 

 

(사진에서는 globalStyles에 적용했으므로

자식에서 폰트 제어하지 않는다면

모든 페이지에 폰트 적용되고 있습니다.)

 

 

---

 

Subset-Font (경량화 폰트)

잘 안쓰는 글자는 제외하여 용량이 가벼운 폰트입니다.
실제로 디테일하게 잘 안쓰는 글자에까지 폰트 적용해야 한다면
경량화가 불필요해지므로 상황에 따라 사용하는 것이 좋습니다.

ttf 보다는 woff2이 압축률이 높아서 용량 가볍게 사용하기 좋습니다.

(인터넷 익스플로러에서는 잘 안보일 수도 있으므로 익스플로러 대응해야 되면 적용 가능한 부분인지 체크하시는게 좋습니다.)