분류 전체보기 썸네일형 리스트형 svg 그라데이션 동적으로 적용 export const createSvgGradient = (svg: SVGSVGElement, id: string, stops: IStop[]) => { const svgNS = svg.namespaceURI; const grad = document.createElementNS(svgNS, 'linearGradient'); grad.setAttribute('id', id); stops.forEach((stop) => { const stopNS = document.createElementNS(svgNS, 'stop'); stopNS.setAttribute('offset', stop.offset); stopNS.setAttribute('stop-color', stop.stopColor); grad.appe.. ios에서 오른쪽 정렬 후 space ios에서 오른쪽 정렬 후 space를 누르면 왼쪽에 공백이 생긴다 해결 방법 contentEditable Element에 아래 속성을 주면 된다. -webkit-nbsp-mode: initial; package.json add classic.yarnpkg.com/en/docs/cli/add/ remote: Repository not found. remote: Repository not found. fatal: repository 'https://~.git/' not found 기존 방법 git clone https://github.com/저장소를판유저이름/저장소이름 해결방법 git clone https://사용자의NAME:비밀번호@github.com/저장소를판유저이름/저장소이름 커서 맨 뒤로 이동하기 export const setCursor = (el: HTMLElement, offset: number) => { const range = document.createRange() const sel = window.getSelection() range.setStart(el, offset) range.collapse(true) if (sel) { sel.removeAllRanges() sel.addRange(range) } } setCursor(textRef.current, textRef.current.childNodes.length); safari relatedTarget = null 이슈 (구)safari에서는 버튼이 아닌 element를 클릭 시, FocusEvent의 relatedTarget이 null을 갖는다. const handleTextEditorBlur = (event: FocusEvent) => { const relatedTarget = event.relatedTarget as HTMLElement; console.log(relatedTarget); // null in safari } 해결방법 클릭을 받는 element에 tabIndex = 1 을 주면 된다. Rollup.js로 프로젝트 셋팅 Rollup.js를 사용하는 이유 webpack은 ES Module로 Bundle할 수 없다. webpack은 일반적으로 commonjs 형태로 번들링을 하게되는데, commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않는다. webpack은 애플리케이션 제작시 주로 사용하고, rollup은 라이브러리 제작시 사용한다. Setting 1. rollup 사용에 필요한 package 설치 "devDependencies": { "@rollup/plugin-alias": "^3.1.1", "@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-node-resolve": "^11.0.1", "@svgr/rollu.. CRA + Craco + TypeScript # setting 1. CRA 설치 yarn create react-app my-app --template typescript 2. craco 설치 yarn add @craco/craco --save --dev 3. package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 craco를 통해 실행 "scripts": { "start": "craco start", "build": "craco build", "test": "craco test --env=jsdom" } 4. 프로젝트 가장 최상단 위치에서 craco.config.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다. # Sass-loader 1. node-sass 설치 (4점대로 설치해야.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 15 다음