FEB:)DAIN

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

var stringWidth = require('string-width') ^ Error [ERR_REQUIRE_ESM]: require() of ES Module ... code: 'ERR_REQUIRE_ESM' yarn storybook을 하니 갑자기 이러한 문제가 발생했다.🤔 절대 경로를 설정하다가 맞닥뜨린 에러라 절대 경로 때문인가 했더니 아니었다. 해결 방법은 다음과 같다. // package.json { ... "resolutions": { "jackspeak": "2.1.1" } } package.json 파일 안에 위 코드를 넣어도 오류가 날 경우, node_modules, yarn.lock을 지우고 다시 설치해 주면 된다. rm -rf node_modules yarn.lock yarn 다..

웹 접근성 왜 지켜야 해? 웹 접근성을 지키려고 드는 시간과 비용이 너무 크지 않아? 소수잖아. 소수를 위해서 그렇게까지 해야 해? 실제로 들었던 질문들이다. 생각보다 웹 접근성을 지켜야 할 필요성을 못 느끼는 개발자들이 많았다. 그래서 웹 접근성이 무엇이고, 왜 지켜야 하는지 궁금한 사람들을 위해 글로 정리해 보기로 했다. 목차1. 웹 접근성이란? 2. 웹 접근성을 지켜야 하는 이유 2-1. 장애인 차별 금지법 2-2. 장애인은 생각보다 많다. 2-3. 장애인 만을 위한 것이 아니다. 3. 적은 노력으로 웹 접근성을 개선하는 방법 1. 웹 접근성이란?WA(한국 웹 접근성 인증 평가원)에 따르면, 정보통신접근성(웹 접근성)은「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 ..

MSW란? Mock Service Worker의 약자로 API를 Mocking 할 때 사용하는 도구 API 요청을 가로채는 Service Worker 기능을 사용하여 mocking 할 수 있다. 로컬 서버는 key를 입력해서 들어가야 하는 등 번거로움이 있어 스토리북을 통해 개발을 하고 있었다. 그러던 중 API mocking이 필요해졌고, msw와 스토리북을 연동하기 위해 msw-storybook-addon을 설치했다. npm i msw-storybook-addon -D // or yarn add msw-storybook-addon -D 하지만 스토리북에서 msw가 잘 작동하지 않았다.🥲 TypeError: Failed to update a ServiceWorker for scope ('http://l..

Failed to execute 'createElement' on ... 오류가 났을 때, 아래의 순서대로 진행하면 된다. 1. @svgr/webpack 설치 yarn add -D @svgr/webpack // or npm install --save-dev @svgr/webpack 2. d.ts 파일에 코드 추가 원래 d.ts 파일에 `declare module '*svg' 만 있었는데 아래 코드를 추가해 주었다. // assets.d.ts declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FunctionComponent; const src: string; export default src..

예를 들어, type import를 했을 때 `import type { Type } from`이 아니라 `import { Type } from`을 하면 오류가 나도록 eslint rule 설정했다고 하자. // .eslintrc { ... rules: { ... 'react/self-closing-comp': ['error', { component: true, html: true }], '@typescript-eslint/consistent-type-imports': [ 'error', { prefer: 'type-imports', }, ], }, 오류가 났을 때 직접 type을 추가해 주는 것보다 파일 저장을 할 때마다 자동으로 type이 추가되면 작업 속도가 엄청 증가하게 된다. 만약 저장을 했을 때..