리액트와 Ant Design(AntD)로 시작하는 백오피스

백엔드 개발자지만 팀에 인력이 없어서 프론트엔드 업무도 같이 하고 있는데... 2022년 3월에 입사했으니 경력으로는 2년 반쯤 된 3년차 개발자가 되었지만 아직도 프론트엔드를 하면서 헷갈리는 부분이 많다. 지금까지는 그냥 백엔드 개발자니까 프론트 좀 못해도 되잖아~ 라던가 원래 이런거 다 따로 해야 하는거 아닌가? 내가 할 일은 아닌 것 같은데..라고 생각하면서 대충 해 온 감이 있지만 점점 만들어야 하는 화면이 커지고 중요해지면서 대충하기에는 리스크가 커지고 있다.

그렇다고 프론트엔드 개발자로 전향하고 싶다는 건 아니지만 최소한 지금 팀에서 쓰고있는, 그리고 앞으로도 비슷한 프로젝트를 할 때 사용하게 될 것 같은 기술 정도는 미리 익혀놔야 할 것 같다고 생각하게 되었다. 사실 유저들에게 바로 보이는 프론트엔드는 아니고 UI 라이브러리(우리 회사에서는 Ant사의 Ant Design, AntD를 사용하고 있다)로 디자인하는 어드민용 백오피스기 때문에 일반적인 프론트엔드와는 우선순위라던가 개발 측면에서 다른점이 있어서 프론트엔드 업무역량을 어필하기에는 애매한 부분이 있다.

그렇지만 기획 쪽에서 자주 요구되는 UI를 작성할 때 활용할 만한 컴포넌트라던지, 그걸 작성하면서 발생하는 리렌더링을 관리하고 상태관리, useEffect 등의 훅을 올바르게 쓸 수 있는 자바스크립트, 타입스크립트와 리액트의 기초를 다져보는 차원에서 직접 한번 만들어보기로 했다. 회사 코드에서 후회하던 점을 개선해볼 수 있다면 더 좋을 것이고...

설치

지금 이 글을 쓰고 프로젝트를 진행하려는 환경은 Linux Mint 21.3 Cinnamon 버전이다. 맥북에어는 있지만 안 켜다보니까 프론트 쪽은 세팅된 게 없어서 귀찮고 윈도우는 켜면 게임할 것 같아서 듀얼부팅으로 설치한 리눅스에서 진행하고 있다.

버전 관리

일단 회사에서 쓰던 리액트는 18, AntD는 5, Node.js는 18, Next.js는 12버전을 사용하고 있다. 회사에서는 맥북을 받아 쓰기 때문에 HomeBrew 등의 패키지 매니저를 써서 뚝딱 설치했던 것 같은데 사실 2년전에 했던거라 잘 기억이 안 난다. 하지만 대부분의 개발 패키지 종속성은 asdf라는 툴을 사용하고 있기 때문에 일단 이것부터 설치했다. 참고 설치링크

그러고 리액트 프로젝트를 만들어야 하는데 우리 백오피스는 클라이언트의 브라우저에서 돌아가는 SPA가 아니라 Next.js 애플리케이션이기 때문에 Nodejs로 설치해줘야 한다. Next.js 12버전의 프로젝트를 생성하려면 18 이상 버전의 Nodejs도 필요한데 이는 asdf를 이용해서 설치할 수 있다. 아래처럼 nodejs 플러그인을 등록하고 버전을 지정해서 로컬에 '개발환경'을 설치한 후 사용하고자 하는 프로젝트에서 ".tool-versions"라는 이름의 파일을 만들어서 그 환경을 갖다쓸 수 있다.

# 터미널 입력
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git
asdf install nodejs 18.20.4

# .tool-versions
nodejs 18.20.4

18버전 중 그나마 최신 마이너 버전으로 골랐다.

Next.js 12, TypeScript

그 다음에야 드디어 Next.js 앱을 설치할 수 있는데 이것도 지금 이 글을 작성하는 9월 29일 기준으로 최신 버전이 올라가서 그냥 튜토리얼에 나오는 것처럼 npx create-next-app@latest 하면 14 버전으로 설치된다. 그런데 12 버전과 그 이상은 라우팅, 캐시등 이것저것 바뀐 게 많아서 회사에서도 주류가 아니라 그냥 12 버전으로 진행하기로 했다.

# 터미널 입력
npx create-next-app@latest --typescript

