IT

[npm] npm install할 때 unable to resolve dependency tree 오류

요즘 npm intsall을 하면 이런 에러를 자주 마주하게 된다. 원인은 2021년 2월 출시된 npm 7버전부터 추가된 peerDependencies를 자동으로 설치하는 기능 때문이다. peerDependencies를 자동으로 설치할 때, 이미 설치되어 있는 의존성(direct dependencies of the root project)과 동일하지만 버전이 다른 peerDependencies가 존재하면 충돌이 일어나서 위와 같은 에러가 나게 된다. $ npm install @craco/craco --legacy-peer-deps $ npm install @craco/craco --force 해결하려면 npm install 모듈명 명령어 뒤에 --legacy-peer-deps 또는 --force를 추..

[TS] CRA에서 tsconfig paths로 절대경로 설정하기 (react-app-alias)

{ "compilerOptions": { "baseUrl": "./src", "paths": { "@components/*": ["./components/*"], "@assets/*": ["./assets/*"], "@styles/*": ["./styles/*"], "@contexts/*": ["./contexts/*"], "@hooks/*": ["./hooks/*"], "@utils/*": ["./utils/*"] } } } import Header from '@components/Header'; 원래 위와 같이 tsconfig에 baseUrl과 paths 속성으로 절대 경로를 설정할 수 있다. 그러나 CRA로 React 환경을 구축했을 때에는 tsconfig에서 paths를 설정했는데도 경로를 인식하..

[TS] TypeScript가 SVG 파일을 import하지 못하여 에러가 발생할 때

위 사진처럼 svg 파일을 import할 때 TypeScript에서 svg에 대한 타입을 찾을 수 없으면 에러가 발생한다. 별도의 d.ts 파일을 만들어서 svg 파일에 대한 타입을 지정해주면 에러가 사라진다. // svg.d.ts declare module '*.svg' { const value: React.FunctionComponent; export default value; } 참고자료 https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript Unable to import svg files in typescript In typescript(*.tsx) files I cannot import svg fi..

[React Testing Library] SVG 파일을 인식하지 못하여 SyntaxError가 발생할 때

SVG가 포함된 컴포넌트를 render할 때 SVG파일을 인식하지 못해서 "SyntaxError: Unexpected token ' { it('snapshot', () => { const { container } = render(); expect(container).toMatchSnapshot(); }); }); // __snapshots__/index.test.tsx.snap exports[`App snapshot 1`] = ` `; 태그 이름이 파일명과 동일하게 설정되어 있다. 또한, svg 태그 내에 존재하는 path 태그나 g태그 등의 다른 자식 요소가 전혀 없다. 2. jest-transformer-svg 사용하기 ※ jest-svg-transformer는 jest 27까지만 지원하는 버전이다...

[TS/Webpack/Jest] tsconfig paths를 사용할 때 Webpack, Jest 설정하기

TypeScript를 사용할 때 tsconfig에서 paths 설정을 통해 import 경로를 별도의 이름을 가진 절대 경로로 설정할 수 있다. paths를 설정하려면 baseUrl도 같이 설정해야 한다. { "compilerOptions": { "baseUrl": ".", "paths": { "@components/*": ["src/components/*"], "@assets/*": ["src/assets/*"], "@styles/*": ["src/styles/*"], "@contexts/*": ["src/contexts/*"], "@hooks/*": ["src/hooks/*"], "@utils/*": ["src/utils/*"] } } } 만약 CRA, CRN을 사용하지 않고 직접 Webpack 환경..

[JS] Invalid regular expression: invalid group specifier name

Safari에서는 정규표현식의 후방탐색(lookbehind, ?Invalid regular expression: invalid group specifier name가 뜨며 에러가 발생한다. 정규표현식에서 후방탐색을 대체하는 방법은 상황에 따라 다르겠지만 capturing group을 활용하면 아래와 같은 정규표현식에서 후방탐색을 대체할 수 있다. const str = 'string.001'; const number = str.match(/(?

[VSCode/Prettier] Prettier 설정 파일이 있을 때에만 적용하기

VSCode에서 Prettier 익스텐션 설치 후 Format On Save 설정을 체크하면 저장할 때마다 자동으로 Prettier가 적용이 된다. 그런데, 모든 프로젝트에서 Prettier를 적용하지 않고, 특정 프로젝트에서만 적용시키고 싶을 수도 있다. 아래의 두 가지 방법으로 해결할 수 있다. 1. settings.json 루트 디렉토리에 .vscode 폴더를 만들고 그 안에 settings.json을 만들어서 Format On Save 설정을 활성화할 수 있다. VSCode 기본 설정에 있는 Format On Save를 해제하고, Prettier 적용을 원하는 프로젝트에서 settings.json으로 개별적으로 설정해주면 된다. { "editor.formatOnSave": true } 2. Req..

[Webpack] build할 때 LICENSE.txt 생성되지 않게 하기

Webpack으로 빌드를 했을 때 이와 같이 LICENSE.txt 파일이 같이 생성되는 경우가 있다. terser-webpack-plugin 또는 clean-webpack-plugin 설정으로 LICENSE.txt 파일이 더 이상 생성되지 않도록 할 수 있다. 1. terser-webpack-plugin으로 해결하기 const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimizer: [ new TerserPlugin({ extractComments: false }) ] } }; 2. clean-webpack-plugin으로 해결하기 const { CleanWebpackPlugin } = req..

[jsDelivr] 무료 CDN 서버로 github 저장소 파일 배포하기

🚚 jsDelivr jsDelivr는 전세계에서 무료로 이용할 수 있는 CDN(Content Delivery Network) 서비스다. 전 세계 곳곳에 캐시 서버를 두고, 접속한 지역에서 가장 가까운 서버로부터 파일을 전송받게 되어 빠른 속도를 유지할 수 있다는 장점이 있습니다. jsDelivr는 무료이며 상업적으로도 이용할 수 있습니다. 다만, 이미지 CDN으로 사용하거나 대용량 파일 전송용으로 사용하는 것은 금지되어 있습니다. 📦️ github에 있는 파일을 jsDelivr로 CDN에 올리는 방법 별도의 업로드 과정이 필요 없고, 아래와 같은 형식으로 주소를 작성하면 됩니다. https://cdn.jsdelivr.net/gh/깃헙아이디/깃헙Repo이름@브랜치이름/파일이름 예를들어 https://git..

[JS] Selection API로 선택된 텍스트 정보 가져오기

Selection API Selection API는 웹 브라우저에서 현재 선택된 텍스트 또는 커서의 위치에 관련된 정보 제공 및 선택된 텍스트와 커서의 위치를 조작할 수 있는 메서드들을 제공하는 Web API다. 2022년 현재 거의 대부분의 브라우저에서 지원하고 있다. 가나다라마바사 window.getSelection(); window.getSelection()은 현재 선택된 범위에 대한 Selection 객체를 반환한다. Selection 객체의 프로퍼티에 대해 알아보자. anchorNode / focusNode anchorNode와 focusNode는 각각 선택이 시작된 노드와 선택이 끝난 노드를 나타낸다. 위 예제에서 선택이 시작된 노드와 선택이 끝난 노드는 각각 "다"의 앞부분과 "마"의 뒷부분..