프로젝트/진행중! (3) 썸네일형 리스트형 Playground) Histoire 설치 및 사용 Histoire Fast stories powered by Vite histoire.dev Historie는 어찌 읽나 헷갈리는데 공식 문서에 따르면 "이스투아" 라고 읽는다. 이스투아는 컴포넌트를 개발해서 props를 마음대로 변경할 수 있는 UI를 제공한다. 원래는 storybook 을 적용하고 싶었는데 생각보다 너무 무거워서 histoire로 변경했다. Histoire 설치 일단 나는 vue3 프로젝트에서 사용하기 때문에 여기를 참고했다. pnpm i -D histoire @histoire/plugin-vue # OR npm i -D histoire @histoire/plugin-vue # OR yarn add -D histoire @histoire/plugin-vue Histoire setting.. Husky로 Commit Message 포맷 설정 git hook과 husky에 대한 설명은 아래 포스트에 작성해두었다. Frontend) Git-husky가 무엇인가 1. Git Hooks이란? 특정 상황에 특정 git 커맨드를 실행할 수 있는 기능 따로 설치할 필요는 없고 .git/hooks/ 파일에 들어가면 .sample 확장자로 되어 있는 파일들이 git 에서 지원하는 hook 들이다. 여기서 seungyooon.tistory.com commit을 남길 때 git hook으로 메시지 포맷을 확인하려고 했다. 찾아보니 commitlint라는게 있었다. 그래서 그걸 설정해주고 commit-msg hook에 commitlint를 한번 체크해주기로 했다. 위 포스 Commit Types 커밋을 너무 어렵게 남겨야 된다면 남기기 싫어질..거니까 간단하게 .. eslint 적용 + GitHub Actions로 npm 패키지 자동 배포 Eslint란? 코드 내 문법적 오류나 정의된 스타일과 패턴에 맞지 않는 부분을 찾아내는 정적 분석 도구이다. 특히, vscode에서 eslint를 적용하고 다음과 같은 설정을 추가하면 prettier를 사용하지 않고도 파일 수정 사항을 저장할 때 eslint 규칙에 맞게 자동으로 수정할 수 있어 매우 편리하다. 근데 지금 새로 산 맥북에서 이제 적용이 안됨.. 왜지.. 해결하고 관련 문제 해결 과정도 남겨야겠다. "editor.codeActionsOnSave": { "source.fixAll": true, }, "editor.formatOnSave": true, 사수님의 주도 하에 팀 내 eslint config를 만들었다. 여러 사람이 프로젝트에 참여하다보니 코드 스타일이 너무 각양각색이라 코드가 너.. 이전 1 다음
