애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들)
    React Native 2021. 7. 22. 17:15
    728x90
    반응형

    해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다.

     

    전 글에서 프로젝트를 생성하는 것 까지 끝냈다.

    오늘은 개발을 할 때(특히 협업을 할 때) 거의 필수적으로 사용하는 설정들에 대해 다뤄보고자 한다.

     

    일단 나 같은 경우 React Native 프로젝트의 경우 특히 내가 사용하는 파일 이외에 생성되는 파일들이 많기에 src 폴더를 만든 뒤 위치를 변경해준다.

    src 폴더로 App.tsx를 이동했을 경우 꼭 index.js파일의 App.js의 import 위치를 변경해 주세요.

     

    그런 뒤 expo로 편하게 이용하기 위해 android, ios의 스크립트를 변경한다.

     

    "android": "expo start --android",
    "ios": "expo start --ios"
    일단 babel.config.js 파일부터 수정해 주기로 한다.

     

    Component와 같은 내용들을 import 할 때

    import Exam from '../../../../components/Common/Exam.tsx';

    아래와 같은 import를 보게 되는데 이 경로를 간단하게 하기 위한 것이다.

    npm i -D babel-plugin-module-resolver
    module.exports = function (api) {
      api.cache(true);
      return {
        presets: ['babel-preset-expo'],
        /* New Code */
        plugins: [
          [
            'module-resolver',
            {
              root: ['./'],
              extensions: ['.ts', '.tsx'],
              alias: {
                '@APIs': './src/APIs', //외부 통신 함수들
                '@assets': './src/assets', // 이미지와 같은 정적 파일들
                '@atoms': './src/atoms', // Text와 같이 Props만으로 이루어진 최소 단위 요소들
                '@components': './src/components', // atom을 제외한 요소들
                '@hooks': './src/hooks', // 개인적으로 만든 커스텀 함수나, Hook들을 넣는 곳
                '@navigators': './src/navigators', // navigation 파일들을 모아두는 곳
                '@reducers': './src/reducers', // reducer 파일들이 모이는 곳
                '@styles': './src/styles', // css나 스타일 관련 파일들을 모아두는 곳
                '@utils': './src/utils', // 설정 파일이나 긴 내용의 객체들을 모아두는 곳
                '@screens': './src/screens', // 화면들을 모아두는 곳
              },
            },
          ],
        ],
    	/* New Code */
      };
    };

    위 와 같이 New Code 부분을 추가한다면 아래와 같이 직관적으로 import를 실행할 수 있게 된다.

    import Exam from '@components/Common/Exam.tsx';

     

    이제 tsconfig에 대해 설명하자면 내용이 생각보다 길어지니 중요한 내용만 집어 두고 넘어가겠습니다.

    {
      "extends": "expo/tsconfig.base",
      "compilerOptions": {
        "strict": true,
        "esModuleInterop": true,
        "sourceMap": true,
        "lib": ["ESNext", "DOM"],
        "jsx": "react-native",
        "module": "esnext",
        "moduleResolution": "node",
        "target": "ESNext",
        "resolveJsonModule": true,
        "allowJs": true,
        "alwaysStrict": true,
        "forceConsistentCasingInFileNames": true,
        "isolatedModules": true,
        "noEmit": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "skipLibCheck": true,
        "baseUrl": "./src",
        "paths": {
          "@APIs/*": ["APIs/*"],
          "@assets/*": ["assets/*"],
          "@atoms/*": ["atoms/*"],
          "@components/*": ["components/*"],
          "@hooks/*": ["hooks/*"],
          "@navigators/*": ["navigators/*"],
          "@reducers/*": ["reducers/*"],
          "@styles/*": ["styles/*"],
          "@utils/*": ["utils/*"],
          "@screens/*": ["screens/*"]
        }
      },
      "exclude": ["__tests__", "node_modules"],
      "include": ["**/*.ts", "**/*.tsx"]
    }

    위 내용 중 가장 중요하닥 생각하는 요소는 strict이다.

    엄격한 타입 체크를 해주는 요소인데 이 요소를 끄게 되면 any를 남발하는 문제가 발생하고 그럼 TS의 장점은 사라지고 단점만 남는 사태가 발생할 수 있기 때문이다.

     

    이제 prettier와 eslint를 적용해보자.
    npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react-hooks
    npm i -D prettier eslint-config-prettier eslint-plugin-prettier

    각 종속성에 대해 설명하자면

    • @typescript-eslint/parser : ESLint에서 타입 스크립트 파서 사용
    • @typescript-eslint/eslint-plugin: ESLint의 타입 스크립트 룰 모음
    • eslint-plugin-react: ESLint에서 React에 대한 룰 모음
    • eslint-plugin-react-hooks: ESLint에서 React Hooks에 대한 룰 모음
    • eslint-config-airbnb-typescript: Airbnb의 ESLint 타입 스크립트 스타일 가이드
    • eslint-plugin-import: ES2015+의 import/export 구문을 지원
    • eslint-plugin-jsx-a11y: 접근성 지원
    • eslint-config-prettier: ESLint의 내장 포맷팅 기능 삭제
    • eslint-plugin-prettier: ESLint에 Prettier의 포매팅 기능 추가
    //.prettierrc
    
    {
      "singleQuote": true,
      "semi": true,
      "useTabs": false,
      "tabWidth": 2,
      "trailingComma": "all",
      "printWidth": 100,
      "arrowParens": "always"
    }

    Prettier의 설정의 경우 개발자마다 취향이 다른 문제이므로 참고만 한 뒤 자신의 스타일에 맞춰 수정해 나가길 바란다.

    {
      "parser": "@typescript-eslint/parser",
      "parserOptions": {
        "project": "tsconfig.json",
        "ecmaVersion": 2020,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      "env": {
        "browser": true,
        "node": true,
        "es6": true
      },
      "extends": [
        "airbnb-typescript",
        "plugin:react/recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier"
      ],
      "plugins": ["@typescript-eslint", "import", "react-hooks", "jsx-a11y", "prettier"],
      "rules": {
        "@typescript-eslint/no-explicit-any": 2,
        "global-require": "off",
        "jsx-a11y/label-has-associated-control": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "react/prop-types": "off",
        "no-underscore-dangle": "off",
        "react/forbid-prop-types": "off",
        "react/jsx-filename-extension": "off",
        "react/jsx-one-expression-per-line": "off",
        "object-curly-newline": "off",
        "linebreak-style": "off",
        "no-param-reassign": "off",
        "react/no-danger": "off",
        "class-methods-use-this": "off",
        "consistent-return": "off",
        "react/jsx-props-no-spreading": "off",
        "import/prefer-default-export": "off",
        "no-alert": "off",
        "import/no-unresolved": "off",
        "react/jsx-wrap-multilines": ["error", { "declaration": false, "assignment": false }],
        "max-params": ["error", 4],
        "max-lines": [
          "error",
          {
            "max": 200,
            "skipBlankLines": false,
            "skipComments": false
          }
        ],
        "multiline-comment-style": "error"
      },
      "overrides": [
        {
          "files": ["./reducers/**", "./APIs/**"],
          "rules": {
            "max-lines": "off",
            "max-lines-per-function": ["error", { "max": 100 }]
          }
        }
      ]
    }

    Eslint 설정 또한 어떤 내용을 끄냐로 많은 차이가 나는 부분이 많기에 특징적인 부분만 설명하자면, extend에 위에 설정한 종속성과 plugin들을 적용하고 함수가 Components의 파일(함수)의 길이 제한을 둔 내용이 특징적일 수 있다.

     

    이 내용 또한 개발자의 취향이나 팀의 취향을 크게 타는 부분이니 자신이 개발을 하며 정말 빼야 될 것 같은 부분들을 제거해 나가면 좋다.

     

    나는 여기에 .eslintiignore파일을 생성해 js파일들에 대한 lint검사를 제거해 주는 편인데 이 부분 또한 선택적인 부분이니 선택에 맞긴다.

    //.eslintignore
    *.js

     

    이것으로 기본적인 설정을 모두 마쳤다.

    이제 자신의 취향에 맞게 프로젝트를 시작해도 되며 나를 따라올 수도 있다.

     

    그럼 다음 글에서는 styled component를 설치한 뒤 화면을 만들어 보자.

    반응형

    댓글

Designed by Tistory.