일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 카페인
- 이슈번호자동화
- 자바스크립트
- IDL attributes
- string-width
- 크로마틱
- 클린코드
- importOrder
- Husky
- chromatic
- 우아한테크코스
- 성능 베이스캠프
- 프로젝트
- 우테코
- react
- css instead of js
- 클로저
- prettier 자동화
- webpack
- storybook
- 프로젝트 카페인
- git hooks
- CSS
- eslint에러 자동fix
- vscode
- JavaScript
- import정리
- 협업
- 유틸함수
- eslint 자동화
- Today
- Total
목록코딩/공부 (5)
FEB:)DAIN
- 클로저를 설명하기에 앞서, 클로저는 하나의 어떤 것을 정의하는 개념이 아니기 때문에 사람마다 말하는 클로저가 다를 수 있다. 1. 함수의 주변 상태(렉시컬 환경)에 대한 참조를 같이 가지고 있는 함수는 클로저다. 즉 (new Function을 제외한) 모든 함수가 클로저라고 할 수 있다. (= 자바스크립트의 클로저) A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an..
1. 요청 크기 줄이기 1-1. 소스코드 크기 줄이기 - minify/uglify const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); plugins: [ ... new MiniCssExtractPlugin() ], module: { rules: [ ... { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, 'css-loader'] }, ... optimization: { minimize: true, minimizer: ['...', new CssMinimizerPlugin()]..
1. public 폴더 안에 favicon.ico (파비콘 파일) 넣기 ❗만약 svg 파일을 ico 파일로 바꾸고 싶다면 https://convertio.co/kr/svg-ico/ 여기서 무료로 바꿀 수 있다. // index.html 2. index.html 파일 헤드 태그 안에 link 태그로 파비콘 넣기 (생략 가능) // webpack.config.js new HtmlWebpackPlugin({ template: './public/index.html', hash: true, favicon: './public/favicon.ico', }), 3. webpack.config.js에 위 코드 추가 이렇게 하면 정상적으로 파비콘이 뜨는 걸 볼 수가 있다!
Object.key/Entries/FromEntries 메서드를 사용하면 타입스크립트가 key 타입을 제대로 추론하지 못했다. 제대로 타입 추론이 되도록 하고 싶어서 유틸 함수를 만들기로 했다. // getTypedObjectKeys.ts export const getTypedObjectKeys = (obj: T) => { return Object.keys(obj) as Array; }; // getTypedObjectEntries.ts type Entries = { [K in keyof T]: [K, T[K]]; }[keyof T][]; export const getTypedObjectEntries = (obj: T) => { return Object.entries(obj) as Entries; }; ..
프로젝트 브랜치명 컨벤션이 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..