HOT
-
[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.08.02
-
[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.07.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.05.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.05.09
-
[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.05.06
-
[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.05.06
-
[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.05.04
-
[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.05.04
-
[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.04.27
New
-
[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.08.02
-
[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.07.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.05.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.05.09
-
[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.05.06
-
[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.05.06
-
[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.05.04
-
[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.05.04
-
[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.04.27
끄적끄적
-
[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.08.02
-
"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.04.16
-
[Math] trunc, parseInt vs floor? 음수일 경우 값이 다르다 조심!!
parseInt: 정수로 바꾼다. trunc: 소수점을 버린다. floor: 내림을 한다. 차이는 실수인 음수인 소수일 경우 -23.3을 Javascript에서 Math.trunc, parseInt와 Math.floor를 했을 때 결과가 다르다 Math.trunc(-10.05) // -10 Integer.parseInt(-10.05) // -10 Math.floor(-10.05) // -11 음수일 경우 값이 다르다. 조심하자
2023.04.15
-
RxJS 한 없이 좋다 좋은데 가끔 디버깅이 어렵다
전역 상태를 가져와서 Observable로 만들고 이를 특정 함수가 구독하고 있는 경우 때때로 어떤 곳에서 이 전역 상태를 Observing 하고 있는지 찾기 어려울 때가 있다. 특정 컴포넌트에서 외부 전역 상태를 변경하거나 구독하는 걸 어떻게 하지 흠... 어떻게 해결하면 될까? 특정한 곳에서만 구독한다 지역 상태들만 구독하고 조작한다? 전역 상태는
2023.03.31
-
앱은 상태 머신 그리고 함수형 프로그래밍과 RxJS는 상태를 어떻게 관리해 개발을 할 수 있을까?
앱은 상태 머신이다 데이터를 입력 받고 데이터를 상태로 저장하고 저장된 상태를 가공해서 원하는 결과를 출력 상태 머신 내 변수, 반복문, 분기문은 오류를 생산하는 주요 원인들 오류를 줄이기 위해선 이 변수, 반복문, 분기문을 상태머신에서 제거해야 한다. 어떻게 제거할 수 있을까? RxJS를 사용해 오류를 줄일 수 있다. 입력데이터 오류 rxjs는 동기, 비동기 데이터 입력을 시간축을 가진 하나의 Observable 단일 방식으로 입력 데이터 처리 한다. -> 입력되는 데이터를 시간 순으로 관리한다 상태 전파 오류 상태 전파를 기존 옵저버 패턴을 개선해 오류를 줄인다 RxJS Observer는 next, error, complete 세 가지 패턴을 가진다 RxJS Observable은 읽기 전용이며 단 방..
2023.03.31
개발일기
-
부동 소수점: 0.1을 100번 더하면 10이 아니다?? Floating Point
let sum = 0; for (let i = 0; i 100000111 0.3 => 0.01001100110011......(0011)의 무한 반복입니다. 이렇게 2진수로 표현하지 못하는 소수가 발생합니다. 어쩔 수 없이 컴퓨터에는 표현할 수 있는 가장 근사치의 값이 저장됩니다. 읽어 보기
2023.03.01
-
2. 이전 전략 그리고 어려움
3개월 안에 모든 걸 이전할 수 있을까? 이전 방식 결정 앱 전체 대시 보드만 이전 iframe: 독립된 대시보드 용 react app을 만들고 vue 내부에 react 앱 iframe으로 구현 component: react component를 만들고 이를 vue 내부에서 mount 시키기 React 이전 작업 필요 But frontend 팀은 Business 요구사항 동시 개발 QA에서 나오는 이슈 동시 처리 refactoring 기간은 짧은데 이 기간 동안 새로운 요구사항 진행, 기존 버그 fix 등 이전 작업 외 다른 일들을 동시에 진행해야 하는 어려운 환경 난이도 최상
2022.12.19
-
1. React 이전 시작하게 된 이유 (수정 중)
기술 부채 + 최적화 현 상황 대시보드가 느리다. why? 기술 부채: Vue2, node 10 what? 무었 때문에 느리냐? Vue2 는 pub-sub 기반 상태 시스템 => destroy 시 모든 리스너들을 클리어 해야 한다 최신 기술 스택이 아니다 보니 virtual dom 등 최적화 부재 VueX 상태 관리 이전 시 장점 속도 향상: 최신 기술이 적용된 빠른 기술 시스템 긍정적인 개발 경험: 시장에서 필요하는 기술 역량 함양 구인이 수월해 진다 Why vue2 component destroy slow? In Vue 2, the process of destroying components in deeply nested structures might be slower due to several fac..
2022.12.19
-
[Vanilla][Javascript] 기본들
API 호출 // fetch api module const HOST = ""; export const request = async (path, options = {}) => { try { const uri = `${HOST}/${path}`; const response = await fetch(uri, options); if (response.ok !== true) { throw new Error("API failed"); } const json = await response.json(); return json; } catch (e) { alert(e.message); } };Index // index.js const app = new App({ $target: document.querySelector(..
2022.11.13
-
[Webpack] Webpack dev server config
devServer webpack-dev-server 관련한 설정 error, warning overlay logging hot liveReload // stats: 'minimal' | 'errors-only' stats: { warnings: false, }, // disable console.log devServer: { client: { logging: 'info', overlay: { errors: false, warnings: false, }, }, open: false, historyApiFallback: true, static: './', hot: true, liveReload: true, }, stats: 'errors-onl..
2022.10.10
-
Why buffer makes IOs fast
buffer를 설정하면 빠르다! 이유는? 데이터는 하드 디스크에 저장되어 있음 하드 디스크는 블록단위 저장장치 하드 디스크 데이터는 파일 시스템(VFS)이라는 추상화 장치를 통해 접근 가능 이 파일 시스템을 사용해 데이터를 요청하면 블록 단위로 반환 1 byte를 요청해도 256 bytes나 512 bytes 블록을 반환 어플리케이션은 512 bytes 중 필요한 1 byte를 읽고 나머지는 버림 512 bytes를 읽으려면 1 byte를 512번 512개의 블록을 읽어야 함 낭비 buffer를 512 bytes로 설정하면 1 블록을 버퍼에 담아 1번만 IO 하면 가능 (보통은 1024 or 2048 로 설정해 사용) 실제로는 복잡하지만 그냥 간단하게... 참고: 블록장치 IO 동작방식 1 블록장치 IO..
2022.10.10
