JayK

1. 소개

Prettier란 무엇인가?

Prettier는 코드 포맷터로, 코드를 일관성 있게 정리해 줍니다. JavaScript, TypeScript, CSS, HTML 등 다양한 언어를 지원합니다. 코드 스타일을 강제하여 코드의 가독성을 높이고, 팀원 간의 코드 스타일 충돌을 줄입니다.

Prettier의 필요성 및 장점

• 일관된 코드 스타일: 팀원 간의 코드 스타일 차이를 줄여줍니다.
• 자동화된 포맷팅: 코드 작성에 집중할 수 있도록 도와줍니다.
• 쉬운 코드 리뷰: 포맷팅 이슈 없이 코드 로직에만 집중할 수 있습니다.

2. Prettier 설치

프로젝트 초기 설정

프로젝트를 새로 생성하거나 기존 프로젝트의 루트 디렉터리에서 다음 명령어를 실행합니다.

npm을 통한 Prettier 설치

npm install --save-dev prettier

yarn을 통한 Prettier 설치

yarn add --dev prettier

3. Prettier 설정 방법

설정 파일 형식

Prettier는 다양한 설정 파일 형식을 지원합니다. 설정 파일을 프로젝트 루트에 생성할 수 있습니다.

• prettier.config.js 또는 .prettierrc.js: JavaScript 파일로 설정
  • module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: 'es5', bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'always', };
