# Husky

hafnium1923

Husky 사용해서 commit 단위로 Lint 검사(Git Desktop 오류코드 127) Husky란? husky는 commit 또는 push 할 때 lint에 맞는지 확인하고, 테스트를 실행하는 것에 사용할 수 있다. 팀마다 컨벤션이 다양할 텐데 인간이 코드를 작성하는지라 어쩔 수 없이 컨벤션에 맞지않게 코드를 작성할 수도 있다. 그럴때 husky를 사용하면 자동으로 검사해서 commit이든 push든 막아준다. 팀바팀은 husky로 lint검사만 진행하는 것으로 결정했다. lint 검사는 commit 단위로 진행하는 것이 더 많은 수정을 막는다 test를 commit단위로 진행하는 것은 필요없는 commit이 더 많기도 하고 전체 파일에서의 통과 여부가 더 중요하기 때문에 PR 단위로 진행한다. 라는 이유였다! Husky 설치하기 명령어 넣기 우리는 하나의 레포에서 각각 백엔드 프론트엔드 파일을 만들어서 사용하고 있기 때문

wjstkwhwjdgus

앞서 ESLint와 Prettier를 설정했지만, 해당 기능들은 결국 개인이 직접 npm run lint && npm run format을 실행해야만 적용된다. 즉 팀원 중 누군가가 해당 명령어를 실행하지 않았거나, 에디터 내 포맷 적용하여 저장(VScode의 경우 'format on save' 옵션) 기능을 사용하지 않았다면 해당 기능들은 무용지물이 된다. 이런 경우를 방지하기 위해 모두에게 적용될 코드, 즉 Github에 올라갈 코드에는 ESLint와 Prettier가 반드시 적용되도록 도와주는 것이 Husky이다. Husky > Husky improves your commits and more 🐶 woof! You can use it to lint your commit m

wjstkwhwjdgus

왜 초기 환경설정을 해야 하는가? 혼자하는 프로젝트라면 몰라도, 팀 프로젝트에서는 제각각의 개발환경이 발목을 잡는 경우가 있다. 예를 들어 쌍따옴표를 사용하는 팀원이 있고 홑따옴표를 사용하는 팀원이 있을 텐데, 그대로 프로젝트를 진행한다면 코드 병합 과정에서 따옴표가 서로 달라서 conflict가 발생할 것이다. 이는 프로젝트 전체적으로 봤을 때 중요한 부분도 아니며, 이런 개발 외적인 사소한 conflict가 지속된다면 프로젝트를 효율적으로 진행한다고 보기 어려울 것이다. 즉 개발 환경설정은 개개인의 개발환경을 팀 단위로 통일해, 프로젝트의 개발 자체에 집중하는 데 그 의의가 있다고 할 수 있다. 자바스크립트 언어 기준으로, 개발환경을 세팅하는 데에는 크게 두 가지 라이브러리가 대표적이다. 코드의 문법을 담당하는 ESLint, 코드의 형태를 담당하는 Prettier 가 그것이다. 해당 라이브러리들은 모두 --save-dev 키워드를 사용해 dev

lgs03042

1. 현재 상황: 프로젝트를 진행하면서 husky를 사용해 Git Hooks에서 자동으로 코드 포매팅과 린팅을 적용하고자 했습니다. 현재 설정에 따르면: pre-commit 시점에서: 전체 코드 베이스에 prettier 포매팅이 적용됩니다. pre-push 시점에서: 전체 코드 베이스에 eslint 검사가 수행됩니다. 2. 문제점: git commit 할 때마다 전체 파일에 prettier가 적용되면, 커밋하고자 하는 파일이 아닌 다른 파일까지 포매팅이 되어 원하지 않는 변화가 일어나기 쉽습니다. 이로 인해 파일을 나눠서 커밋하고자 할 때, 선택적으로 파일을 스테이징하더라도 결국 모든 변경된 파일이 커밋에 포함됩니다. 3. 해결 방법: lint-staged 사용하여 pre-commit에서의 포매팅 조정 우리의 목표는 커밋할 파일만 포매팅하고 전체 코드 베이스의 린팅은 푸시하기 전에만 수행하는 것입니다. lint-staged

