Kang Byeong-hyeon 👨🏻💻Kang Byeonghyeon’s dev blogkang-kibong.github.io 깃허브 블로그로 블로그를 이전하려고 합니다.이전 포스팅에 대한 내용도 모두 업로드 되어있습니다.더 자세한 내용은 해당 블로그를 통해서 확인 가능합니다. 티스토리 안녕! 👋
분류 전체보기
Husky란? Husky는 Git의 특정 이벤트(commit, add, push) 전후로 특정 hook을 동작할 수 있도록 하는 도구이다.개발 과정에서 패키지를 설치하고 룰을 설정해도 작업자가 이를 실행하지 않으면 효과가 없기 때문에 특정 상황에서 자동화를 통해 실행의 강제성을 부여하면 좋다.가령, commit된 코드는 무조건 formatting되어야 하고 push된 코드는 무조건 eslint가 pass되어야 한다는 규칙을 자동화로 구현할 수 있다.하지만 이러한 자동화를 위해 Git Hook을 직접 설정하기에는 매우 까다롭다.이를 간편하게 해결할 수 있는 패키지가 Husky이다. Husky 실행하기다음 명령어를 입력하면 Husky 라이브러리 설치와 동시에 실행이 완료된다.npx husky init해당 명..
어떻게 진행되는가?1학기 동안 총 10주에 걸쳐 진행한 카카오 테크 캠퍼스 1단계인 개발 기초 교육이 끝났다.1단계에서는 제공해주신 강의와 라이브 특강을 듣고 매주 학습일지를 제출해야 한다.추가로 2번의 미니과제를 수행하고 깃허브로 PR을 날려 제출해야 한다. 강의는 필수 강의와 선택 강의로 나뉘어지는데, 선택 강의는 부족한 부분이나 더 학습하고 싶을 때 선택해서 들을 수 있는 강의이고, 필수 강의는 카카오 테크 캠퍼스에서 정한 필수 수강률에 맞춰 학습해야 한다. 아무래도 학기 중에 진행하는 것이다 보니 학업과 병행해서 진행한다는 점에서 매우 힘들었다.강의도 매우 디테일하고 양도 상당한데다가 학습한 내용을 일지에 정리하는 것까지 하면 시간이 매우 부족하기 때문이다. 무엇을 얻었나?디테일한 학습의 기회이..
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을 시도하면 작동하지 않는 문제를 겪을 수 있다.왜냐하면 내부 ..