• .prettierrc 또는.prettierrc.json: JSON 형식의 파일로 설정
  • { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always" }
• .prettierrc.yml 또는 .prettierrc.yaml: YAML 형식의 설정 파일
  • printWidth: 80 tabWidth: 2 useTabs: false semi: true singleQuote: true trailingComma: es5 bracketSpacing: true jsxBracketSameLine: false arrowParens: always
• package.json: package.json 파일 내에 설정
  • { "name": "your-project", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "prettier": "^2.3.2" }, "prettier": { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always" } }

일반적인 설정 옵션 설명

• printWidth: 줄 바꿈을 할 최대 줄 길이 (default: 80)한 줄의 최대 길이가 80자로 설정됩니다.

  {
    "printWidth": 80
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)printWidth: 100설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)printWidth: 120설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
• const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
• { "printWidth": 120 }
• 한 줄의 최대 길이가 120자로 설정됩니다.
• const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
• const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
• { "printWidth": 100 }
• 한 줄의 최대 길이가 100자로 설정됩니다.
• const exampleFunction = () => { console.log( 'This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.' ); };
• const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
• 설정 파일 예시
• printWidth: 80
• tabWidth: 탭 한 칸의 공백 수 (default: 2)탭 한 칸의 공백 수가 2로 설정됩니다.

  {
    "tabWidth": 2
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)tabWidth: 4설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)tabWidth: 8설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• function example() { if (true) { console.log("Hello, world!"); } }
• function example() { if (true) { console.log("Hello, world!"); } }
• { "tabWidth": 8 }
• 탭 한 칸의 공백 수가 8로 설정됩니다.
• function example() { if (true) { console.log("Hello, world!"); } }
• function example() { if (true) { console.log("Hello, world!"); } }
• { "tabWidth": 4 }
• 탭 한 칸의 공백 수가 4로 설정됩니다.
• function example() { if (true) { console.log("Hello, world!"); } }
• function example() { if (true) { console.log("Hello, world!"); } }
• 설정 파일 예시
• tabWidth: 2
• useTabs: 탭을 사용할지 여부 (default: false)공백을 사용하여 들여쓰기를 합니다.

  {
    "useTabs": false,
    "tabWidth": 2
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)useTabs: true설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• function example() { console.log('Hello, world!'); }
• function example() { console.log('Hello, world!'); }
• { "useTabs": true, "tabWidth": 2 }
• 탭을 사용하여 들여쓰기를 합니다.
• function example() { console.log('Hello, world!'); }
• function example() { console.log('Hello, world!'); }
• 설정 파일 예시
• useTabs: false
• semi: 세미콜론을 사용할지 여부 (default: true)문장의 끝에 세미콜론을 추가합니다.

  {
    "semi": true
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)semi: false설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const message = 'Hello, world' function example() { console.log(message) }
• const message = 'Hello, world'; function example() { console.log(message); }
• { "semi": false }
• 문장의 끝에 세미콜론을 추가하지 않습니다.
• const message = 'Hello, world'; function example() { console.log(message); }
• const message = 'Hello, world' function example() { console.log(message) }
• 설정 파일 예시
• semi: true
• singleQuote: 작은 따옴표를 사용할지 여부 (default: false)문자열을 작은 따옴표로 감쌉니다.

  {
    "singleQuote": true
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)singleQuote: false설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const message = "Hello, world!"; function example() { console.log("Hello, world!"); }
• const message = 'Hello, world!'; function example() { console.log('Hello, world!'); }
• { "singleQuote": false }
• 문자열을 큰 따옴표로 감쌉니다.
• const message = 'Hello, world!'; function example() { console.log('Hello, world!'); }
• const message = "Hello, world!"; function example() { console.log("Hello, world!"); }
• 설정 파일 예시
• singleQuote: true
• trailingComma: 후행 콤마 사용 설정 (default: es5) (options : none, es5, all)후행 콤마를 사용하지 않습니다.

  {
    "trailingComma": "none"
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)trailingComma: "es5"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)trailingComma: "all"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c,) { console.log(a, b, c); }
• const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
• { "trailingComma": "all" }
• 모든 가능한 위치에 후행 콤마를 사용합니다. 이는 객체, 배열, 함수 매개변수 등에 적용됩니다.
• const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c) { console.log(a, b, c); }
• const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
• { "trailingComma": "es5" }
• ES5에서 유효한 후행 콤마를 사용합니다. 이는 객체, 배열 등에 후행 콤마를 사용하지만, 함수 매개변수에서는 사용하지 않습니다.
• const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
• const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c,) { console.log(a, b, c); }
• 설정 파일 예시
• trailingComma: "none"
• bracketSpacing: 객체 리터럴에서 괄호 사이에 공백을 넣을지 여부 (default: true)

  {
    "bracketSpacing": true
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const obj = { foo: 'bar', baz: 'qux' };
• const obj = {foo: 'bar',baz: 'qux'};
• 설정 파일 예시
• jsxBracketSameLine: JSX의 마지막 **>**를 같은 줄에 둘지 여부 (default: false)JSX의 마지막 **>**를 다음 줄에 둡니다.

  {
    "jsxBracketSameLine": false
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)jsxBracketSameLine: true설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const element = ( <div className="container"> <h1>Hello, world!</h1> </div> );
• const element = ( <div className="container" > <h1>Hello, world!</h1> </div> );
• { "jsxBracketSameLine": true }
• JSX의 마지막 **>**를 같은 줄에 둡니다.
• const element = ( <div className="container" > <h1>Hello, world!</h1> </div> );
• const element = ( <div className="container"> <h1>Hello, world!</h1> </div> );
• 설정 파일 예시
• jsxBracketSameLine: false
• arrowParens: 화살표 함수의 매개변수에 괄호를 사용할지 여부 (default: always) (options: always, avoid)항상 화살표 함수의 매개변수를 괄호로 감쌉니다.

  {
    "arrowParens": "always"
  }
  

  코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)arrowParens: "avoid"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
• const add = x => x + 1; const greet = name => `Hello, ${name}!`;
• const add = (x) => x + 1; const greet = (name) => `Hello, ${name}!`;
• { "arrowParens": "avoid" }
• 가능한 경우 화살표 함수의 매개변수를 괄호로 감싸지 않습니다.
• const add = (x) => x + 1; const greet = (name) => `Hello, ${name}!`;
• const add = x => x + 1; const greet = name => `Hello, ${name}!`;
• 설정 파일 예시
• arrowParens: "always"

.prettierignore 파일 사용법

포맷팅에서 제외할 파일이나 디렉터리를 지정합니다.

node_modules/
build/
dist/

4. Prettier와 ESLint 통합

ESLint와 Prettier의 차이점

ESLint는 코드 품질과 스타일을 체크하며, Prettier는 코드 포맷팅에 중점을 둡니다.

ESLint와 Prettier를 함께 사용해야 하는 이유

둘을 함께 사용하면 코드 품질과 스타일을 모두 관리할 수 있습니다.

