본문 바로가기

Development/DX6

[DX] husky 적용 - 하나의 레포에 frontend와 backend 코드가 함께 있는 경우 들어가면서오픈소스에 처음 기여를 하면서 PR을 올렸는데 CI가 통과하지 못해 fail이 떠버렸다. 무슨 실수라도 한거 아닌가 하여 떨리는 마음으로 확인해보니 lint와 format을 적용하지 않고 올려서 문제가 되었다. 나중에 다른 PR도 확인해보니 다들 npm run format을 한 번씩 다시 한게 보여 commit 혹은 push 실행 전에 lint와 format을 자동으로 적용하도록 husky를 적용해야겠다고 생각했다. 그 과정에서 알게 된 것을 정리하였다.git hooks과 huskygit hooks 란?git hooks는 git에서 발생하는 특정 이벤트(ex.commit, push)에 자동으로 실행되는 스크립트이다. git hooks를 사용하면 특정 이벤트가 발생할 때 자동으로 사용자가 지정한 .. 2024. 9. 1.
[DX] ESLint, Prettier 무엇인지 알고 설정해보기 들어가면서ESLint와 Prettier는 React의 기능이 아니지만, React 프로젝트에서 자주 사용하는 도구이기 때문에 해당 카테고리에 기술한다.  Prettier와 Lint를 사용하지 않으면 다음과 같은 문제가 발생할 수 있다.  - 의도하지 않은 구현 실수 때문에 에러가 발생하는 경우(예를 들어, 일관되지 않게 function과 arrow function를 혼용하여 this 바인딩이 의도한대로 발생하지 않는 문제) - 협업하는 인원이 많아질수록 개개인별 코드짜는 스타일이 달라 가독성이 떨어지는 경우(예를 들어, 줄바꿈이 4줄코드와 2줄인 코드의 연속적인 충돌 혹은 사용하지 않는 인자들의 잔재) 이러한 문제들은 작지만 신경 쓰이는 부분들로, 개발 생산성을 저하시킬 수 있다. (사실 필자가 겪은 .. 2024. 6. 3.
[Intellij] .(점)으로 구분되는 디렉토리 구조 - Compact Middle Packages 해제 Spring 새내기로서 Spring의 파일 구조를 익히기 위해 일단 계층별 디렉토리 구조를 살펴보고자 했다.Intellij에 익숙하지 않는 필자... 디렉토리 만드는 것부터 헤매는 모습을 보았다.Intellij 폴더 만드는 법1. 마우스 오른쪽 클릭2. New > Package.(점)으로 구분되는 디렉터리 구조 해제하는 법그런데 여기서 문제점은 폴더별 구조를 나누기 위한 작업을 하려고 했는데 아래 폴더로 만들어지지 않고다음과 같이 .(점)으로 구분되게 끔 만들어지는 것이다.  해결방법은 프로젝트 윈도우 우측 상단에 보이는 톱니바퀴 세팅을 누르고, Compact Middle Packages 세팅을 해제해주면 디렉터리 구조가 풀어진다.   하지만, 이 경우 프로젝트 규모가 커지면 불편해질 수 있기 때문에 S.. 2023. 6. 12.
[용어] deprecated / obsolete 의 의미는? 프로젝트 코드를 수정하다가 deprecated를 발견했다.  (이 글은 deprecated의 의미를 기억 및 기록해두기 위해 !) deprecated앞으로 지원되지 않을것이므로 사용을 자제 해달라는 의미이다.  그렇다면 완전히 없어져서 더이상 지원하지 않을 경우는?⇒ obsolete 를 쓰면 된다. 사전적인 의미[deprecated] ⇒ like 폐지예정: 중요도가 떨어져 더 이상 사용되지 않고 앞으로는 사라지게 될 (컴퓨터 시스템 기능 등) [obsolete] ⇒ like 폐지됨: 더 이상 쓸모가 없는, 한물간, 구식의 (지우기는 애매하고 쓰지 않을 코드에 써먹어봐야겠다.) 2023. 4. 26.
Mac에 Homebrew 설치하기 Homebrew 설치하기1. 아래 명령어를 터미널 붙여넣는다.코드를 복사하고 싶다면, 해당 링크로 들어가 코드 복사 하기 - https://brew.sh/index_ko/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"위 명령어 사용하여 Homebrew를 설치한다.완료 후, brew help 등 명령어를 실행하면, zsh: command not found: brew 와 같은 에러가 발생한다. 2. 이후, 아래 명령어를 터미널 붙여넣는다.eval $(/opt/homebrew/bin/brew shellenv)* eval 명령어: 기회를 한 번 더 달라, 이 라인을 다시 해석하고 실행하라 라.. 2023. 4. 5.
nvm(node version manager) 설치 과정 nvm 이란,nvm이란 Node Version Manager의 약자로, Node.js 설치 및 버전 변경을 관리해주는 도구이다.  nvm을 사용하여 상황에 맞게 Node.js를 원하는 버전으로 설치, 변경 가능하다.nvm 설치 이유간략하게, 다른 팀원들과의 node, npm 버전을 맞추기 위함이다. nvm 설치 과정1. 아래 명령어를 터미널 붙여넣는다.curl -o- | bash2.  nvm을 확인했을 경우, 다음과 같이 command not found가 뜰 것이다.$ nvm ls -bash: nvm: command not found3. vi ~/.zshrc를 이용하여 zshrc에 환경 변수 설정한다.vi ~/.zshrc4. vi 에디터로 zshrc 안에 삽입 및 확인을 한다.알파벳 i (insert).. 2023. 4. 5.