dbwlgp1yng

⚙ Project Setting 사실 팀프로젝트를 시작하기 전까지, 코드 포맷을 맞춰야 한다고 생각해보지 못했었다. 하지만 개발은 혼자 작업하는 것이 아니라 하나의 프로젝트를 여러 개발자들과 같이 작업하는 것이기 때문에 코드 스타일이 복잡해질 것이다. 각자 다른 코딩 스타일을 가지고 있을 것이고, 통일된 스타일이 아니라면 남이 읽었을 때 이해하기 힘들어지기 때문에 작업자들의 코딩 스타일을 일치시키기 위한 Linter와 Code Formatter를 사용하는 것이 좋다. > 이러한 도구들을 사용하게 되면 어떤 형태의 문법을 지향하고 지양할지, 포맷팅은 쌍따옴표를 사용할지, 홑따옴표를 사용할지, 혹은 몇 자마다 줄바꿈을 할지, 문장의 끝에 세미콜론을 사용할지 등의 여부를 고민하지 않고 **코

jhsung23

husky 도입 앞서 eslint, prettier 셋팅 방법에 대해 포스팅을 했습니다! (husky를 위한 빌드업이었어요) 힘들게 eslint, prettier 설정 셋팅을 했는데 저장할 때 자동 포맷팅 설정이 해제돼 있거나, 까먹음 등등의 이유로 사용하지 않는다면 마음이 아프겠죠.. 그래서 린팅과 포맷팅을 강제하기 위해 커밋하거나 푸시하기 전에 린팅과 포맷팅이 무조건 수행되도록 동작을 걸어줄 수 있습니다. 이게 바로 git hook인데요, git hook은 깃의 특정 이벤트가 발생하기 전/후에 특정 hook을 실행할 수 있게 하는 것을 말합니다. 즉, 커밋 또는 푸시와 같은 깃 이벤트가 발생하기 전에 린팅/포맷팅 같은 특정 동작(hook)을 실행하도록 하는 것이죠. 다만, git hook 설정은 까다롭고 모든 팀원

somin

7월 말- 8월 초 원티드 프론트엔드 인턴십에 지원했다. 사전 과제를 제출하고 선발된 인원에 한하여 참여할 수는 인턴십이다. 6월에 지원했다가 떨어져서 또 지원을 해도 괜찮을까 고민하다가 약 한달 반동안 공부한 내용으로 열심히 해보자! 하는 마음으로 사전과제를 시작했다. 1차 제출 기한을 맞춰 제출하기 위해 조금 빠듯하게 진행해서 디테일한 부분은 신경쓰지 못한 것이 아쉽다. 하지만 결과는 합격이다!!!☺️ 사전 과제 github 링크 : https://github.com/somin00/wanted-pre-onboarding-frontend 첫 세션 후 바로 멘토님의 과제가 주어졌다. 첫 팀프로젝트는 각 팀원이 제출한 사전과제 코드에서 각 기능의 Best Practice를 선정하여 하나의 프로젝트를 만드는 것이다. 진행 방식은 전체적으로 봤을 때의 Best Practice를 뽑고 개선할 부분의 Best Practice를 합치는 방식으로 결정했다. 대략적으로 논의한 후 구현할 부분

ktw9115

