레이아웃
-
레이아웃은 프로젝트 전체의 UI 구조를 의미
-
레이아웃의 구조를 잡는 다는 것은 Header, Navigation, Menu, Footer...등으로 화면을 쪼개는 일
-
레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 쉬워짐
ex. 레이아웃 컴포넌트의 폴더구조 예시
레이아웃 구조잡기
-
props로 하위 컴포넌트에 값을 넘겨 주는 것을 레이아웃 구조에서 활용 가능함
-
return 문 안의 컴포넌트 구조에서 위의 경우처럼
<BoardWrite>안에 담겨있는 자식 컴포넌트는 부모컴포넌트<BoardWrite>의 props.children 으로 넘겨지게 됨
*수동으로 직접 props를 넘기는 것과 같은 개념. 기본 값은 props.children 으로 지정되어 있음
-
기본적으로 컴포넌트 안의 컴포넌트는 props로 보내질 수 있으며 품고있는 부모 컴포넌트 안에서 porps.children 으로 불러올 수 있음
-
위의 경우로 보면, Layout 안에
Component가 props로 전달되어 Layout 컴포넌트 구조 내props.children으로 전달되었고, 최종적으로 App.js 상으로 보여질 때 header, banner, Navigation,props.children순으로 보여지게 됨
-부모에서 props로 자식 컴포넌트로 넘어갔다가 부모컴포넌트 안의 구조들과 함께 갈고리에 걸 듯 걸려서 최종적으로 App.js 에 보여진다고 이해할 수 있음
-따라서 자식 컴포넌트가 변해도 부모 컴포넌트(Layout) 의 다른 컴포넌트(Header, Banner, Navigation) 은 바뀌지를 않음
+활용해보기 1) 레이아웃 Hidden 영역 설정하기
- 위의 컴포넌트 구조를 활용하면 다른 페이지에 접속해도 banner, Navigation 같은 요소들은 계속해서 화면에 표출될 수 있음
[BUT!] => 특정 페이지에서는 표출되지 않고 사라지게 하고 싶다면?
router객체 안의 정보 중에는 asPath 라는 값이 있음- asPath 는 현재 위치한 Page의 경로를 값으로 담고 있음
- 이 점을 활용해 배너요소를 숨기고 싶은 page의 asPath 값을 따로 정리해서 배열에 할당
- isHiddenHeader 이라는 변수를 설정하고
.includes메소드로 아까 지정한 배열 안에 현재 페이지 경로 (router.asPath) 가 존재하는지 유무를 boolean 값으로 할당되게 함- 특정 페이지에서 보이고 싶지 않은 요소에 조건부 렌더링을 지정하고, 이에 따라 현재 경로 (router.asPath) 가 배열 안의 값 중에 있으면 undefined를 반환, 그렇지 않으면 요소를 렌더링 해주게 됨
+활용해보기 2) App.js 안의 Apollo 구조 잡기
App.js
import "../styles/globals.css";
import { AppProps } from "next/app";
import Layout from "../src/components/commons/layout";
import ApolloSetting from "../src/components/commons/apollo";
import { Global } from "@emotion/react";
import { globalStyles } from "../src/commons/styles/globalStyles";
export default function App({ Component }: AppProps): JSX.Element {
// AppProps로 타입 정의
// ApolloSetting에 따로 담아서 보내고(props.children) => 다시 땡겨옴
// 위의 [컴포넌트 합성] 방식을 통해 코드 세팅을 간략하게 줄일 수 있음
return (
<div>
<div>====== 여기는 _app.js 컴포넌트 시작부분 입니다</div>
<ApolloSetting>
<>
<Global styles={globalStyles} />
<Layout>
<Component />
</Layout>
</>
</ApolloSetting>
<div>====== 여기는 _app.js 컴포넌트 마지막부분 입니다</div>
</div>
);
}ApolloSetting
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";
interface IProps {
children: JSX.Element;
}
export default function ApolloSetting(props: IProps): JSX.Element {
const client = new ApolloClient({
uri: "http://backend-practice.codebootcamp.co.kr/graphql",
cache: new InMemoryCache(), // 컴퓨터의 메모리(ram)에 백엔드에서 받아온 데이터를 모두 임시로 저장해두기
});
// prettier-ignore
return (
<>
<div>안녕하세요 영희입니다</div>
<ApolloProvider client={client}>
{props.children}
</ApolloProvider>
<div>안녕하세요 훈이입니다</div>
</>
);
}- 위와 같이 컴포넌트를 분리하고, 합성하는 방식을 활용하여 원래 App.js에 작성되어 있던 ApolloClient 세팅을 따로 분리하여 App.js 파일에
ApolloSetting이란 파일을 import 하는 방식으로 분리 가능
*코드의 간결화에 유리
글로벌 스타일 적용
Globalstyles 란 프로젝트 안의 모든 경로의 모든 컴포넌트에 적용되는 스타일, 즉 전역 설정되어 지정되는 스타일을 말함
*전역에 지정되는 것이기 때문에 _app.js 에 적용해 줘야 함
- 우선적으로 app.js 에서 Global을 import 한 다음, 속성값으로
styles={ }안에 styles 파일을 넣어 줌
- globalStyles 는 emotion 에서
css를 import 해 와서 작성해 줌
*특정 태그의 속성값으로 넣어주는 것이 아닌,styles={ }의 객체 안에 담길 값이니까 기본적인 css 형식으로 작성
globalStyles = css`* { }`안에 지정해 준 값들이 모든 컴포넌트에 일괄적용 됨 (전역설정)
*백 틱으로 감싸고 있어도 css 작성방식 그대로 { } 중괄호를 넣어줘야 함
[기존의 emotion styled 처럼 태그 자체의 속성으로 적용시키는 것이 아니기 때문]
폰트 적용
폰트는 웹폰트를 사용하거나 직접 다운받은 파일을 사용하는 2가지 방식으로 적용 가능
- 위의 경우처럼 public 폴더 안에 fonts 폴더를 새로 만들고 이 안에 적용시킬 font 파일들을 저장해서 사용 가능
- 다운받은 폰트를 직접 적용하는 방식의 경우,
@font-face { }안에 사용할 font의 이름 값(font-family)을 지정해주고, src 에 저장되어 있는 font 의 경로를 입력
- 이후 지정한 font를 사용하고자 하는 페이지의 style 부분에
font-family "지정한 폰트이름"을 입력하여 폰트적용 가능
+a) Sans-serif vs Serif
Sans-serif
- 모든 획의 글꼴 굵기가 같은 서체
Serif
- 가독성을 위해 글자에 장식되는 추가적인 획이 붙은 서체
+a) 폰트 적용 시 유의점
- 보통 로컬에서 브라우저에 접속하면 html, css 등등을 서버에서 다운받아 화면에 표출하게 됨
- 따라서 인터넷 환경에 따라 폰트 같은 용량이 큰 소스가 바로 렌더링 되지 않을 수 있음
*위 사진처럼, 기사에서 Not 이라는 문구만 나중에 띄워지게 될 경우 전달하는 정보의 오류를 유발할 수 있음!
[이런 문제를 방지하기 위해 압축률이 높은 폰트 혹은 서브셋폰트(경량화 폰트)를 사용해야 함]
- 압축률이 가장 높은 폰트의 확장자 => woff2 (우선적 사용)
- 서브셋폰트
-[FOIT] = 브라우저가 웹폰트 다운하기 전에 텍스트가 보이지 않는 방식
-[FOUT] = 브라우저가 웹폰트 다운하기 전에 텍스트가 대체 글꼴로 렌더링 되는 방식
