안녕하세요 오늘도 코테에 관련된 내용이 아닌 협업에 중요한 꿀팁들에 대한 정보들을 가져왔습니다 : )
이제 저희는 리액트 숙련주차 팀 프로젝트를 시작했는데요 튜터님께서 협업에서 중요한 내용이라고 하시면서
Prettier에 대해 알려주셨습니다!
그러면 바로 시작해보겠습니다
Prettier??
Prettier 이란? 코드를 작성하면서 저장시 자동적으로 코드를 가독성있게 좀 더 깔끔하게 정돈을 해주는 vscode 확장프로그램입니다
근데 이게 왜 협업에 중요한거죠?
네 개인적으로 작성할 때도 중요하지만 협업을 할 때에도 정말 중요합니다
인간은 코드를 작성하는데 정말 다양한 스타일로 작성을 하게 됩니다
어떤 사람은 들여쓰기를 띄어쓰기 4칸으로 하는 사람이 있고 2칸으로 하는 사람들도 있죠
그리고 문자열을 작음 따음표를 쓰는 사람이 있고 큰 따음표를 쓰는 사람이 있죠
그리고 세미콜론을 안쓰는 사람도 있고 쓰는 사람도 있죠
그래서! 우리는 이런 것들을 통일하기 위해서 협업에서 Prettier를 꼭 사용합니다
그럼 어떻게 사용하죠?
가장 먼저 Prettier를 설치해줍니다
vscode 터미널에서 npm install -D prettier 또는 yarn add -D prettier 명령어를 작성해줍니다
그 후 코드 포맷팅이 필요한데요
package.json 파일에서 scripts 부분에 "format": "prettier . --write" 코드를 작성해줍니다
그 후 npm run format 또는 yarn format 명령어를 vscode내에 터미널에서 입력을 해 format 커맨드를 실행합니다
그리고 .prettierrc.js 을 프로젝트 경로에 생성하여 사용합니다
그 후,
/** @type {import("prettier").Config} */
const config = {
tabWidth: 2,
semi: true,
singleQuote: false,
};
module.exports = config;위의 코드 예시 처럼 .prettierrc.js 파일안에 원하는 명령어들을 입력하시면 편리하게 사용하실 수 있습니다
혹시 prettier이 오류가 난다면 vscode내에 터미널에서 npm 이나 yarn 을 입력하시면 원할 하게 적용될 수 있습니다
네! 오늘은 이렇게 간단하지만 중요한 확장프로그램인 Prettier에 대해 알아보았습니다
코딩을 배우기 전에는 이런 부분이 궁금했는데 또 이렇게 해결하는 방법이 있는게 정말 신기한 것 같습니다 ㅎ
이제 내일부터 본격적으로 프로젝트가 시작 되는데 걱정과 긴장이 같이 듭니다...
피해주지 않고 열심이 도움이 되어야하는데 어떻게 해야될지 많이 감이 안잡혀서 한 숨이 점점 많아 지는 것 같습니다...!!
그래도 뭐 어떻게 하겠습니다... 열심히 해야지요..
그래도!! 프로젝트 시작하면서 컨디션이 많이 돌아와서 정말 다행인 것 같습니다
여러분 항상 몸 조심하시구요
그럼 우리는 또 행복하자구요!