✅ eslint Lint가 필요한 이유 >✌️ 코드린터는 버그가 날 수 있을 만한 코드, 의심스러운 구조, 타입스크립트 등을 찾아서 잡아주는 도구이다. ✌️ import 순서를 잡아주거나, ==, ===와 같이 여러사람이 다르게 쓸 수 있는 부분을 ==(금지), ===(허용) 규칙들을 넣어주어 통일 시킬 수 있다. ✌️ 한 사람이 쓴 것처럼 표현된다. 일일히 작업할 수 없기때문에, 코딩 스타일 자동화 툴이 필요하다. 설정 파일 >✌️ init @eslint/config를 하여 설정파일을 생성하고, 확장 프로그램 ESLint를 깔아줘야 vs가 이해하고 해석할 수 있다. 타입스크립트를 사용할 경우 설정파일과 연결해줘야 에러를 잡을 수 있다. ✌️ .eslintrc.확장자로 설정 파일을 직접 만들어 줄 수 있다. 확장자를 안쓰면 json처럼 인식하고, 주석을 허용한다. 타입스크립트와 연결 > rules: { "react/react-

younghwan

Eslint 와 prettier 는 오래전부터 접해왔지만 왜인지 손이 잘 안가던 친구들이었다. 잘 알지도 못하는거 건들이기 싫은 묘한 고집이었달까... 이번 기회에 한번 정리해보려한다. Eslint? Prettier? > 코드 퀄리티를 위한 eslint, 깔끔한 코드를 위한 prettier eslint eslint-config-prettier（eslint에서 prettier와 겹치는 포매팅룰을 삭제） prettier Eslint 예를 들어 함수 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있다. 또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있다. 이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는

babypig

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter Prettier · Opinionated Code Formatter 사용 이유 일관된 코드 스타일 유지 코드 품질 검사 자동 코드 포맷팅 💡 결과적으로 코드의 일관성, 품질, 가독성, 유지 보수성을 향상시키고 개발 과정에서 생산성을 높일 수 있습니다. ESLint 사용 전제 조건 Node.js  (^12.22.0, ^14.17.0, or >=16.0.0) 사용 방법 💡 프로젝트의 root 경로에 .eslintrc , .prettierrc 를 만들어 줍니다. ESLint & Prettier 는 프로젝트를 개발할 때 필요한 도구들이므로, 프로덕션 환경

bohongu

husky 개요 팀 단위로 작업할 때 여러 작업들의 코딩 스타일을 일치시키기 위해 ESLint와 Prettier를 도입 하지만 패키지를 설치하고, 룰을 설정해도 작업자가 사용을 하지않으면 효과가 없음 자동화를 통해 신경쓰지 않아도 자동으로 적용되게 해야함 그래서 Git hook을 도입 ( git에서 특정 이벤트 발생하기 전, 후로 특정 동작을 실행할 수 있게 하는 것 ) Husky는 git hook 설정을 도와주는 npm package 설치 npm install husky --save-dev npx husky install 설정 npm install 하면 자동으로 npx husky install이 실행되게 스크립트 설정 prepare 스크립트는 패키지가 패킹 되기 전에 실행되는 스크립트로 npm publish, npm pack 의 스크립트가 실행될 때, 로컬에서 파라이터 없이 `npm instal

icedlatte

파이널 프로젝트를 진행하며 제일 후회 했던 것 중 하나가 처음부터 Lint와 Formatter를 설정하지 않은 것이다! 컴포넌트 생성(화살표 함수 vs 일반 함수), quotation( ' ' vs " "), 그리고 사용하지도 않는 변수를 만들어 놓고 git에 push 하고, 테스트로 console.log() 찍어놓고 push하고.. 정말.. 어지러운 코드 덩어리가 만들어졌다. 토이 프로젝트 같은경우 끝나고 리팩토링을 하며 코드에 일관성을 주었는데, 파이널 프로젝트 같은 경우는.. 진짜 답이 없더라..! 내가 봐도 보기 힘든 코드인데, 제 3자는 얼마나 더 보기 힘들까..^^!...그러면서 궁금했던게.. 그럼 현업에서는 더 많은 사람들이 같이 코드를 짤텐데 어떻게 일관적인 코드를 유지하는지 궁금했다. 찾아보니 팀으로 작업을 할 때는 여러 작업자들의 코딩 스타일을 일치시키기 위한 Linter와 Code Formatter를 사용하는 것이 좋다고 한다. Linter & Code

inhudev

개요 팀 프로젝트를 할 때 코드 컨벤션을 정하긴 했지만 사람인 이상 스스로의 의지로 모든 컨벤션을 지키기는 쉽지 않았다. 가끔 컨벤션을 정의해놓은 문서를 보는 것이 번거로워서 내 마음대로 작업한 경우도 있었다 🙄 특히 코드 리뷰 문화가 있는 회사에서 코딩 스타일 지적을 리뷰로 남기기에는 뭔가 애매하고 쪼잔(?)해 보이지 않을까? 개발자 간의 서로 다른 코딩 스타일을 하나로 통일해서 깃에 올릴 수 있다면 로직이나 구현 방법에 초점을 맞춰서 코드 리뷰와 개발을 할 수 있을 것이다. 이 때 유용한 도구가 Linter와 Code Formatter이다. Linter > Lint is the computer science term for a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs. 위키피디아에 따르면 프로그래밍이나

unhyif

회사에서 마이그레이션을 진행하면서 포맷팅이 제대로 안 된 코드가 많아졌고, github 레포지토리를 변경했을 때 기존의 build workflow를 다시 등록 안 하는 바람에 type error 위험성이 커지기도 했다. 코드를 자동으로 검사하는 데에 Husky와 GitHub Action이 편리해 보여서 이 둘을 try 해보았다! 본 글에서는 yarn을 사용하였고, prettier/eslint는 이미 셋업되어 있다고 가정한다. 이 글에선 이들에 대해서는 자세히 다루지 않을 예정이다. Husky > git hook 설정을 도와주는 라이브러리 git hook은 commit/push와 같은 git 관련 이벤트가 발생했을 때 특정 스크립트를 실행할 수 있도록 해주는 기능이다. husky를 이용하면 라이브러리 설치 시 자동으로 git hook들을 설정해 줄 수 있어서 팀원들과 공유하기에 용이하다. husky의 작동 방식을 미리 한 줄 요약하면, > 이벤트 발생

hanseungjune

1. OverView 하드 스킬 (기술적인 역량) 프로그래밍 언어와 기술 스택에 대한 이해와 숙련도 알고리즘과 자료구조에 대한 이해와 구현 능력 데이터베이스 관리 및 쿼리 작성 능력 웹 개발, 앱 개발 등의 특정 분야에 대한 전문 지식 개발 도구와 개발 환경에 대한 숙련도 (IDE, 버전 관리 시스템 등) 소프트 스킬 (협업과 커뮤니케이션 능력) 효과적인 커뮤니케이션 능력 (구두 및 문서로의 설명, 팀원들과의 원활한 대화) 효율적인 협업 능력 (프로젝트 관리, 작업 일정 조율, 업무 분담) 문제 해결과 판단력 (복잡한 상황에서 문제를 분석하고 해결책을 찾는 능력) 적응력과 유연성 (변경된 요구사항에 대응하고 새로운 기술에 대한 학습과 적용) 팀워크와 리더십 (팀원들과의 협업을 도모하고 리더십을 통해 프로젝트를 이끌어나가는 능력) 이러한 역량들은 개발자가 혼자서만 작업하는 것이 아닌 팀과의 협업과 소통이 필요한 환경에서 중요하

navyjeongs

프로젝트를 여러 명이서 진행하거나 가독성 좋은 코드를 위해 코딩 컨벤션을 지켜야한다. 해당 포스팅에서는 vite로 react 프로젝트를 만들어서 다음과 같은 초기 세팅을 진행할 예정이다. eslint prettier 절대 경로 husky #1에서는 eslint, prettier, 절대 경로까지 작성하고 #2에서 husky 사용을 작성할 예정이다. vite 프로젝트 만들기 vite 프로젝트를 생성한다. 자신이 사용하는 패키지 매니저에 따라 다음의 명령을 입력하면 된다. 나는 yarn을 사용할 것이다. > npm : npm create vite@latest yarn : yarn create vite 해당 명령을 입력하면 아래와 같은 화면이 나올 것이다. 가장 먼저 프로젝트 명을

huiseon37

eslint 1. ESLint & Prettier 1.1 ESLint? JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다. 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있다. 그러나, 인터프리터 언어인 JavaScript는 Linter가 존재하지 않는다. 따라서 런타임 환경에서 에러가 발생할 확률이 높다. ESLint는 JavaScript 문법에서 에러를 표시하여 런타임 환경에서 발생하는 에러를 코드를 실행하지 않고도 잡을수 있도록 도와주는 도구이다. ESLint는 에러로서 정말 문제가 되는 부분만을 지정할 수도 있고, 전반적인 코딩 스타일 까지도 지정할 수 있어 많은 사람들과 협업할때 코드 컨벤

yminj1029

서론 프리온보딩 팀과제를 하면서 주로 했던 세팅에 대한 정리입니다. 내가 보려고 쓰는 환경설정 1에서 코드 스타일과 규칙을 지키기 위한 ESLint와 Prettier를 설치했습니다. 2에서는 git hook을 사용하여 작업자가 팀 안에서 규정한 rule을 지킬 수 있도록 강제성을 부여하는 법에 대해 설명합니다. 본문은 아래 4가지 내용에 대해 서술하며, 설정 방법을 설명합니다. git hook이란? husky lint-staged 설정하기 conventional commit message 설정하기 본론 Git Hooks Git Hooks는 Git에서 이벤트가 발생할 경우에 실행할 수 있도록 제공하는 스

drk

Lint? Format? Lint lint란 본래 스웨터의 보푸라기 같은 것을 말한다. 당장 조금의 보푸라기가 있어도 옷을 입는 데는 지장이 없지만, 보기에 지져분해보이고, 점점 많아진다면 계속해서 그 옷을 입기에는 무리가 있을 것이다. 프로그래밍에서도 보푸라기 같이 튀는 코드들을 linter로 제거하여 보기에도 깔끔하고 유지보수하기에도 좋은 코드를 만들 수 있다. 대표적인 linter로는 ESLint가 있고, JSHint, Pylint 등도 linter의 일종이다. Format 코드에서 포맷팅이란, 코드를 일정한 규칙에 따라 코드를 재정렬해주는 것을 말한다. 가독성을 높여주고, 일관성있는 규칙에 따라 정렬해주는데, 로직을 직접 변경해준다기보다는 팀에서 사전에 정한 규칙대로 적용해준다고 보면 된다. 대표적인 formatter로는 Prettier가 있다. Prettier prettier 설치 및 설정 위 명령어

seunghwan7305

안녕하세요 오늘은 코드분석을 자동으로 해주는 prettier , eslint , husky에 대해서 알아보겠습니다 ! 지금까지 Prettier와 Eslint는 단순히 코드일관성을 유지해주는 코드 분석 툴이라고만 알고있었고 익스텐션만 깔아놓고 관심을 가지지않았는데 협업을 하는과정에서husky의 중요성을 알게되면서 prettier와 eslint도 더 깊게 공부를 해보았고 잊어버리지않게 포스팅하게되었습니다 ! 🙂 prettier와 eslint를 쓰는이유 혼자 개발을 진행할떄는 쓰는 이유가 적어지지만 협업을 할 떄 필요성이 커지는 코드 분석 툴입니다. prettier eslint를 왜 쓰세요? 라는 물음을 받았을떄 한 줄로 설명하자면 라고 대답해도 되지만 이번 포스팅에서는 쪼끔 더 깊게 알아보겠습니다. prettier란? 코드 포맷팅 툴 포맷팅 룰을 커스터마이징할 수 있다. 코드의 포맷팅을 툴을 사용함으로서 팀원 모두가 같은 포맷팅