분류 전체보기79 [Web] HTML content, text blurry: transform + border-radius, zoom in and out 문제 HTML DOM content text가 흐릿하게 보이는 현상 흐릿한 모습 정상 원인 transform: translate(50px, 100px); 위와 같이 transfrom css가 적용된 상태에서 이 사용된 상태에서 연속된 하위 돔 중 border-radius css 하나 이상 적용된 상태에 이런 현상이 나타는 것 확인 해결 tranform이 적용된 돔 하위 자식 노드 중 하나에만 border-radius를 적용 2023. 8. 2. [React] 자주 변경되는 컴포넌트 최적화: style 이 컴포넌트 스타일을 이 패널을 사용해 커스텀 하는 기능을 개발 하던 중 Over 200 classes were generated for component ColorPicker__ColorBox with the id of "ColorPicker__ColorBox-sc-189ed6b7-1". 이런 경고가 나왔고 아래 방식으로 styled component를 사용할 것을 권장한다고 했다. Consider using the attrs method, together with a style object for frequently changed styles. Example: const Component = styled.div.attrs(props => ({ style: { background: props.backg.. 2023. 7. 14. [Basic] Javascript sync/async, blocking/non-blocking 자바스크립트: sync 언어, blocking, single- threaded 이다 코드가 순차적으로 실행된다 - 동기 코드가 실행이 끝나야 다음 코드 실행이 가능하다 - 블로킹 ?? 그럼 어떻게 우리는 javascript에서 코드를 비동기, non-blocking하게 실행시킬 수 있을까? 정답은 브라우저 및 node 브라우저(node.js runtime)에서 javascript: async/non-blocking 이다 event loop call stack (macro) task queue () micro task queue (promise queue) request animation queue web API v8 우리는 브라우저에서 자바스크립트를 비동기적 실행 가능 (with Web API), Web.. 2023. 5. 17. [javascript] replace with Regex, $n vs $& The $& and $1 are not the same. $& is a back reference to the whole match. $1 is a back reference to the submatch captured with capturing ref 2023. 5. 9. [RxJs][React] how to declare Observable properly inside a component? 1. just declare import React, { useState, useEffect, useMemo } from 'react'; import { interval } from 'rxjs'; export default function App() { const [state, setState] = useState(); const observable$ = useMemo(() => interval(1000), []); return ( Hello RxJS! Observable value: {state} ); }2. subscribe useEffect(() => { const subscription = observable$.subscribe(setState); }, []);3. u.. 2023. 5. 6. [quill] setContents does not work on image attributes? Problem quill.setContents(content); This remove width property Cause There is a missing on formats property on quill options Solution quill option you need to add width on formats property like below export const defaultOptions: QuillOptionsStatic = { modules: { toolbar: { container: defaultToolbarOptions, 'image-tooltip': true, 'link-tooltip': true, handlers: { // image: () => {.. 2023. 5. 6. [Quill] innerHTML = content 사용 시 생기는 문제점 문제 Business 부서에서 userflow를 사용하고 있다 Production Tour 및 신규 기능 안내 Tooltip을 보여주는 기능이다. 그런데 이 기능이 작동 시 quill editor API는 성공적으로 내용을 가져 왔는데 이를 quill에 삽입 시 컨텐츠가 보이지 않는 문제가 발생했다. 원인 innerHTML로 적용된 DOM 컨텐츠를 userflow 실행 시 기본으로 변경 하는 작업이 있는 것으로 보임 ~~innerHTML = content~~를 사용하지 말자 const quillRef = useRef(); useEffect(() => { if (quillRef.current) return; const quill = new Quill($dom, options); quillRef.curren.. 2023. 5. 4. [css] not selector .react-grid-item:not(.react-grid-placeholder) { /* ${({ isReportMode }) => isReportMode ? `border: 1px solid ${GRAY(25)};` : ''}; */ /* border-radius: ${({ isReportMode }) => isReportMode ? '2px' : `${WIDGET_BORDER_RADIUS}px`}; */ } 2023. 5. 4. [css] ellipsis with flexible width export const Wrapper = styled.div` display: flex; width: 200px; `; export const Flex1Div = styled.div` flex: 1; `; export const Content = styled.div` white-space: nowrap; text-overflow: ellipsis; overflow: hidden; & > * { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } `; --------------------------------------------------------------------------------------------------------- 2023. 4. 27. "People don't buy what you do, They buy why you do it." Why? you do that? I believe what you believe. I want to do that. They buy why you do it, not what you do! 너가 그 일을 하는 이유 그들이 원한다 그래서 너가 하는 그 일을 산다 why? how? what? We should move from inside(why?) to outside(what?) Why? Apple is different from others? Why? Martin Luther King led the civil rights movement? WHY? Why I do What I am doing? Why? 100% know what they do some know how they do very few peo.. 2023. 4. 16. 이전 1 2 3 4 ··· 8 다음
