[FE] 개발을 위한 준비 1

 

오늘 포스팅할 글은 협업을 위한 툴을 소개해보고자 한다.

협업은 타인과 함께하는 작업이고 개발에 있어서 거의 필수사항이라고 볼 수 있다.

그런데 사람마다 개발시 코드 스타일에 차이가 날 수 있기 때문에 나중에 협업 관리 툴(git, github 등등)을 확인해보면 아주 자유로운 코드들을 확인할 수 있다.

 

이런 코드의 문제점은 다음과 같다고 생각한다.

 

 

코드 가독성이 좋지 않다.
스파게티 코드가 될 가능성이 높다.
이후 추가 영입된 인원에게 코드를 인수인계할 경우 파악하는데 시간 소요가 오래된다.
✨오류가 날 확률이 크다 

 

🍑

 

 

아무래도 가장 큰 문제는 바로 오류와 충돌이 날 확률이 크다는 것이 아닐까 싶다.

그렇기에 많은 이들이 협업을 할때 Lint와 Code Formatter를 통해 코드 스타일을 맞추어 github에 올리게 된다.

 

프론트엔드에서 대표적으로 상용하는 Lint의 경우 ESLint가 있다.

ESLint는 VSCode를 사용하는 사람들이라면 확장 파일을 통해 ESLint를 사용하는 사람들이 많을 것이라고 생각한다.

보통 React.js를 통해 개발을 하게 될 경우 프로젝트 생성시 CRA를 사용하면 ESLint는 기본으로 설정되는 것을 볼 수 있다.

다만, 협업에 있어서는 설정을 커스터마이징하는 경우가 많기 때문에 별도로 설정 파일을 생성하게 된다.

설정 파일은 .eslintrc로 생성해주면 되는데 이때, 확장자에 따른 뒤에 .json .yml등을 붙여주면 된다.

 

현재 ESLint에서 지원하는 구성 파일은 다음과 같다.

Javascript - .eslintrc.js
Javascript - .eslintrc.cjs ✔️ pakage.json에 "type":"module" 을 지정하여 JavaScript 패키지들 안에 ESLint가 동작합니다. 다만, 해당 ESM구성은 현재 ESLint에서 지원하고 있지 않습니다.
YAML - .eslintrc.yaml or .eslintrc.yml
JSON - .eslintrc.json 
package.json

 

ESLint를 사용하기 위해서는 Node.js가 필요하며 명령어를 통해 설치 및 구성이 가능하다.

정확한 내용은 공식 문서를 참고하는 것이 좋을 것 같다.

https://eslint.org/docs/latest/user-guide/getting-started

Getting Started with ESLint - ESLint - Pluggable JavaScript Linter

 

VSCode, React를 사용할 때는 다음과 같은 명령어를 사용하여 ESLint를 설치할 수 있다.

$ npm install eslint --save-dev

eslint의 경우 커스터마이징 할 수 있는 설정이 많기에 처음부터 모든 rule을 설정하기에는 어려울 수 있다.

그렇기에 file 을 생성할 때 다음 명령어를 사용할 경우 자동으로 파일을 생성해준다.

 

$ npx eslint --init

프로젝트를 진행하며 가장 많이 수정하는 부분은 extends와 rules 부분이며 rule에서 공용으로 설정할 것들을 정한다.

그러나 ESLint만으로 코드를 formmat하기에는 부족한 부분이 많다.

그래서 Linter로는 ESLint를 사용하고 Prettier라는 툴을 사용해 코드의 스타일링을 하곤 한다.

 

Prettier는 포맷팅 툴로써 팀원이 같은 포맷 스타일을 공유할 수 있게 된다.

VSCode, React 내에서 다음과 같은 명령어를 사용하여 Pretteir를 추가로 설치할 수 있다.

$ npm install prettier --save-dev

 

🍓그런데 여기서 주의할 점이 하나 생긴다.

ESLint는 코드 스타일링의 역할을 하기도 해서 Prettier의 역할이랑 겹치게 되어 충돌이 발생될 수 있다는 것이다.

그렇기에 추가적으로 eslint의 formatting 관련된 규칙들을 모두 해제하는 플러그인을 설치한다.

eslint-config-prettier --save-dev

 

여기서 끝나는 것이 아니라 ESLint처럼 Prettier역시 확장자 파일을 통해 설정을 진행할 수 있게 된다.

확장자 형식은 다양하게 지원하고 있으며 순수 react CRA의 경우 .prettierc.js 파일을 루트디렉토리에 사용한다.

 

prettier는 비교적 간단하게 설정을 선언할 수 있는데 {} 중괄호 사이에 포맷팅하고자 하는 룰을 넣어주면 된다.

 

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 10000 
}

상기는 prettier 설정에 대한 예시를 가지고 온 것으로 각 설정에 대한 부분은 공식 문서를 참고해보면 좋을 것 같다.

 

https://prettier.io/docs/en/options.html

Prettier · Opinionated Code Formatter

 

🍑

 

이런 설정들은 작업자가 사용을 하다가 실수로 끄거나 하는 일이 발생할 수 있다.

그렇기 때문에 git에 올리기 이전 commit할 때나 push 할 때 한번 더 강제로 formmating을 적용시켜주는 방법이 있다.

이 툴은 Husky라는 툴인데 이것까지 설명하기에 글이 길어질 것 같아 차후 다시 한 번 정리해보고자 한다.

 

---

이 글은 <원티드 프리온보딩 프론트엔드 인턴십>을 수강하며 작성하였음을 안내 드립니다.

혹여 수정할 사항이 있으시다면 댓글 남겨주시면 감사히 참고 및 수정 진행하겠습니다.☺️