eslint-config-prettier 및 eslint-plugin-prettier 설치 및 설정

$ npm install --save-dev eslint-config-prettier eslint-plugin-prettier

ESLint 설정 파일 (.eslintrc.json 또는 .eslintrc.js)에 다음을 추가합니다.

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

5. Prettier 사용 방법

CLI를 통한 사용

$ npx prettier --write .

IntelliJ IDEA에서 사용

1. Prettier 플러그인 설치: IntelliJ IDEA에서 File -> Settings -> **Plugins**로 이동하여 Prettier 플러그인을 설치합니다.

1. Prettier 설정: File -> Settings -> Languages & Frameworks -> JavaScript -> **Prettier**로 이동하여 Prettier가 설치된 경로를 설정합니다.

Git Hook을 통한 자동 포맷팅 설정 (Husky 및 lint-staged 사용)

npm install --save-dev husky lint-staged

**package.json**에 다음을 추가합니다.

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["prettier --write", "git add"]
}

6. 프로젝트에 Prettier 적용

기존 코드베이스에 Prettier 적용

기존 코드에 Prettier를 적용하려면 CLI 명령어를 실행합니다.

$ npx prettier --write .

커밋 전에 코드 포맷팅 검증

위에서 설정한 Husky와 lint-staged를 통해 커밋 전에 코드가 포맷팅되었는지 확인합니다.

7. CI/CD 파이프라인에서 Prettier 사용

Prettier를 CI 파이프라인에 포함시키기

CI 도구의 설정 파일에 Prettier 검사를 추가합니다. 예를 들어, GitHub Actions의 경우:

name: CI
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npx prettier --check .

8. 자주 발생하는 문제 및 해결 방법

일반적인 오류와 해결 방법

• 포맷팅 충돌: Prettier와 ESLint 설정이 충돌할 때는 **eslint-config-prettier**를 사용해 해결합니다.
• 적용되지 않는 포맷팅: 설정 파일이나 ignore 파일의 위치를 확인합니다.

Prettier와 ESLint 간의 충돌 해결

ESLint 설정에서 Prettier와 관련된 규칙을 비활성화합니다.

9. 최고의 활용 방법

팀 협업 시 Prettier 설정 공유

프로젝트 루트에 .prettierrc 파일을 포함하여 모든 팀원이 동일한 설정을 사용하게 합니다.

코드 리뷰 시 Prettier 사용 권장 사항

코드 리뷰 과정에서 포맷팅 이슈가 없도록 미리 Prettier를 실행합니다.

10. 결론

Prettier를 사용하여 얻을 수 있는 장점 요약

