Config Like a Pro: Streamlining Your JavaScript Project Setup with RC Files

RC 파일은 런타임 구성(Runtime Configuration)으로 JavaScript 프로젝트에서 사용 되는 구성 파일들 중 하나이다. RC 파일은 프로젝트의 동작 방식을 제어하고 사용자 또는 개발자의 설정을 정의하는 데 사용된다. 작성 방식은 주로 JSON, YAML 형식으로 작성되고 파일 확장자는 관련 도구나 프레임워크에 따라 다르다.

RC 파일 필요성

프로젝트의 일관성을 유지하기 위해 모든 개발자가 동일한 구성을 사용할 수 있도록 도와주고, 다양한 환경 예를 들어 개발 / 테스트 / 프로덕션 환경에 따라 프로젝트의 동작을 쉽게 변경할 수 있으며, 코드 스타일 가이드라인과 린팅 규칙을 정의함으로써 프로젝트의 코드 품질을 유지하는데 도움을 준다.

RC 파일 종류

이 설정 파일들은 프로젝트의 루트 디렉토리에 위치 한다. 일반적으로 JSON 또는 YAML 형식으로 작성 되며 간략한 설명과 예제 코드는 다음과 같다.

.eslintrc

• ESLint 설정을 저장한다.
• 코드 스타일, 문법, 오류를 검사하는 데 사용된다.
• Configure ESLint

// .eslintrc.json

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

.babelrc

• Babel 설정을 저장한다.
• JavaScript 코드를 변환하고 다양한 브라우저에서 호환되도록 해준다.
• Config Options

// .babelrc.json

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

.prettierrc

• Prettier 설정을 저장한다.
• 코드 서식을 일관되게 유지하도록 도와준다.
• Configuration File

// .prettierrc.json

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

.stylelintrc

• Stylelint의 설정을 저장한다.
• CSS 또는 SCSS 의 스타일과 문법을 검사하는 데 사용된다.
• Configuring | Stylelint

// .stylelintrc.json

{
  "extends": "stylelint-config-standard",
  "rules": {
    "alpha-value-notation": "number",
    "selector-class-pattern": null
  }
}

.npmrc

• npm의 설정을 저장한다.
• 패키지 관리와 관련된 설정을 지정한다.
• Configuring npm

// .npmrc

@myorg:registry=https://somewhere-else.com/myorg
@another:registry=https://somewhere-else.com/another

.yarnrc

• yarn의 설정을 저장한다.
• 패키지 관리와 관련된 설정을 지정한다.
• yarn Config

// .yarnrc

"@myorg:registry" "https://somewhere-else.com/myorg"
"@another:registry" "https://somewhere-else.com/another"

.nvmrc

• Node.js 버전을 관리하고 다양한 환경에서 일관성을 보장한다.
• Node Version Manager 가 설정된 Node.js 버전을 사용하게 된다.
• nvm-sh/nvm

// .nvmrc

14.17.0

.huskyrc

• Husky의 설정을 저장한다.
• Git hooks을 설정하고 관리하는 데 사용된다.
• Migrating from v4 | husky

// .huskyrc.json

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

.browserslistrc

• 프로젝트에서 지원하려는 브라우저의 버전을 지정할 수 있다.
• Autoprefixer, Babel, PostCSS 와 같은 여러 Front-End 도구와 함께 동작 한다.
• Browserslist

// .browserslistrc

> 1%
last 2 versions
not dead

.hintrc

• webhint라는 웹 최적화 도구의 설정을 저장하고 구성하는 데 사용된다.
• 힌트, 연결자, 포맷터, 파서 등의 설정을 지정하고 관리할 수 있다.
• Configure webhint

// .hintrc

{
    "connector": {
        "name": "connectorName"
    },
    "formatters": ["formatterName"],
    "parsers": ["parserName"],
    "hints": {
        "hint1": "error",
        "hint2": "warning",
        "hint3": "off"
    },
    "hintsTimeout": 120000
}

이러한 설정 파일들은 프로젝트 설정을 쉽게 관리 가능하게 하고, 팀 프로젝트에서 일관된 개발 환경을 유지할 수 있는 유연성을 제공 할 수 있다.