다시 프론트 틀잡기 #2 next에 antd 설치하기

Prologue

맨땅에서 무언가 만들어보자! 블로그 만들기는 예전부터 계속 하던 프로젝트인데 벌써 2번의 블로그를 만들었다가 맘에 안들어서 갈아 엎은 경험이 있다! 이번에는 예전보다 '낫게' 블로그를 만들어보자.

antd 설치하기

antd란 디자인된 컴포넌트를 마음대로 갖다쓸 수 있는 좋은 도구이다.
'부트스트랩'을 써본 사람이면 익숙할 것이다.

디자인에 잼병인 개발자들을 도와준다.

사실 예전에 next.js를 처음할 때는 antd라는 디자인 툴에 대한 초기세팅을 하는데도 어려움을 많이 겪었다. 왜냐하면 next.js의 구조를 몰랐기 때문이다.

삽질하기 전에 이 글을 먼저 접해서 antd를 설치하게 되는 방법을 배운다면, 당신은 행운아이다.
next.js에 antd를 설치해보자.

1. next.js가 sass와 less를 받아들일 수 있게 만들기

next.js가 less를 받아들이게 하려면 webpack에서 관련설정을 해주어야 한다. next.js 프레임워크에서는 next.config.js파일에 webpack과 관련된 설정을 입혀줄 수 있다. next.config.js 파일은 우리가 수동으로 프로젝트의 루트 디렉토리에 만들어주어야 하는 파일이다. 이 파일이 없으면 웹팩은 next.js의 기본 설정값으로 구동된다.

next.config.js는 아주 많은 기능을 한다. 공식문서 참조

먼저, 필요한 패키지를 몇개 설치하자.

yarn add @zeit/next-less less
yarn add sass

이렇게 두개의 패키지를 설치하면 된다.

next.config.js파일 작성하기

const withLess = require('@zeit/next-less');

// fix: prevents error when .less files are required by node
if (typeof require !== 'undefined') {
  require.extensions['.less'] = file => {};
}

module.exports = withLess({
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
});

이렇게 하면 next.js가 webpack을 이용하여 less와 sass를 읽어들일 수 있게 된다.

참고로 sass는 next.js 9.3버전부터 기본으로 지원하여 따로 패키지(@zeit/next-sass)를 설치할 필요가 없어졌다.

sass패키지만 설치해주면 된다.

next.js 9.3 sass 기본 지원 링크 참조

2. antd 설치하기

antd 설치는 간단하다.

yarn add antd

끝.

참고로, typescript를 써도 @types/antd 패키지는 설치하지 않아도 된다.

@types/antd를 설치하지 않아도 되는 이유 공식문서 참조

3. _app.tsx에 적용하기

next에서 _app.tsx는 보통 모든 페이지에 적용할 내용을 코딩할 때 사용한다. 일반적으로 전역에서 쓰는 redux와 같은 스토어나 antd와 같은 전역에서 쓰는 컴포넌트 등이 있다면 _app.tsx에서 추가해놓는 것이 좋다.

pages디렉토리 아래에 _app.tsx파일을 생성하고 아래의 내용을 작성하면 된다.

import React from 'react';
import App from 'next/app';
import '../css/antd.less';

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

export default MyApp;

루트 디렉토리에 css 폴더를 추가해주고 antd.less 파일도 만들어주자.

내용은 다음과 같다.

@import '~antd/dist/antd.less';
@primary-color: #c02428;

여기서 primary-color 색상 변수를 무엇으로 설정하냐에 따라 테마가 달라지는데,
내 경우에는 빨간색으로 해보았다.

4. 잘 되나 테스트해보기

테스트를 위해 index.tsx의 내용을 다음과 같이 변경해보자.

5. 결과 확인

브라우저에서 확인 결과 스타일이 제대로 입혀진 것을 확인할 수 있다.

끝.