프로젝트를 통한 배움 - (6)

응애 나 프론트애긔👶·2023년 1월 2일

타입스크립트 마이그레이션

내가 생각하는 타입스크립트

프로젝트를 할 때 기술 선택에 있어 4명의 팀원 중 나를 3명은 타입스크립트를 1명은 자바스크립트를 사용하기를 선호했다.

우리가 생각한 타입스크립트의 사용 이유는 다음과 같다.

의도치 않은 타입이 들어와 에러를 일으키면 찾기 어렵다.

채용 시장 및 현업에서 타입스크립트는 선택이 아닌 필수가 되었다.

어렵다고 생각할 수 있지만 타입스크립트의 환경을 경험 하는 것만으로도 충분한 의미가 있다.

다른 한 분의 타입스크립트 사용의 반대하는 이유는 다음과 같다.

러닝커브가 우려된다.

타입스크립트에서의 에러로 인한 프로젝트 기간이 늘어날 거 같다.

두 쪽 의견 모두 일리가 있는 이야기였으며 프로젝트의 데드라인 또한 중요하다고 여겨 자바스크립트로 프로젝트를 진행하기로 했다.

속도를 내지 못하는 프로젝트

아쉽게도 마크업 단계와 기능 구현 단계에 있어 프로젝트 개발에 속도는 꽤나 늦어졌다.
연말이라 약속을 잡는 것도 있고 취업 준비라는 상태가 개개인의 의욕을 갉아 먹는듯 했다.

이러한 와중 필자가 면접에서 타입스크립트에 대한 면접 질문을 받고 이를 팀원들에게 공유했었다.

🙂: 최근 면접에서 타입스크립트 사용 경험에 대한 질문들이 많이 나온다. 기술이 점차 빠르게 바뀌어가면서 신입의 취업 허들 또한 높아짐으로 맞춰서 성장해야 할 필요가 있다.

또한 면접 과정에서 타입스크립트와 자바스크립트를 섞어서 사용 할 수 있다는 이야기을 듣게 되었다.

😏: 면접관님께서 타입스크립트와 자바스크립트를 섞어서 사용 할 수 있다고 하셨는데 저희도 그렇게 프로젝트를 타입스크립트로 점차 변경면 어떨까요 ?

다행히 모두 그 의견에 동의했고 타입스크립트로 마이그레이션 작업을 했다.

타입스크립트 셋팅

먼저 타입스크립트 개발환경을 셋팅했다.

첫번째로 타입스크립트 패키지들을 설치 해야 하는데 어떠한 라이브러리가 있는지는 아래 사이트에서 찾으면 손쉽게 찾을 수 있다.
https://www.npmjs.com/package

해당 사이트에서 @types/[라이브러리이름]으로 검색을 하면 맞는 패키지를 찾을 수 있다.

이렇게 타입스크립트 패키지들을 설치했다면 다음으론 ESlint에서 타입스크립트 설정을 바꿔주어야 한다.

// eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es6: true,
    node: true,
  },
  // typescript parser 및 plugins, extends
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'prettier'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'eslint:recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  rules: {
    'react/prop-types': 'off',
  },
  // JSX 에러로 인한 글로벌로 JSX: true 설정
  globals: {
    JSX: true,
  },
};

이렇게 ESlint까지 개발 환경 셋팅을 맞추게 되면 드디어 타입스크립트를 사용 할 수 있게 된다.

Styled-Component + TypeScript

기존 다크모드를 구현 할 때 Styled-Component에 Props를 전달하여 색상을 변경하였는데 해당 Props에도 타입을 주어야한다.

interface Theme {
  themeMode: boolean;
  themeColorObject: {
    darkMain: string;
    darkNavAndFooter: string;
    darkLine: string;
    darkFont: string;
    lightMain: string;
    lightNavAndFooter: string;
    lightLine: string;
    lightFont: string;
  };
}

// html 태그 뒤에 interface를 넣어주면 된다.
const MainContainer = styled.div<Theme>`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  color: ${props =>
    props.themeMode
      ? props.themeColorObject.darkFont
      : props.themeColorObject.lightFont};
  background-color: ${props =>
    props.themeMode
      ? props.themeColorObject.darkMain
      : props.themeColorObject.lightMain};
`;

const MainSectionContainer = styled.div`
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
`;

const Main = () => {
  const themeMode = useRecoilValue(darkModeToggle);
  const themeColorObject = useRecoilValue(themeColor);

  return (
    <MainContainer themeMode={themeMode} themeColorObject={themeColorObject}>
      <NavBar />
      <MainSectionContainer>
        <Carousel />
        <SectionContainer />
      </MainSectionContainer>
      <Footer />
    </MainContainer>
  );
};

export default Main;

interface를 생성하여 Props에 있는 타입들을 모두 정해주고 Styled-Component HTML태그 옆에 <>와 함께 사용하면 된다.

위의 사진과 같이 타입이 정상적으로 입혀진 것을 볼 수 있다.

타입스크립트의 선언과 단언

예전 타입스크립트 강의를 들었을 때도 보았는데 <>를 사용하여 타입을 넣을 때도 있지만
as라는 문법을 사용하여 타입을 넣는 방식도 있다.

그렇다면 이 두 개의 방식은 어떠한 차이점이 있는가 ?

타입스크립트에 대해 조사 해본 결과 타입은 크게 선언과 단언으로 정할 수 있다고 한다.

우리가 흔히 사용하는 타입을 지정하는 방식은 선언
as 문법을 사용한 타입 지정은 단언이라고 한다.

우리가 흔히(?)라고 이야기하면 명확하지 않기 때문에 예시를 들어보겠다.

interface IFood {
  name: string;
  price: number;
}

const myFood: IFood = { name: 'apple', price: 2000 };
const friendFood = { name: 'banana', price: 1000 } as IFood;