• 코드 일관성 유지
• 코드 리뷰 간소화
• 개발 효율성 증대1. 소개Prettier는 코드 포맷터로, 코드를 일관성 있게 정리해 줍니다. JavaScript, TypeScript, CSS, HTML 등 다양한 언어를 지원합니다. 코드 스타일을 강제하여 코드의 가독성을 높이고, 팀원 간의 코드 스타일 충돌을 줄입니다.
  • 일관된 코드 스타일: 팀원 간의 코드 스타일 차이를 줄여줍니다.
  • 자동화된 포맷팅: 코드 작성에 집중할 수 있도록 도와줍니다.
  • 쉬운 코드 리뷰: 포맷팅 이슈 없이 코드 로직에만 집중할 수 있습니다.
  2. Prettier 설치프로젝트를 새로 생성하거나 기존 프로젝트의 루트 디렉터리에서 다음 명령어를 실행합니다.

  npm install --save-dev prettier
  

  yarn을 통한 Prettier 설치3. Prettier 설정 방법Prettier는 다양한 설정 파일 형식을 지원합니다. 설정 파일을 프로젝트 루트에 생성할 수 있습니다.
  • prettier.config.js 또는 .prettierrc.js: JavaScript 파일로 설정
  • module.exports = { printWidth: 80, tabWidth: 2, useTabs: false, semi: true, singleQuote: true, trailingComma: 'es5', bracketSpacing: true, jsxBracketSameLine: false, arrowParens: 'always', };
  • .prettierrc 또는.prettierrc.json: JSON 형식의 파일로 설정
  • { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always" }
  • .prettierrc.yml 또는 .prettierrc.yaml: YAML 형식의 설정 파일
  • printWidth: 80 tabWidth: 2 useTabs: false semi: true singleQuote: true trailingComma: es5 bracketSpacing: true jsxBracketSameLine: false arrowParens: always
  • package.json: package.json 파일 내에 설정
  • { "name": "your-project", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "prettier": "^2.3.2" }, "prettier": { "printWidth": 80, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "es5", "bracketSpacing": true, "jsxBracketSameLine": false, "arrowParens": "always" } }
  일반적인 설정 옵션 설명
  • printWidth: 줄 바꿈을 할 최대 줄 길이 (default: 80)한 줄의 최대 길이가 80자로 설정됩니다.

    {
      "printWidth": 80
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)printWidth: 100설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)printWidth: 120설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • javascript코드 복사 const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
  • javascript코드 복사 const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
  • json코드 복사 { "printWidth": 120 }
  • 한 줄의 최대 길이가 120자로 설정됩니다.
  • javascript코드 복사 const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
  • javascript코드 복사 const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
  • json코드 복사 { "printWidth": 100 }
  • 한 줄의 최대 길이가 100자로 설정됩니다.
  • const exampleFunction = () => { console.log( 'This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.' ); };
  • const exampleFunction = () => { console.log('This is a very long line that will exceed the print width and should be wrapped into multiple lines by Prettier.'); };
  • 설정 파일 예시
  • printWidth: 80
  • tabWidth: 탭 한 칸의 공백 수 (default: 2)탭 한 칸의 공백 수가 2로 설정됩니다.

    {
      "tabWidth": 2
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)tabWidth: 4설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)tabWidth: 8설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • function example() { if (true) { console.log("Hello, world!"); } }
  • function example() { if (true) { console.log("Hello, world!"); } }
  • { "tabWidth": 8 }
  • 탭 한 칸의 공백 수가 8로 설정됩니다.
  • function example() { if (true) { console.log("Hello, world!"); } }
  • function example() { if (true) { console.log("Hello, world!"); } }
  • { "tabWidth": 4 }
  • 탭 한 칸의 공백 수가 4로 설정됩니다.
  • function example() { if (true) { console.log("Hello, world!"); } }
  • function example() { if (true) { console.log("Hello, world!"); } }
  • 설정 파일 예시
  • tabWidth: 2
  • useTabs: 탭을 사용할지 여부 (default: false)공백을 사용하여 들여쓰기를 합니다.

    {
      "useTabs": false,
      "tabWidth": 2
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)useTabs: true설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • function example() { console.log('Hello, world!'); }
  • function example() { console.log('Hello, world!'); }
  • { "useTabs": true, "tabWidth": 2 }
  • 탭을 사용하여 들여쓰기를 합니다.
  • function example() { console.log('Hello, world!'); }
  • function example() { console.log('Hello, world!'); }
  • 설정 파일 예시
  • useTabs: false
  • semi: 세미콜론을 사용할지 여부 (default: true)문장의 끝에 세미콜론을 추가합니다.

    {
      "semi": true
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)semi: false설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const message = 'Hello, world' function example() { console.log(message) }
  • const message = 'Hello, world'; function example() { console.log(message); }
  • { "semi": false }
  • 문장의 끝에 세미콜론을 추가하지 않습니다.
  • const message = 'Hello, world'; function example() { console.log(message); }
  • const message = 'Hello, world' function example() { console.log(message) }
  • 설정 파일 예시
  • semi: true
  • singleQuote: 작은 따옴표를 사용할지 여부 (default: false)문자열을 작은 따옴표로 감쌉니다.

    {
      "singleQuote": true
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)singleQuote: false설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const message = "Hello, world!"; function example() { console.log("Hello, world!"); }
  • const message = 'Hello, world!'; function example() { console.log('Hello, world!'); }
  • { "singleQuote": false }
  • 문자열을 큰 따옴표로 감쌉니다.
  • const message = 'Hello, world!'; function example() { console.log('Hello, world!'); }
  • const message = "Hello, world!"; function example() { console.log("Hello, world!"); }
  • 설정 파일 예시
  • singleQuote: true
  • trailingComma: 후행 콤마 사용 설정 (default: es5) (options : none, es5, all)후행 콤마를 사용하지 않습니다.

    {
      "trailingComma": "none"
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)trailingComma: "es5"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)trailingComma: "all"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c,) { console.log(a, b, c); }
  • const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
  • { "trailingComma": "all" }
  • 모든 가능한 위치에 후행 콤마를 사용합니다. 이는 객체, 배열, 함수 매개변수 등에 적용됩니다.
  • const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c) { console.log(a, b, c); }
  • const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
  • { "trailingComma": "es5" }
  • ES5에서 유효한 후행 콤마를 사용합니다. 이는 객체, 배열 등에 후행 콤마를 사용하지만, 함수 매개변수에서는 사용하지 않습니다.
  • const obj = { foo: 'bar', baz: 'qux' }; const arr = [ 'one', 'two', 'three' ]; function example(a, b, c) { console.log(a, b, c); }
  • const obj = { foo: 'bar', baz: 'qux', }; const arr = [ 'one', 'two', 'three', ]; function example(a, b, c,) { console.log(a, b, c); }
  • 설정 파일 예시
  • trailingComma: "none"
  • bracketSpacing: 객체 리터럴에서 괄호 사이에 공백을 넣을지 여부 (default: true)

    {
      "bracketSpacing": true
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const obj = { foo: 'bar', baz: 'qux' };
  • const obj = {foo: 'bar',baz: 'qux'};
  • 설정 파일 예시
  • jsxBracketSameLine: JSX의 마지막 **>**를 같은 줄에 둘지 여부 (default: false)JSX의 마지막 **>**를 다음 줄에 둡니다.

    {
      "jsxBracketSameLine": false
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)jsxBracketSameLine: true설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const element = ( <div className="container"> <h1>Hello, world!</h1> </div> );
  • const element = ( <div className="container" > <h1>Hello, world!</h1> </div> );
  • { "jsxBracketSameLine": true }
  • JSX의 마지막 **>**를 같은 줄에 둡니다.
  • const element = ( <div className="container" > <h1>Hello, world!</h1> </div> );
  • const element = ( <div className="container"> <h1>Hello, world!</h1> </div> );
  • 설정 파일 예시
  • jsxBracketSameLine: false
  • arrowParens: 화살표 함수의 매개변수에 괄호를 사용할지 여부 (default: always) (options: always, avoid)항상 화살표 함수의 매개변수를 괄호로 감쌉니다.

    {
      "arrowParens": "always"
    }
    

    코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)arrowParens: "avoid"설정 파일 예시코드 예시 (포맷팅 전)코드 예시 (포맷팅 후)
  • const add = x => x + 1; const greet = name => `Hello, ${name}!`;
  • const add = (x) => x + 1; const greet = (name) => `Hello, ${name}!`;
  • { "arrowParens": "avoid" }
  • 가능한 경우 화살표 함수의 매개변수를 괄호로 감싸지 않습니다.
  • const add = (x) => x + 1; const greet = (name) => `Hello, ${name}!`;
  • const add = x => x + 1; const greet = name => `Hello, ${name}!`;
  • 설정 파일 예시
  • arrowParens: "always"
  .prettierignore 파일 사용법

  node_modules/
  build/
  dist/
  

  4. Prettier와 ESLint 통합ESLint는 코드 품질과 스타일을 체크하며, Prettier는 코드 포맷팅에 중점을 둡니다.둘을 함께 사용하면 코드 품질과 스타일을 모두 관리할 수 있습니다.

  $ npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  

  ESLint 설정 파일 (.eslintrc.json 또는 .eslintrc.js)에 다음을 추가합니다.5. Prettier 사용 방법

  $ npx prettier --write .
  

  IntelliJ IDEA에서 사용
  1. Prettier 플러그인 설치: IntelliJ IDEA에서 File -> Settings -> **Plugins**로 이동하여 Prettier 플러그인을 설치합니다.
  
  1. Prettier 설정: File -> Settings -> Languages & Frameworks -> JavaScript -> **Prettier**로 이동하여 Prettier가 설치된 경로를 설정합니다.
  **package.json**에 다음을 추가합니다.6. 프로젝트에 Prettier 적용기존 코드에 Prettier를 적용하려면 CLI 명령어를 실행합니다.커밋 전에 코드 포맷팅 검증7. CI/CD 파이프라인에서 Prettier 사용CI 도구의 설정 파일에 Prettier 검사를 추가합니다. 예를 들어, GitHub Actions의 경우:8. 자주 발생하는 문제 및 해결 방법
  • 포맷팅 충돌: Prettier와 ESLint 설정이 충돌할 때는 **eslint-config-prettier**를 사용해 해결합니다.
  • 적용되지 않는 포맷팅: 설정 파일이나 ignore 파일의 위치를 확인합니다.
  Prettier와 ESLint 간의 충돌 해결9. 최고의 활용 방법프로젝트 루트에 .prettierrc 파일을 포함하여 모든 팀원이 동일한 설정을 사용하게 합니다.코드 리뷰 과정에서 포맷팅 이슈가 없도록 미리 Prettier를 실행합니다.Prettier를 사용하여 얻을 수 있는 장점 요약
  • 코드 일관성 유지
  • 코드 리뷰 간소화
  • 개발 효율성 증대
