이번 글에서는 CRA 세팅과 관련하여 Git hooks를 다룰 수 있는 husky를 다뤄볼 생각입니다. 앞서 소개한 ES Lint나 Prettier처럼, CRA 개발 환경이 아니더라도 매우 유용한 패키지입니다. Husky 간단 소개 Husky는 개발 환경에서 Git Hooks를 사용하기 쉽게 만들어 주는 도구입니다. 그럼 Git Hooks는 뭐냐고요? Git Hooks은 git을 쓰다가 특정 이벤트(commit이나 push 같은)가 일어나는 순간에 특정 스크립트가 실행되도록 도와주는 것입니다. Git으로 버전 관리를 할 때 생성되는 .git/hooks 폴더에 스크립트를 직접 넣어도 이런 Git Hooks 관리를 할 수 있습니다. 다만, .git/hooks 폴더 같은 경우에는 형

ES Lint에 이어서, 내 코드의 포맷팅을 도와주는 Prettier를 자세하게 다뤄봅니다. CRA에 포함된 ESLint와 조합되면 강력한 위력을 지닌 포맷터입니다. 코드 포맷터(Code Formatter) 코드 포멧터(Code Formatter)란 개발자가 작성한 코드를 미리 정해진 코딩 스타일을 따르도록 변환해주는 도구를 말합니다. 언뜻 생각하면 저번 글에서 다루었던 린터와 비슷한 기능을 하는 것 같기도 합니다. 린터는 주로 코드 내의 에러를 검출하고 코드 문법을 강제하는 등 코드 품질을 향상시키는 것이 주요한 기능입니다. (ESLint 같은 경우에는 기본적인 포맷팅 기능도 같이 탑재되어 있습니다.) 포맷터는 indent 길이, 따옴표 종류, 한 줄 안에서 코드의 최대 길이 등 코드의 모양새를 미리 정해진 규칙에 따라 손질해주는 것입니다. 따라서 실제 코드의 오류를 잡아주거나 하지는 못합니다. ![](https://images.velog.io/ima

CRA에는 ES Lint 기능이 내장되어 있습니다. 코드의 안정성을 높히고 퀄리티를 보장해주는 유용한 도구입니다. ES Lint의 개념을 살펴보고, 사용법도 다뤄볼 생각입니다. Linter는 무엇인가 위키에서 린트를 한번 검색해보았습니다. 다음과 같은 설명이 나오는군요. > 린트(lint) 또는 린터(linter)는 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구들을 가리킨다. 린트는 쉽게 말해서, 코드의 문법 오류나 패턴에서 벗어난 코드를 지적해줍니다. 결과적으로 일관된 스타일로 코드를 작성할 수 있게 해주는 도구입니다. Lint라는 단어가 영어로 '보푸라기'를 뜻합니다. 그래서 문법이나 컨벤션에 어긋난 코드를 찾아

이번 글부터는 실제 React 프로젝트를 위해 개발 환경을 구성하는 방법을 담을 예정입니다. 저처럼 이제 막 React 개발을 입문하시는 분들에게 조금이나마 도움이 되었으면 좋겠습니다. Create React App Create React App, 줄여서* CRA*라고도 부릅니다. 이제부터는 CRA라고 통일해서 부르도록 하겠습니다. 풀네임 치는게 너무 귀찮네요... CRA는 페이스북 팀에서 오픈 소스로 만든 React 개발 환경 구축 툴입니다. React도 페이스북에서 만든 거고, 이 친구도 페이스북에서 만든거라 공식적으로 React에 지원되는 툴이라고 보시면 됩니다. React 개발을 시작할 때, React와 React DOM 설치하셨던 것 기억나시나요? CRA는 이러한 기본 패키