프론트엔드 기술 스택

1. 스타일링 도구: emotion/react

선정 이유

1. 팀원의 익숙함

   프론트엔드 팀원 3명 중 2명이 레벨2에서 emotion을 사용한 경험이 있었어요. 나머지 1명도 레벨2에서 styled-component의 경험은 있었고 emotion을 경험해보고 싶어 했어요. 이를 통해 팀 차원에서 프로젝트 초기 단계부터 빠르게 적응할 수 있을 것이라 판단했습니다.

2. 풍부한 정보

   emotion은 스타일링 도구 중 점유율이 높아요. 이로 인해 정보를 얻고 학습하기 용이할 것이라 판단했습니다.

3. 동적 스타일링

   JS 문법을 활용해 자유롭게 스타일링을 적용할 수 있어 동적 스타일링이 편리해요. 이를 통해 동적 스타일링 분기 처리를 스타일링 단으로 분리할 수 있어 컴포넌트의 가독성이 향상될 것이라 판단했습니다.

   import { css } from '@emotion/react';
   
   export const containerStyle = (isDarkMode) => css`
     background-color: ${isDarkMode ? '#333' : '#f0f0f0'};
     color: ${isDarkMode ? '#fff' : '#333'};
   `;
   
   ---
   
   import React from 'react';
   import { containerStyle } from './styles';
   
   function Component({ isDarkMode }) {
     return <div css={containerStyle(isDarkMode)}>Hello, Emotion!</div>;
   }
   
   export default Component;

   .container {
     background-color: #f0f0f0;
   }
   
   .containerDark {
     background-color: #333;
   }
   
   ---
   
   import React from 'react';
   import styles from './styles.module.css';
   
   function Component({ isDarkMode }) {
     return (
       <div className={isDarkMode ? styles.containerDark : styles.container}>
         Hello, CSS Modules!
       </div>
     );
   }
   
   export default Component;

   $background-color-light: #f0f0f0;
   $background-color-dark: #333;
   $text-color-light: #333;
   $text-color-dark: #fff;
   
   .container {
     background-color: $background-color-light;
     color: $text-color-light;
   }
   
   .container-dark {
     background-color: $background-color-dark;
     color: $text-color-dark;
   }
   
   ---
   
   import React from 'react';
   import './styles.scss';
   
   function Component({ isDarkMode }) {
     const className = isDarkMode ? 'container-dark' : 'container';
     return <div className={className}>Hello, SASS!</div>;
   }
   
   export default Component;

4. 유연한 스타일링

   emotion의 css prop 방식의 스타일링을 통해 여러 스타일을 유연하게 결합할 수 있어요. 이러한 특징을 활용해 스타일링 코드를 더 직관적이고 유연하게 만들 수 있을 것이라 판단했습니다.

   import { css } from '@emotion/react';
   
   const baseStyle = css`
     padding: 10px;
     border-radius: 5px;
   `;
   
   const styles = {
     primary: css`
       background-color: blue;
       color: white;
     `,
     secondary: css`
       background-color: gray;
       color: black;
     `
   };
   
   export default function Button({ theme }) {
     return (
       <button css={[baseStyle, styles[theme]]}>
         Click me
       </button>
     );
   }

---

2. 상태 관리 도구

서버 상태 관리

선정 결과: react-query (tanstack-query)

선정 이유:

비동기 서버 상태 페칭, 캐싱, 업데이트 작업을 쉽게 관리하기 위해 서버 상태 관리 도구를 사용하기로 결정했습니다.

팀원 모두 레벨2 과정에서 react-query를 경험해보았어요. swr과 react-query 두 가지 선택지가 있었지만, 기본적으로 두 가지 도구 모두 기능이 유사하기 때문에 이미 경험해본 react-query를 사용하는 것이 프로젝트에 빠르게 적용하는 데 도움이 될 것이라 판단했습니다.