팀 프로젝트에서 (야매)
Typography시스템을 만들고나서의 회고.
언어별 폰트를 다르게 렌더한다
디자이너: "한글은 프리텐다드로 해주시고, 나머지는 로보토 폰트로 렌더링 해주세요(개발 부탁해요)"
개발자: '...'
이제껏 폰트를 깊게 고민하거나, 제대로 된 CSS시스템을 설계해본적이 없는데, 이번 팀 프로젝트에는 두 개의 폰트를 쓰고 있었고 언어별로 다르게 렌더링이 되어야 했다(위와 같은 상황)
@font-face의 기본 스펙
@font-face {
font-family: '내가 쓸 폰트이름_보통 폰트 홈페이지에 기재되어있다';
font-weight: 900;
font-display: swap;
src: local('컴퓨터에 있다면 가져다 쓸 폰트 이름'),
url('../fonts/woff2/Pretendard-Black.woff2') format('woff2'),
url('../fonts/woff/Pretendard-Black.woff') format('woff');
/* 유니코드 레인지로 이 폰트를 지정해줄 범위를 적어준다 */
unicode-range: U+AC00-D7A3;
}쓸만한 범위들
한글 범위: U+AC00-D7A3
영어 대문자 범위 : U+0041-005A
영어 소문자 범위 : U+0061-007A
숫자 범위 : U+0030-0039
특수 문자: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E
유니코드 레인지는 위의 특수 문자처럼 쉼표로 구분하여 여러가지를 지정할 수 있다
createGlobalStyle에 CSS 넣기
'글로벌스타일 내부에서
import하면 끝이지~(아님)'
Please do not use @import CSS syntax in createGlobalStyle at this time, as the CSSOM APIs we use in production do not handle it well. Instead, we recommend using a library such as react-helmet to inject a typical
<link>meta tag to the stylesheet, or simply embedding it manually in your index.html<head>section for a simpler app.
import구문 쓰지마라. 우리가 쓰는 프로덕션 과정에서 이거 핸들링하기 어렵다. 이 문구를 보고도 쓰고 싶거든 리액트 헬맷과 같은 라이브러리로<link>태그 주입해라 아니면 그냥 html에서 link써라...
그러고 싶지 않은 이유는 단 하나, 고작 폰트 적용시키는데 라이브러리를 또 쓰기는 싫었다
export시키는 createGlobalStyle 코드 상단에서 import
너무 어지러운 찰나에 vite 공식문서를 읽던 중 반가운 부분이 보였다
페이지 내 CSS 주입 비활성화하기
import './foo.css' // 페이지에 스타일이 추가됨 import otherStyles from './bar.css?inline' // 스타일이 추가되지 않음
그렇단 얘기는 css파일은 불러오기만 해도 페이지(혹은 컴포넌트)에 스타일이 주입 된다는 얘긴가?
그러면
폰트css를createGlobalStyle코드 상단에서 불러와 글로벌 컴포넌트에 주입시키면 되지 않을까?
결과적으로는 되더라..
// lib/foundation/index.ts
import { createGlobalStyle } from 'styled-components';
import './Typography/FontFamily/font.css';
/** Foundation 글로벌 스타일 */
export const FoundationStyles = createGlobalStyle`
${ColorStyles}
`;
// App.tsx
import { FoundationStyles, LayoutStyles, TypographyStyles } from '@lib/foundation';
import './App.css';
function App() {
return (
<>
<FoundationStyles />
<LayoutStyles size='tablet' system='android'>
<TypographyStyles.Body1 as={'h2'}>Hello World</TypographyStyles.Body1>
</LayoutStyles>
</>
);
}
export default App;무사히 한글은 프리텐다드 폰트가, 그외에는 로보토가 적용이 된걸 확인했다
git은 항상 복잡하다
git remote update
모든 원격 브랜치를 업데이트하여 최신 상태로 갱신한다. 하지만, 로컬에서 변동 사항을 병합하지는 않는다.git fetch
현재 위치하고 있는 원격 브랜치만 업데이트한다. 하지만, 로컬에서 변동 사항을 병합하지는 않는다.
all 옵션을 주면 모든 원격 브랜치를 업데이트할 수 있다.git pull
현재 위치하고 있는 원격 브랜치를 업데이트하고 로컬에서 변동 사항을 병합한다.
로컬 브랜치를 업데이트할 때 사용한다.
기본적으로 텍스트 콘텐츠 태그와 스타일을 지정하고, 개발자가 원하는 태그를 동적으로 렌더한다
왜 이런 고민을 하게 된거지?
분명 나는 픽셀과 줄높이, 폰트두께를 디자인 시스템에서 정의된 스타일을 지정하고 싶은데 태그가 하나로 고정이 되어있다면 의미있는 html구조가 아니게된다
그렇다고 생성할 때 마다 태그를 입력 받는것은 개발자에게 너무 귀찮은 일이다
어느정도 의미를 고려한 태그를 기본 제공하되, 스타일만 가져다쓰고 태그는 다른 태그를 쓰고 싶을 때는 styled-components의 as라는 prop을 쓰면 된다
Styled-components의 기본 스펙
import styled from "styled-components";
const Component = styled.div`
color: red;
`;
function App() {
// ...codes...
return (
<>
<Component as="button" onClick={() => alert('It works!')}>
Hello World!
</Component>
</>
)
}분명 스타일드 컴포넌트로 div태그를 생성했지만, 실제로는 as로 넘겨준 값인 button이 렌더링 된다
출처 - 스타일드 컴포넌트 공식 문서(API reference)
styled-componentsas
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
많은 도움이 되었습니다, 감사합니다.