Language/JavaScript

JavaScript 공부정리 - 프리티어

Tarel 2022. 10. 14. 19:36

사실 프리티어는 자바스크립트 뿐만 아니라 프로그래밍 전반에도 비슷한 개념이 있을거라 생각한다.

하지만 일단은 여기에 적도록 한다.

 

 

1. 쉽게 말해 코드를 작성하는 스타일...

코드를 작성하다보면 들여쓰기가 자동으로 되는 것을 알 수 있다.

그런데 이러한 들여쓰기 조차 누구는 Spacebar를 여러번 누르고 누구는 Tap을 한 번 누른다.

 

또한 중괄호를 쓰는 구문을 보면, 누구는 짧은 구문도 시작괄호와 닫는 괄호가 각각 한 줄씩 차지하는 반면

누구는 그딴거 없이 한 줄로 심플하게 끝내기도 한다.

 

그림을 그리는 사람에게 그림체가 있고 글을 쓰는 사람에게 글씨체가 있지만

단순한 모양을 넘어서, 그림 그리는 사람들에겐 주로 그리는 장르나 좋아하는 요소가 있기 마련이고

글을 쓰는 사람들 또한 글씨체를 넘어서, 추구하는 화술이 있다.

 

프로그래머들도 마찬가지고 이 스타일로 인한 가독성 때문에 서로 엄청나게 싸웠다고 한다.

 

 

2. 그래서, 프리티어란?

코드 서식 관리 도구 라고 할 수 있다.

 

https://prettier.io/playground/

 

위 사이트에서 사용해 볼 수 있다.

 

프리티어를 다운 받아서 본인이 사용하고 있는 코딩 프로그램에 적용시킬 수 있다.

또한 프리티어가 기본적으로 제공하는 규칙이 있으나 이 규칙을 본인의 입맛에 맞게 바꿀 수 있다.

 

만약 본인이 VS-Code를 사용한다면 터미널에 다음 명령을 입력하여 설치할 수 있다.

npm i prettier -D

프리티어는 서비스 구동에 필요한 모듈이 아니니 -D로 설치한다.

그리고 나서 app.js 파일이 있는 폴더에 .prettierrc.js 라는 파일을 만들고 (앞에 점 주의) 아래의 내용을 넣는다.

 

{
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
}

 

그리고 package.json 파일을 보면 scripts 라는 항목이 있는데 그 항목의 하위에다가 다음을 넣어주자

"prettify": "prettier --write *.js **/*.js"

 

참고로 위 코드를 넣으면 대략 다음처럼 나와야 한다

{
    "name": "프로젝트 이름",
    "version": "1.0.0",
    "scripts": {
        "start": "node app.js",
        "prettify": "prettier --write *.js **/*.js"
    },
... 생략
}

 

이후 터미널에 다음을 입력하여 프리티어를 실행한다.

npm run prettify

 

 

3. 프리티어 각 항목의 규칙

아래 코드를 설명하는 형식으로 진행해 보겠다

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  arrowParens: 'always',
};

 

1. tarilingComma란 바로 위 코드의 끝부분 처럼 모든 항목에 쉼표를 넣을 것인가에 대한 여부다.

물론 쉼표는 꼭 넣어줘야 하지만 마지막 항목에는 넣어줄 필요가 없는데 이것을 설정하는 것이라고 생각하면 된다.

es5라는 값은 ES5버전에서 허용되는 부분까지만 콤마를 붙인다는 뜻이다.

none이라는 값은 쓸모없다고 판단되는 모든 콤마를 제거합니다.

all은 반대로 바로 위 코드 처럼 끝에도 넣어주는 것이다. 그러나 그런 형태를 지원하지 않는 경우가 있기 때문에 비추천한다.

 

2. tabwidth란 들여쓰기 간격을 뜻한다.

 

3. semi란 코드 뒤에 ;를 붙일 것인가에 대한 규칙이다. 자바스크립트는 세미콜론이 없어도 상관없지만, 몇몇 언어는 이게 없으면 코드 자체가 못 읽히는 현상이 발생하곤 한다.

때문에 가급적이면 true로 해 놓기를 권장한다.

 

4. singleQuote란 문자열을 입력할 때 쌍따옴표를 쓸 것인가, 외 따옴표를 쓸 것인가를 결정한다.

뭘로 해도 상관없지만 외따옴표(true)를 권장한다.

 

5.arrawParens란 함수의 파라미터에서 괄호를 항상 넣을 것인가 말 것인가를 정하는 규칙이다.

이 또한 always로 항상 해두는 것을 권장한다.