# 설치 후 package.json 에서 의존성 다음처럼 내려주기
"next": "14.2.13" --> "next": "12.3.4"

# 초기화된 디렉토리
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.tsx
│   ├── api
│   │   └── hello.ts
│   └── index.tsx
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tsconfig.json

4 directories, 13 files

몰랐는데 그냥 create-next-app 하면 기본적으로 자바스크립트로 설치된다. 다행히(?) 우리 회사는 타입스크립트를 쓰고 있고 나도 자바스크립트 쓸 바에 타입스크립트를 쓰고싶기 때문에 뒤에 --typescript 옵션을 붙여주었다.

그것 외에도 npm 대신 yarn 패키지 매니저를 사용한다던지 하는 사소한 차이가 있긴 한데 지금 하려는 것에 크게 영향을 미치지 않기 때문에 건너뛰었다.

Ant Design

회사에서 일하면서 흰머리 우수수 나게 만든 주범인 UI 라이브러리 AntD도 설치해야 한다. 우리 팀에서 관리하는 프로젝트는 두 개가 있고 둘 다 AntD를 쓰는데 하나는 2버전, 하나는 5버전을 사용하고 있다. 두 개를 비교해보면서 느낀 점은 버전이 올라갈수록 편해지긴 하지만 극단적으로 달라지기 때문에 나중에 프로젝트를 최신 버전으로 업그레이드하려면 고통스럽겠다는 것이다. 다행히 우리는 5버전부터 시작할 수 있다.

이 라이브러리를 쓰면서 놀랐던 게 Ant 그룹을 들어봤으면 눈치챘겠지만 중국에서 만든 라이브러리다. 그러면서도 영어 지원을 완벽하게 해주고 있다. 중국인들이 영어를 써주는 일은 거의 없기 때문에(자주 하는 게임상에서 겪은 경험에 기반한 편협한 의견이다) 정말 고마운 일이고 설치도 링크처럼 패키지 매니저별로 친절하게 알려주고 있다.

# 터미널 입력
npm install antd --save

# 등록된 의존성
  ...
  "dependencies": {
    "antd": "^5.21.1",
    "next": "12.3.4",
  ...

이렇게만 하면 바로 컴포넌트를 사용할 수 있다.

import { Table } from "antd";

const Ant = () => {

    return (<>
        <Table columns={[...]} dataSource={[...]} />
    </>);
}

export default Ant;

실험삼아 자주 사용하는 Table 컴포넌트를 그려보았다.

Tailwind CSS

프론트엔드에는 CSS를 적용하는 방법이 참 많다고 한다. 우리 회사도 예외는 아니어서 직접 스타일을 입력하는 부분도 있고 styled component, SCSS, Tailwind 등을 사용하는 곳도 있다. 그 중에서 최근에 프로젝트를 진행하면서 자주 다뤄본게 Tailwind CSS인데 CSS 프로퍼티에 대한 값을 미리 템플릿으로 지정해놓고 클래스이름으로 참조하면서 사용하는 방식이 간결해서 마음에 들었다. 기존의 장황한 CSS보다 훨씬 더 가독성있기도 하고... 어쨌든 공식 문서에서는 Next.js에 설치하는 경우를 위한 잘 작성된 가이드를 제공하고 있다.

# 터미널에 입력
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

# tailwind.config.js에 설정값 등록
  ...
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  ...

이렇게 등록하면 컴포넌트의 className 프롭스에 Tailwind에서 정의한 클래스 명을 적는 것만으로도 CSS 스타일을 등록할 수 있다!

const Welcome = () => {
    return (
        <div>
            <h1 className="text-3xl underline">HELLO WORLD!</h1>
            <p>project with Next.js 12 and Ant Design 5</p>
        </div>
    )
}

export default Welcome;

마무리

사실 그냥 npm install 만 입력할 줄 알았는데 버전 지정부터 시작해서 라이브러리 적용, 테스트까지 이상한 부분에서 시간을 잡아먹어서 오래걸렸다. 회사에서 개발할 때는 프론트엔드 팀원이 세팅해준 환경에서 페이지 별 화면, 컴포넌트만 만드느라 몰랐는데 생각보다 초기 세팅이 번거롭다.

물론 자바스크립트 진영에서 제대로 개발해본 적이 없으니 어쩔 수 없는 것 같다. 오늘은 여기까지!