• 10. 결론
• 코드 리뷰 시 Prettier 사용 권장 사항
• 팀 협업 시 Prettier 설정 공유
• ESLint 설정에서 Prettier와 관련된 규칙을 비활성화합니다.
• 일반적인 오류와 해결 방법
• name: CI on: [push] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '14' - run: npm install - run: npx prettier --check .
• Prettier를 CI 파이프라인에 포함시키기
• 위에서 설정한 Husky와 lint-staged를 통해 커밋 전에 코드가 포맷팅되었는지 확인합니다.
• $ npx prettier --write .
• 기존 코드베이스에 Prettier 적용
• "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.js": ["prettier --write", "git add"] }
• npm install --save-dev husky lint-staged
• Git Hook을 통한 자동 포맷팅 설정 (Husky 및 lint-staged 사용)
• CLI를 통한 사용
• { "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier" ], "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }
• eslint-config-prettier 및 eslint-plugin-prettier 설치 및 설정
• ESLint와 Prettier를 함께 사용해야 하는 이유
• ESLint와 Prettier의 차이점
• 포맷팅에서 제외할 파일이나 디렉터리를 지정합니다.
• 설정 파일 형식
• yarn add --dev prettier
• npm을 통한 Prettier 설치
• 프로젝트 초기 설정
• Prettier의 필요성 및 장점
• Prettier란 무엇인가?

