일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 프로젝트
- 우아한테크코스
- storybook
- CSS
- 클로저
- 프로젝트 카페인
- IDL attributes
- 협업
- 성능 베이스캠프
- prettier 자동화
- 클린코드
- 우테코
- eslint 자동화
- 자바스크립트
- webpack
- git hooks
- css instead of js
- 크로마틱
- eslint에러 자동fix
- string-width
- chromatic
- Husky
- import정리
- react
- 유틸함수
- 카페인
- vscode
- importOrder
- JavaScript
- 이슈번호자동화
- Today
- Total
목록코딩 (20)
FEB:)DAIN

프로젝트 브랜치명 컨벤션이 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..

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..

우아한테크코스 페어프로그래밍을 할 때, 페어들에게 단축키와 익스텐션 질문을 많이 받았다. 그래서 개인적으로 잘 사용하고 있는 유용한 단축키와 익스텐션을 정리해 보기로 했다. ❗window 기준. Mac은 ctrl 대신 command 키를 사용하거나 그래도 되지 않는다면 사용자 설정을 통해 단축키를 설정하면 된다. 단축키 Multi Selection 👍 Ctrl+d 동일한 단어 선택 한 단어를 선택하고 ctrl+d 누르면 해당 단어와 같은 단어가 선택됨 (누를 때마다 순서대로 선택) Column (box) selection 👍 Ctrl+Shift+alt+↑ or ↓ 해당 열에 커서 생성 블록으로 전체 선택-> Shift+alt+드래그 Move Word Ctrl+← or → 단어 별 이동 Select Wor..

❗아래 방법들을 이용해 코드 양을 줄여 코드 가독성을 조금이나마 높일 수 있다. 1. 구조 분해 할당 (destructuring assignment) 구조 분해 할당 배열이나 객체의 속성을 해체하여 변수에 할당하는 자바스크립트 표현식 const { hi, hello } = greetings; console.log(hi, hello); // console.log(greetings.hi, greetings.hello); const getValue = ({ target: { value } }) => value; /* const getValue = (event) => event.target.value; */ const getTarget = ({ target }) => target; /* const getTarg..