🎁 Gift MBTI - 2. Result 페이지 시작(Emotion theme 적용, SEO 최적화 )

zaman·2022년 9월 27일

Toy Projects

목록 보기

2/6

Emotion

이번 프로젝트에선 emotion으로 스타일링을 하기로 했는데 특별한 이유가 있던 것은 아니고 그냥 다들 많이 쓰길래 사용해봤다.
한 번도 사용해본적 없는 라이브러리라 걱정했는데 웬걸 그냥 문법이 styled-components랑 똑같았다!

찾아보니 둘 다 CSS-in-JS에 sass 문법을 사용해서 차이를 못느꼈던 것이다.

CSS-in-JS
: JS 안에서 css코드를 관리
css 코드를 변수로 관리할 수 있으며 동적으로 css 코드를 작성하기 쉽다는 장점이 있음

emotion이 styled-components보다 조금 더 가볍고 빠르다고 한다. 그리고 SSR에서 emotion은 별도 설정 없이 동작하지만 Styled-components는 ServerStyleSheet 설정을 해야한다고 한다.

참조 블로그: https://intrepidgeeks.com/tutorial/whats-the-difference-between-a-styled-component-and-emotion

그럼 emotion이 뭔지도 알아봤으니 이제 사용해보도록 하자

1. emotion 설치하기

yarn나 npm 중 편한걸로 골라쓰면 된다. 단 혼용은 피하자!

yarn add @emotion/react
yarn add @emotion/styled
또는
npm install --save @emotion/react
npm install --save @emotion/styled

2. Emotion theme 설정하기

테마 설정도 간단하다
먼저 TypeScript를 사용하고 있으므로 emotion.d.ts에서 필요한 색과 폰트 타입을 지정한다.

import '@emotion/react';

declare module '@emotion/react' {
  export interface Theme {
    color: {
      purple: string;
      // ...
      skyblue: string;
    };
    
    font: { main: string };
  }
}

최상위 파일 _app.tsx에서 ThemeProvider를 적용시켜준다.
이렇게 해야 하위 컴포넌트들이 테마에 접근할 수 있다. → css prop

reset.ts에서 html 기본 스타일을 없애고 새로운 스타일을 글로벌 스타일로 적용했다.

import type { AppProps } from 'next/app';
import { css, Global, ThemeProvider } from '@emotion/react';
import reset from '../styles/reset';
import theme from '../styles/themes';

const MyApp = ({ Component, pageProps }: AppProps) => {
  return (
    <ThemeProvider theme={theme}>
      <Global
        styles={css`
          ${reset}
        `}
      />
      <Component {...pageProps} />
    </ThemeProvider>
  );
};

export default MyApp;

그리고 theme.tsx 에서 상세 색과 폰트 값을 지정한다

import { Theme } from '@emotion/react';

const color = {
  purple: '#9268EC',
  // ...
  skyblue: '#93D8FF',
};
const font = { main: 'Pretendard' };

const theme: Theme = {
  color: {
    purple: color.purple,
    // ...
    skyblue: color.skyblue,
  },
  font: { main: font.main },
};

export default theme;

이제 원하는 장소에서 사용하면 끝

사용은 이런식으로!
color: ${(props) => props.theme.color.skyblue};

SEO

첫 SSR 프로젝트다보니 SEO에 신경을 많이 쓰고 싶었다. 또 열심히 만들 플젝이 묻히면 아쉬우니까ㅎㅎ

검색엔진최적화(SEO)
: 검색엔진이 자료를 수집하고 순위를 매길 때 태그를 기반으로 검색 키워드 우선순위를 파악하기 때문에 목적에 부합한 태그를 사용해야 검색 결과 노출에 유리 (Div에서 벗어나기)

크롬 개발자도구의 Lighthouse의 SEO 100점을 목표로 탭 제목를 mbti type에 따라 변경해 보았다.

탭 제목 변경은 SEO에 맞게 사이트를 최적화하는 방법 중 하나기도 하고 여러 탭을 열어두었을 때 브라우저 표시줄에서 관련 사이트를 빠르게 식별하는 데 도움이 된다.

탭 제목을 변경하는 방법도 짱 간단하다
seo.tsx

import Head from 'next/head';

interface IType {
  type: string;
}

const SEO = ({ type }: IType) => {
  return (
    <Head>
      <title> {type} | Gift MBTI</title>
    </Head>
  );
};

export default SEO;

import Head from 'next/head';은 서버로 부터 <head>태그를 받아 와준다

Head에 대해 더 궁금하다면 아래 블로그를 참조해봐도 좋을 것 같다!
https://velog.io/@cyranocoding/NEXT-HEAD-%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC

사용할 땐 원하는 페이지에서 import해 사용하면 된다

 <SEO type={type} />

이렇게 기본 설정을 해두고 스타일링을 진행했는데 디자이너와 협업하는 만큼 예쁜 웹이 완성되지만 그만큼 스타일링도 어려웠다.
그래도 완성된 페이지를 보면 뿌듯하다ㅎㅎ
빨리 완성해서 친구들한테 뿌리고 싶다!

zaman

개발자로 성장하기 위한 아카이브 😎

이전 포스트

🎁 Gift MBTI - 1. Next.js 프로젝트 세팅, ESLint(airbnb), Prettier 설정

다음 포스트