선언

CString str;

time_t Itime;

struct tm *cur;

time(&Itime);

cur = localtime(&Itime);  // 현재시간을 얻음

사용

str.Format(_T("[%04d/%02d/%02d %02d:%02d:%02d]"),

                     cur->tm_year+1900, cur->tm_mon + 1, cur->tm_mday, cur->tm_hour, cur->tm_min, cur->tm_sec);

출력

2017/04/21 06:21:33

서버 컴퓨터를 따로두고 쿼리박스를 이용해 접속하고자 하니

"'192.168.0.*' is not allowed to connect to this MySQL server ~ " 와 같은 에러가 발생 했다.

처음엔 방화벽 혹은 단순 네트워크 문제라 생각했지만 구글링해보니 문제는 간단하였다.

계정에 IP 권한을 막는 기능이 존재 한다고 한다.

아래와 같은 쿼리를 해당 서버컴에 날려주면 쉽게 해결된다.

mysql> GRANT ALL PRIVILEGES ON *.* TO 'username' @'%' identified by 'passwd';

RasberryPi로 Terabee 사용

( 환경 : Raspbian(Linux환경) , RasberryPi 2 B+ )

모형

구성

                        TOF Sensor                                                                                             USB Adopter

면적

핀 구성

드라이버 구성

윈도우에서 사용 할 때는 드라이버를 직접 깔아서 사용했지만 Ubuntu 기반인 라즈비안은 인식되어있다.

보통은 /dev/ttyUSB0 혹은 1,2 .... 로 되어있다.

screen 명령어를 통해서 Access하게 되면

이런식으로 결과 값이 주르륵 나온다.

무슨소릴까... Binary 모드이기 때문이다.

모드를 바꿔봐야겠다.

사용 Mode

(Shift + Key)

Shift + T (Text 모드로 변경해보면...)

우리가 원하든 mm 단위로 출력된다!