일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- eslint 자동화
- webpack
- 카페인
- storybook
- 클로저
- vscode
- CSS
- 프로젝트
- 이슈번호자동화
- 유틸함수
- importOrder
- css instead of js
- 프로젝트 카페인
- IDL attributes
- react
- chromatic
- 우테코
- JavaScript
- 성능 베이스캠프
- 크로마틱
- Husky
- 협업
- git hooks
- import정리
- eslint에러 자동fix
- prettier 자동화
- 클린코드
- string-width
- 자바스크립트
- 우아한테크코스
- Today
- Total
목록코딩 (20)
FEB:)DAIN
https://stackoverflow.com/questions/64933543/parsing-error-cannot-read-file-tsconfig-json-eslint Parsing error: Cannot read file '.../tsconfig.json'.eslint The error Parsing error: Cannot read file '.../tsconfig.json'.eslint shows in all .ts files in the src folder including index.ts. I have no idea how to set up configs. The issue just shows a red li... stackoverflow.com 위 링크에 들어가면 Parsing erro..

[ ⚠️ 옛날 블로그에서 2022년 10월 9일에 작성한 글을 가져왔습니다. ] 리액트 공부를 하면서 공식 문서(영문)를 읽다가 문득 한국어 번역이 궁금해져서 한국어 버전을 읽어봤다. 리액트 - 엘리먼트 렌더링 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 그런데 위 글에서 한 문장만 번역이 안 되어 있었다. 이번 기회에 오픈 소스에 기여를 해보고자 오픈 소스 기여 방법을 검색했다. 주니어 개발자가 오픈 소스 기여하는 방법 주니어 개발자가 오픈소스 컨트리뷰션 하는 방법 내 인생 첫번째 오픈소스 컨트리뷰션(OpenSource Contribution) soniacomp.medium.com 검색을 ..

- 클로저를 설명하기에 앞서, 클로저는 하나의 어떤 것을 정의하는 개념이 아니기 때문에 사람마다 말하는 클로저가 다를 수 있다. 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..

React를 이용해 프로젝트를 하면서 제목과 같은 오류를 맞닥뜨렸다면 index.html 파일로 들어가 manifest 부분을 확인하면 된다. 만약 manifest.json 파일을 사용하지 않는다면 아래와 같은 코드를 지우면 된다. // index.html 하지만 PWA를 위해 manifest.json을 사용해야 한다면 3가지를 확인해야 한다. 1. 경로/오타 문제 rel="manifest" href="manifest.json" ✅️ [rel] "manifest"라고 잘 적혀있다. ✅️ [href] 올바른 경로로 설정되어있다. (index.html과 manifest.json이 같은 폴더 안에 있다면, manifest.json 파일 안 start_url이 "/"이라면 위의 경로가 맞다.) ⚠️ index...

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에 위 코드 추가 이렇게 하면 정상적으로 파비콘이 뜨는 걸 볼 수가 있다!

ctrl + shift + p (windows) / command + shift + p (mac)를 눌러 User Settings (JSON) 파일을 연다. 그리고 editor.codeActionsOnSave에 "source.removeUnusedImports": true를 추가해주면 끝이다! // settings.json { ... "editor.codeActionsOnSave": { ... "source.removeUnusedImports": true // ✨추가! }, }

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