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 단위로 출력된다!

리눅스에서 콘솔 프로그램을 백그라운드로 실행해야 할 경우 screen 명령어가 굉장히 유용하다.

원격 작업하다보면 여러창을 보고 싶을때도 있어 보통 터미널을 여러개 띄워 사용한다. 하지만 왔다갔다하기 귀찮아 많이 이용한다.

간단히 nohup으로 사용할수 있지만 screen명령어가 더 강력하고 유연하므로 많이 사용된다.

우선 사용하기 위해 screen 명령어를 써보니 라즈비안에선 깔려 있지 않다.

라즈비안은 Ubuntu 기반이므로

sudo apt-get install screen 명령어로 손쉽게 깔 수 있다.

CentOS는

yum install screen 으로 설치하면 된다.

=========================================================================

screen 명령어의 메뉴얼로는

1. 쉘모드 명령어
  screen
   : screen 을 시작 하는 기본 명령입니다.
   : 기본 세션명으로 시작합니다.
  screen -S 세션명
   : -S 다음에 주는 세션명으로 시작합니다.
  screen -list
   : -list 옵션을 주고 실행하면 이전에 작업했었던 screen 리스트가 있으면 세션명과 함께 리스트를 보여줍니다.
  screen -R 세션명
   : 이전에 세션이 있을 경우 -R 다음에 오는 세션명으로 이전 작업을 불러옵니다.
   : -R 다음에 세션명을 주지 않았을 경우에는 이전 세션이 한개만 있을 경우 그 작업을 불러옵니다.
   : 이전 작업이 여러개 있을 경우에는 이전 작업 리스트를 보여줍니다.
   : 이 경우에는 원하는 세션명을 주고 시작 하면 되겠죠. ^__^
   
2. screen 실행후 명령어
  screen 실행후의 명령어는 Ctrl-a로 시작합니다:

Ctrl-a, c       : (create) 새로운 쉘이 생기면서 그 쉘로 이동
Ctrl-a, a       : 바로 전 창으로 이동
Ctrl-a, n       : (next) 다음 창으로 이동
Ctrl-a, p       : (previous) 이전 창으로 이동
Ctrl-a, 숫자    : 숫자에 해당하는 창으로 이동
Ctrl-a, '       : 창번호 또는 창이름으로 이동 ( ' => 싱글 쿼테이션 )
Ctrl-a, "       : 창번호를 보여준다. ( " => 더블 쿼테이션 )
Ctrl-a, A       : 현재 창의 title을 수정
Ctrl-a, w       : 창 리스트 보여주기
Ctrl-a, esc     : Copy 모드로 전환. Copy 모드에서는 vi의 이동키로 이동을 할 수 있다.
Crtl-a, [         커서 이동을 할 수 있고 특정 블럭을 복사하는 기능으로 사용한다.
                 먼저 시작 위치에서 space 바를 누르고 끝 위치에서 space 바를 누르면 해당 부분이 buffer로 복사된다.
Ctrl-a, ]       : buffer의 내용을 stdin으로 쏟아 넣는다.
                 이 기능은 vi의 입력모드에서 사용하면 유용하다.
Ctrl-a, :(콜론) : 명령행 모드로 전환
Ctrl-a, d       : (detach) 현재 작업을 유지하면서 screen 세션에서 빠져나옴
                 세션이 종료 되지 않습니다.
Ctrl-a, x       : lock screen

아래 부분은 창을 나눠서 사용하는 명령입니다.

Ctrl-a, S       : (split) 창을 나눔 (region)
Ctrl-a, Tab     : 다른 region으로 이동
Ctrl-a, Q       : 현재 region을 제외한 나머지 숨기기


그리고 마지막 명령으로 세션을 완전히 빠져 나오는 명령입니다.

exit : screen 의 쉘상에서 exit 를 치고 엔터를 하면 세션이 완전히 종료 됩니다.


이상 위의 명령어 들만 알고 있으면 screen 사용시 불편하지 않게 screen 을 사용 할 수 있을 겁니다.

참 고
다른 사용자 분들의 의견을 보면 screen 화면을 2, 3 개정도 띄우고 사용하는게 가장 적당하다고 합니다.
4개 이상 띄우고 사용하다보면 불편하다고 하네요.
여러분들은 어느정도가 적당한지 한번 사용해보시고 판단 하시기 바랍니다.


기타 더욱 자세한 내용을 아시고 싶으시면 man 페이지나 /usr/doc/screen 을 참고하시기 바랍니다. 


참고 : KLTP( http://kltp.kldp.org/ )
      리눅스 사랑넷 ( http://linux-sarang.net )

      [펌] http://blog.naver.com/xinfra/80007388674