✨ 프론트엔드

Husky란? Husky는 Git의 특정 이벤트(commit, add, push) 전후로 특정 hook을 동작할 수 있도록 하는 도구이다.개발 과정에서 패키지를 설치하고 룰을 설정해도 작업자가 이를 실행하지 않으면 효과가 없기 때문에 특정 상황에서 자동화를 통해 실행의 강제성을 부여하면 좋다.가령, commit된 코드는 무조건 formatting되어야 하고 push된 코드는 무조건 eslint가 pass되어야 한다는 규칙을 자동화로 구현할 수 있다.하지만 이러한 자동화를 위해 Git Hook을 직접 설정하기에는 매우 까다롭다.이를 간편하게 해결할 수 있는 패키지가 Husky이다. Husky 실행하기다음 명령어를 입력하면 Husky 라이브러리 설치와 동시에 실행이 완료된다.npx husky init해당 명..

Storybook 소개Storybook은 UI 테스팅 툴로, 내부 개발자를 위한 문서화 도구와 외부 공개용 디자인 시스템의 기본 플랫폼으로 활용된다.Storybook의 기본 구성 단위는 스토리(Story)로, 하나의 UI 컴포넌트는 여러 개의 스토리를 가질 수 있다.각 스토리는 컴포넌트의 사용 예시를 보여주기 때문에 Storybook을 사용하면 UI 컴포넌트를 독립적으로 시각적으로 테스트하며 개발할 수 있다.이를 통해 UI 라이브러리를 사용하는 개발자들은 코드를 보지 않고도 컴포넌트를 체험하고 활용할 수 있어 매우 유용하다.  Storybook 설치 및 설정하기Storybook 설치하기Storybook 설치를 결정했다면 npx storybook@latest init 명령어를 입력하면 설치할 수 있다.프로..

Prettier  Prettier는 코드 정리 규칙을 세부적으로 설정해놓으면, 정해진 규칙에 맞게 자동으로 정렬해서 가독성을 높이고 코드 스타일을 통일할 수 있는 플러그인이다. Prettier 설치하기npm install -D prettier 를 통해 prettier를 개발자 모드로 설치한다. Prettier 옵션들 톺아보기{ "arrowParens": "always", // 화살표 함수의 매개변수가 하나일 때 괄호를 사용할지 여부 "bracketSpacing": true, // 객체 리터럴에서 중괄호 내부에 공백 삽입 여부 "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 ..

tsconfig.json 설정을 통한 절대 경로 설정하기기존의 import 경로를 상대경로로 설정하면 코드의 길이가 불필요하게 길어지는 단점이 있다.이를 해결하기 위해 절대 경로를 설정하여 불필요한 코드의 길이를 줄일 수 있다.먼저, tsconfig.json 파일의 compilerOptions에 baseUrl을 "."으로 설정하고 paths를 통해 경로를 설정해준다. { "compilerOptions": { "baseUrl": ".", "paths": { "src/*": [ "src/*" ] } }} 이 설정은 src를 루트로 했을 때는 동작하지만, src를 제외한 다른 경로로 aliasing을 시도하면 작동하지 않는 문제를 겪을 수 있다.왜냐하면 내부 ..