Portfolio

기본편

스타일링 라이브러리 (Tailwind 등)

Tailwind

2차팀에서는 동적 스타일링이 필요한 일부 경우 inline style을 사용했습니다.
CSS-in-JS를 사용할 때보다 확실히 빠르다고 느꼈어요.
className, 컴포넌트명을 짓는 시간을 아낄 수 있고, 따로 파일을 분리하여 스타일을 작성하지 않아도 된다는 점이 좋았습니다.

vanilla-extract

zero-runtime CSS-in-JS (CSS Modules-in-TypeScript)
아직 많이 쓰이진 않아서 정보가 많지 않을 것 같고, Tailwind가 좀 더 안정적일 것 같아요!

질문 답변

inline style 쓴 코드


// div의 style 속성을 보시면 됩니다!

const Group = ({
  direction = 'rows',
  position = 'left',
  align = 'start',
  inline = false,
  grow = false,
  spacing = 'md',
  noWrap,
  className,
  children,
  ...props
}: GroupProps) => {
	// getSpacing은 spacing이 'sm', 'md', 'lg'일 때 숫자로 변환해주는 함수입니다.
  const groupSpacing = getSpacing(spacing); 

  return (
    <div
      className={cn(
        groupVariants({
          direction,
          position,
          align,
          inline,
          noWrap,
          grow: grow && !inline,
        }),
        className,
      )}
      style={{ gap: groupSpacing }}
      {...props}
    >
      {children}
    </div>
  );
};

export default Group;

vanilla-extract 코드


// CSS-in-JS로, styled-components와 사용법이 매우 유사합니다.
// 기존 CSS-in-JS의 문제점은 런타임에 코드가 해석되기 때문에 성능이 저하된다는 것인데, 이 라이브러리는 zero-runtime입니다.
import { style, globalStyle } from '@vanilla-extract/css'

export const myStyle = style({
  display: 'flex',
  paddingTop: '3px',
})

globalStyle('body', {
  margin: 0,
})

UI Framework (Material-UI, Bootstrap 등)

UI 프레임워크를 사용하면 개발 기간이 많이 단축될 듯 합니다!

shadcn or daisy

재사용할 컴포넌트가 많지 않다면 저희가 직접 디자인 시스템을 만들어보는 것도 좋은 경험일 것 같아요 ㅎㅎ

전역 상태 관리 (Redux, RTK, Zustand, Recoil 등)

클라이언트 상태 관리가 필요해진다면 Zustand를 사용하고 싶어요!

사용이 매우 간편해보입니다.
Recoil은 React 친화적이지만, 개발자 이탈률이 커지고 있고 버전 릴리즈 주기가 느린 편이어서 이슈가 되었다고 합니다. 관련글 링크

서버 상태 관리 (React-query / swr / 미사용 등)

간단하게 데이터 가져오기는 useSWR이 좋고, 데이터 캐싱 등에 세밀한 제어가 필요할 땐 React-query가 좋다고 합니다.

React-query

안정성을 위해 라이브러리를 사용하면 좋다고 생각해요.
캐싱, 비동기 처리(무한 스크롤, 비동기 처리 상태, …)를 위한 도구를 제공하는 점도 좋습니다!

메타 프레임워크 (Next / Remix / 미사용)

어떤 서비스를 만들 것인지 모르는 상태에서 Next.js 사용을 논할 수 있을까?

첫 화면 로딩이 오래 걸리는 애플리케이션인지
검색 엔진 최적화가 꼭 필요한지
트래픽이 몰릴 수 있는 서비스는 아닌지

⇒ 프레임워크를 사용하지 않고 React를 쓰고싶긴 하지만, 충분한 이유를 붙일 수 있다면 학습 차원에서 Next.js를 사용하는 것도 좋습니다😄

약간 고급편

컴포넌트 문서화 도구 (Storybook 등)

Storybook은 컴포넌트에 국한되지 않고, UX 관련 규칙을 모두 포함하는 도구입니다. ex) 로딩을 컨테이너 단위로만 한다

페이지 주소에서 파라미터나 쿼리를 가져오는 작업이 있을 땐 라이브러리를 추가로 설치해야 합니다. storybook-addon-react-router-v6

test용으로 도입한다면 chromatic으로 배포하여 쓰는 것이 좋습니다.

⇒ 사용하면 조금 번거로워지지만(추가적인 라이브러리 설치, storybook 파일 생성, …) 디자인 시스템을 남길 수 있다는 점에서 사용하면 좋겠습니다.

번들러 (Vite, Webpack 등)

React를 사용한다면 성능(속도)만으로도 Vite를 선택해야 한다고 생각해요.

개발 환경에서도, 운영 환경에서도 속도가 빠르다고 합니다.

Next를 사용한다면, 12.3부터 SWC 빌드 툴을 안정화했다고 합니다.

적용 방법

✨

SWC(Speedy Web Compiler)

Rust 기반의 고성능 자바스크립트/타입스크립트 컴파일러

패키지 매니저 (npm, pnpm, yarn legacy, yarn berry 등)

yarn berry or pnpm

두 패키지 매니저 모두 유령 의존성을 해결한다는 점에서 npm, yarn 1사용보다 좋습니다!

테스트 도구 (react-testing-library, playwright, Storybook 등), 테스트 러너 (jest / vitest 등)

테스트는 도구를 써본 경험이 거의 없어서 어렵네요..

Vite를 쓴다면 vitest를 쓰면 될 것 같고, 아니라면 react-testing-library + jest 사용

고급편

배포 방식 (Vercel, AWS S3, OpenNext 등)

Vercel

간편하기 때문에 시간과 비용 절감할 수 있습니다.
Next를 쓴다면 더 좋을 듯!

최희라

기본편

약간 고급편

고급편