기술 스택

라이브러리

• React
  • VirtualDOM 사용
    • DOM은 페이지가 바뀔 때 마다 새 HTML을 불러와서 DOM 전체를 렌더링하게 되는데 React에서는 실제 DOM이 아닌 가상 DOM을 사용하여 실제DOM과 비교해서 달라진 부분만 찾아내서 UI 업데이트를 처리하기 때문에 최소한의 DOM 조작이 가능합니다.
  • 컴포넌트 기반
    • 특정 기능 혹은 UI를 독립적인 단위인 컴포넌트로 분리하여 재사용과 유지보수가 용이하며 컴포넌트 들을 조합하여 복잡한 UI를 구성할 수 있습니다.
  • 단방향 데이터 흐름
    • 리액트는 데이터의 흐름을 단방향으로 유지합니다. 양방향 바인딩은 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주어 동시에 업데이트 되지만 단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트하기 때문에 UI가 복잡해져도 성능저하 없이 DOM을 렌더링 할 수 있습니다.
• TypeScript
  • 자바스크립트에서는 선언할 때 타입을 지정해주지 않기 때문에 코드가 동작하면서 암시적 형 변환이 일어날 수 있습니다. 이런 의도치 않은 동작을 방지하기 위해 TypeScript를 사용해서 타입을 지정해 줄 수 있으며 에러가 발생하면 컴파일 과정에서 알 수 있습니다. 이로 인해 런타임에서 발생할 수 있는 에러가 상당부분 줄어들게 됩니다.
  • 타입스크립트를 사용하면 변수의 이름뿐만 아니라 그 데이터의 타입까지 알 수 있기 때문에 코드를 직관적이게 만들어줍니다. 또한 객체의 속성을 IDE가 자동으로 리스트업 해주기 때문에 코드를 작성하기 편해집니다.

상태관리

• Recoil
  • Recoil은 기존의 리액트 프로젝트에서 사용되던 상태 관리 라이브러리에 비해 더 간단하게 상태 값을 관리할 수 있습니다. 같은 상태관리 라이브러리인 Redux와 비교하면 같은 기능을 하는 코드이지만 코드의 양은 확연히 줄어드는 것을 확인할 수 있습니다. (코드 예시 추가 필요)
  • 비동기 데이터를 처리하는 데도 유용하며, 상태 업데이트를 처리하는데 필요한 보일러플레이트 코드가 없고 전역상태의 설정/정의가 매우 쉬우며, Recoil이 지원하는 Hooks로 이를 get/set 하기 때문에 React 문법과 매우 유사하여 러닝커브가 낮고 코드 작성 시간을 줄일 수 있습니다.
  • Redux vs Recoil 비교 코드

    • Redux

      // Redux 액션 타입 정의
      const INCREMENT = 'INCREMENT';
      
      // Redux 액션 생성자
      const incrementAction = () => ({
        type: INCREMENT,
      });
      
      // Redux 리듀서
      const initialState = { count: 0 };
      
      const rootReducer = (state = initialState, action) => {
        switch (action.type) {
          case INCREMENT:
            return { ...state, count: state.count + 1 };
          default:
            return state;
        }
      };
      
      // Redux 스토어 생성
      import { createStore } from 'redux';
      import { Provider, connect } from 'react-redux';
      
      const store = createStore(rootReducer);
      
      // Redux 컴포넌트
      const Counter = ({ count, dispatch }) => (
        <div>
          <p>Count: {count}</p>
          <button onClick={() => dispatch(incrementAction())}>Increment</button>
        </div>
      );
      
      // Redux 컴포넌트를 스토어에 연결
      const ConnectedCounter = connect((state) => ({ count: state.count }))(Counter);
      
      // Redux 앱 렌더링
      ReactDOM.render(
        <Provider store={store}>
          <ConnectedCounter />
        </Provider>,
        document.getElementById('root')
      );

    • Recoil

      // Recoil 상태 정의
      import { atom, useRecoilState } from 'recoil';
      
      const countState = atom({
        key: 'countState',
        default: 0,
      });
      
      // Recoil 컴포넌트
      const Counter = () => {
        const [count, setCount] = useRecoilState(countState);
      
        const increment = () => {
          setCount(count + 1);
        };
      
        return (
          <div>
            <p>Count: {count}</p>
            <button onClick={increment}>Increment</button>
          </div>
        );
      };
      
      // Recoil 앱 렌더링
      ReactDOM.render(
        <RecoilRoot>
          <Counter />
        </RecoilRoot>,
        document.getElementById('root')
      );

API 요청

• axios

  HTTP 비동기 통신 라이브러리로, API 요청과 같은 네트워크 요청에 사용합니다.

  XML기반이며 PromiseAPI를 지원합니다. axios는 데이터를 바로 전달해주기 때문에 별도의 JSON 파일 변환이 필요 없습니다.

  axios가 제공하는 interceptors(인터셉터)를 사용하면 네트워크 요청이 처리 되기 전 요청과 응답을 가로채어 별도의 처리를 할 수 있습니다(네트워크 요청 취소, 응답시간 초과 설정 등)

  400, 500번 대 에러 발생 시 catch문을 통해 에러를 잡을 수 있습니다. (400, 500에러에 대한 예외처리 필요 없음)

• react-query

  • React Query는 데이터 요청, 변경에 관련된 코드를 단순화 시켜 줍니다. 이를 통해 서버와의 데이터 요청과 응답을 처리하는 코드를 작성하는 시간을 줄일 수 있고 애플리케이션의 성능을 향상시키고 유지보수성을 높일 수 있습니다.
  • React Query는 데이터를 캐싱하고 캐시된 데이터를 사용하여 중복된 요청을 방지하고 불필요한 API 콜을 줄여 애플리케이션의 성능을 향상시킬 수 있습니다.

디자인, 스타일링

• emotion

  CSS-in-JS 라이브러리 중 하나입니다. 스타일이 컴포넌트의 일부가 되어 스타일과 컴포넌트간 매핑하지 않습니다. class명 대신 prop을 사용하여 상태에 따라 css를 바꿀 수 있습니다. styled-component가 곧 컴포넌트기 때문에 단위 테스트가 가능합니다.

• Figma UI

  UI 디자인 제작 툴이며, 팀원들과 디자인을 실시간으로 공유할 수 있습니다 개발자가 참조 가능한 개발 툴바를 제공하여 디자이너와 개발자의 소통에 효과적이며, 별도의 가이드 라인 없이도 개발자가 디자인 수치 들을 확인할 수 있습니다.

번들러

• Vite
  • 빌드 도구 중 하나 입니다.
  • Dependencies(패키지)와 Source code(소스 코드)를 분리하여 빌드하기 때문에 개발 서버의 시작 시간이 다른 번들러에 비해 월등히 빠릅니다.