목록분류 전체보기 (26)

FEB:)DAIN

git hooks(커밋 메시지에 이슈 번호 자동 입력)와 husky 충돌 개선

2023.07.04 - [코딩/공부] - 깃 커밋 메시지에 이슈 번호를 자동으로 입력할 순 없을까? 깃 커밋 메시지에 이슈 번호를 자동으로 입력할 순 없을까?프로젝트 브랜치명 컨벤션이 feat/이슈번호여서, 브랜치명에서 이슈번호만 가져온 다음 커밋할 때마다 커밋 메시지 아래단(footer)에 이슈 번호를 자동으로 입력해주고 싶었다. 자동으로 입력된다feb-dain.tistory.com 2023.07.19 - [기록/프로젝트 카페인] - husky로 prettier, eslint 적용 자동화하기 husky로 prettier, eslint 적용 자동화하기가끔 팀원 중 한 명이 prettier 적용을 하지 않고 push하는 일이 있었다. 그래서 이런 실수를 아예 방지하기 위해 husky를 이용해 prettie..
코딩/트러블 슈팅 2023. 7. 20. 15:06
husky로 prettier, eslint 적용 자동화하기

가끔 팀원 중 한 명이 prettier 적용을 하지 않고 push하는 일이 있었다. 그래서 이런 실수를 아예 방지하기 위해 husky를 이용해 prettier, eslint 적용을 자동화하기로 했다. 1) husky 설치 yarn add -D husky // or npm install --save-dev husky devDependency로 husky를 설치한다. husky v5에서 잠깐 라이선스 문제가 있었지만, 지금은 괜찮다. 최신 버전으로 설치해도 된다. 1-1) script 설정 후 실행 //package.json "scripts": { ... "prepare": "cd .. && husky install frontend/.husky && cd frontend", "prepare:mac": "cd..
기록/프로젝트 카페인 2023. 7. 19. 16:51
import를 깔끔하게 정리하고 싶어

프로젝트를 진행하다가 규칙도 없고 중구난방인 import를 정리하고 싶어졌다. import 순서를 eslint, prettier로 정리할 수 있는데 나는 prettier로 정리하기로 했다. 아래의 순서대로 진행하면 import를 깔끔하게 정리할 수 있다. 1) @trivago/prettier-plugin-sort-imports 설치 yarn add -D @trivago/prettier-plugin-sort-imports // or npm i --save-dev @trivago/prettier-plugin-sort-imports 2) .prettierrc 설정 // .prettierrc { "importOrder": [ "^react(.*)", "^@tanstack/(.*)$", "^@map/(.*)$",..
기록/프로젝트 카페인 2023. 7. 15. 22:52
CSS만 이용해 모달 열려있을 때만 페이지 스크롤 막기

if (isOpen) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } 자바스크립트로는 이렇게 모달 상태가 open이면 document.body.style.overflow = "hidden"; 을 함으로써 스크롤을 막을 수 있다. 하지만 자바스크립트 없이 CSS로만 똑같은 기능을 구현할 수 있다. /* dialog 태그를 사용하고 .showModal() 메서드를 통해 dialog를 열었을 경우 */ body:has(dialog[open]) { overflow: hidden; } /* 모달에 클래스를 넣어 사용할 경우 */ body:has(.modal-open) { overflow: hidd..
코딩/사소한 꿀팁 2023. 7. 9. 02:11
스토리북 자동 배포하기 (chromatic, github actions)

0) Storybook 설치 npx storybook@latest init 1) https://www.chromatic.com/ 크로마틱 회원가입 2) Get started now 버튼 클릭 3) Choose Github Repo 버튼 클릭해 레포와 동기화 4) 프로젝트에 chromatic 설치 npm install --save-dev chromatic yarn add chromatic -D 5) 스토리북 chromatic으로 배포 npx chromatic --project-token= Github Action 추가 1) package.json에서 chromatic 명령어 제거 2) Chromatic 토큰 설정 레포지토리의 Settings > Security - Secrets and variables -..
코딩/테스트 2023. 7. 6. 12:12
깃 커밋 메시지에 이슈 번호를 자동으로 입력할 순 없을까?

프로젝트 브랜치명 컨벤션이 feat/이슈번호여서, 브랜치명에서 이슈번호만 가져온 다음 커밋할 때마다 커밋 메시지 아래단(footer)에 이슈 번호를 자동으로 입력해주고 싶었다. 자동으로 입력된다면 깜빡하고 이슈 번호를 안 적는 일도 없고, 시간도 단축할 수 있기 때문이다. 아래 순서대로 진행한다면 이슈 번호 POSTFIX 자동화를 할 수 있다. 1) 프로젝트 폴더에 .githooks 폴더 생성 2) .githooks 폴더에 commit-msg 파일 생성 #!/bin/bash COMMIT_MESSAGE_FILE_PATH=$1 MESSAGE=$(cat "$COMMIT_MESSAGE_FILE_PATH") # 커밋 메시지가 없을 때, 커밋 방지 if [[ $(head -1 "$COMMIT_MESSAGE_FILE..
코딩/공부 2023. 7. 4. 12:05
import React from 'react' 생략하는 법

import React from 'react'는 리액트 17부터 생략 가능하지만, CRA 없이 처음 환경 설정을 하다가 생략이 안 되는 문제가 발생했다. 1. 타입 에러아래와 같은 타입 에러는 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686) tsconfig.json에서 { "compilerOptions": { ... "jsx": "react" }"jsx": "react"를 "jsx": "react-jsx"로 바꿔주면 된다.{ "compilerOptions": { ... "jsx": "react-jsx" } 🤔 왜 이렇게 하면 생략이 가능할까?"compilerO..
코딩/트러블 슈팅 2023. 7. 1. 00:05
[카페인] 전기차 충전소 지도 서비스 프로젝트 시작 (6/27~)

목차1. 기획 1-1. 페르소나 2. API 결정 2-1. 충전소 정보 API 2-2. 지도 API 3. 개발 라이브러리 결정 4. 기능 목록 5. 디자인 1. 기획1) 급속 충전 기계가 모든 충전소에 있는 것이 아님 2) 충전소 회사 별로 할인 혜택이 다름 3) 차종에 따라 충전 단자가 다름 4) 충전소와 충전기 부족 ⇒ 원하는 전기차 충전소를 쉽게 찾을 수 있게 하자 5) 충전 속도가 느림 (완속 기준, 8 ~ 14시간 소요) 6) 충전 다하고 나서도 자리 차지하는 문제 발생 7) 주차 공간 부족 ⇒ 각 충전소 별 혼잡도를 제공해 사용자들이 혼잡한 충전소를 피할 수 있게 돕자 기획자의 발표를 듣고 현재 전기차 충전소의 문제를 인식했다. 사용자가 원하는 전기차 충전소를 쉽게 찾을 수 있고, 혼잡도를 확..
기록/프로젝트 카페인 2023. 6. 29. 00:29
이전 Prev 1 2 3 4 Next 다음