인생은 효율성

현상: 애니메이션이 적용된 컴포넌트에서만 실시간 변경되는 값이 ui상에 갱신이 안됨. ios 웹뷰에서만 발생하며 PC에서나 혹은 AOS에서는 발생하지 않음. 또한 애니메이션 컴포넌트 이외에서는 갱신 잘 됨.원인 추정: iOS WKWebView에서 transform 애니메이션이 적용된 레이어가 초기 페인트 스냅샷을 캐싱해 리페인트가 누락되는 Safari/WebView 버그 패턴. 구체적으로 내 상황에서는 animation: translateY가 걸린 BannerWrapper라는 컴포넌트에 포함된 텍스트가 같은 레이어로 묶여 갱신 불가.대응: transform이 걸린 컴포넌트에 key={갱신할 값}를 부여해 값 변경 시 노드를 재생성. 이렇게 해서 리렌더 시 캐시된 레이어 대신 새로 그리게 해 iOS에서 값..

“tsconfig의 target이나 lib를 바꿨는데, 왜 빌드 결과물 문법은 그대로일까?”이 글은 target과 lib이 실제로 어떤 역할을 하는지, 문법 변환과 타입(표준 API) 제공이 어떻게 다른지,그리고 Vite(Esbuild 기반)와 Webpack(Babel 기반) 환경에서 이 설정들이 어떻게 다르게 작동하는지를 정리해 봤다. 1. tsconfig.json의 역할tsconfig.json은 타입스크립트 컴파일러(tsc)가 코드를 어떻게 해석하고 어떤 기준으로 타입 검사를 할지 가이드를 준다.그래서 이 파일은 Vite나 Webpack 환경에서 빌드된 JS 결과물에는 영향을 거의 주지 않는다. compilerOptions 몇 가지:target: 타입 검사 기준과 기본 표준 API 세트를 결정l..

Flow Field Flow Field 는 시뮬레이션에 사용되는 그래픽 기술로, 각 지점에 대한 특정 방향으로의 흐름을 나타내는 표현 방법이다. (feat. chat GPT) 예시를 찾아보면 초등학생 때 철가루와 자석을 이용해 자기장을 표시하는 듯한 비주얼이다. generative art 결과물들을 보면 여기에서도 많이 쓰이는듯한데 p5.js 라는 라이브러리를 이용하면 좀 더 편하게 구현할 수 있는 모양이다. 하지만 간단한 건 직접 구현하기 그다지 어렵지 않으니 HTML canvas + JavaScript 로 직접 구현해 보자. 결과물 위처럼 마우스 드래그 할 때마다 Flow Field가 그려지도록 만들 것이다. Flow Field 구현 세세한 코드를 전부 올리진 않고(어차피 GitHub에 있으니..) ..

자바스크립트 성능 개선 필요성 네트워크 전송 시 자바스크립트의 평균 전송 크기는 350KB 정도이다. 이것은 압축된 것이기 때문에 파싱되고 컴파일 및 실행되면 900KB로 늘어난다. 자바스크립트라는 자원을 수행하는데 비용이 많이 들어가는데, 웹 애플리케이션은 대부분 자바스크립트로 만들어진 것이라서 자바스크립트 엔진 효율성 향상을 위한 지속적인 개선이 이루어지고 있다. 자바스크립트 성능을 개선하기 위한 기술 중 코드 스플리팅은 자바스크립트 청크로 애플리케이션을 분할하고, 청크를 필요로 하는 애플리케이션의 경로에만 청크들을 배분하여 성능을 향상시키는 기법이 있다. 그러나 코드 스플리팅을 사용한다고 해서 사용되지 않는 코드를 포함한 자바스크립트 애플리케이션의 문제를 해결하지는 못한다. 이 문제의 해법을 트리 ..

아래처럼 말줄임표를 표시하는 방법을 알아보자. 1. 한 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 경우는 아래처럼 css를 작성한다. div { width: 200px; /* 오버되면 말줄임 적용할 최대 넓이 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 결과 2. 여러 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 이상인 경우는 아래처럼 css를 작성한다. div { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 2줄 넘어가면 말줄임 */ -webkit-b..

tr > td:nth-child(2) { pointer-events: none; // 이벤트 막음 span { pointer-events: all; // 이벤트 허용 } } 위 처럼 pointer-events: none; 을 주면 아무런 클릭 이벤트가 실행되지 않는다. 그런데 만약 이벤트를 막은 요소 중에서도 특정 요소에는 이벤트를 주고 싶다면 예시의 span 에 사용한것처럼 pointer-events: all; 을 주면 이벤트가 정상적으로 먹힌다.

.word1 { letter-spacing: 2px; /* 글자 간 간격 넓게 */ } .word2 { word-spacing: -2px; /* 단어 간 간격 좁게 */ } 글자 사이 간격(normal) 글자 사이 간격(-2px) 글자 사이 간격(2px) 단어 사이 간격(normal) 단어 사이 간격(-2px) 단어 사이 간격(2px)

파이어베이스 인증 기능 설정 1. 아래 링크로 접속한다. https://console.firebase.google.com/ 2. 인증 기능을 추가할 프로젝트를 선택 3. 인증 설정 화면으로 이동 4. 로그인으로 사용할 방법을 선택해준다. 나는 이메일, 구글, 깃허브를 사용할 것이기 때문에 차례로 하나씩 설정해보도록 하겠다. 5-1. 이메일 인증 이메일/비밀번호 토글을 "사용 설정" 해준다. 5-2. 구글 인증 마찬가지로 "사용 설정" 해준 뒤 [프로젝트 지원 이메일] 셀렉트 박스에 뜨는 나의 이메일을 선택해준다. 5-3. 깃허브 깃허브는 단계가 살짝 많은데, 우선 클라이언트 ID와 보안 비밀번호를 입력하기 위해 깃허브에 접속한다. 5-3-1. https://github.com/settings/profil..

data attributes html5는 특정 엘리먼트와 연관되어있지만 어떤 의미를 가질 필요가 없는 데이터에 대한 확장성을 고려하여 디자인되었다. data-* 속성을 사용하여 비표준 속성이나 DOM의 추가 속성을 사용하는 등의 hack 없이도 의미론적인 추가 정보를 저장할 수 있다. 사용 예시 HTML에서 아래와 같이 data- 속성을 사용하여 시각적으로 나타낼 필요가 없는 추가 정보를 저장할 수 있다. ... 이를 자바스크립트에서 읽으려면 아래와 같이 작성한다. const article = document.querySelector('#electric-cars'); // The following would also work: // const article = document.getElementById(..

출처(Origin)란? CORS를 알아보기 이전에 '출처'라는 것이 무엇인지 먼저 알아야 한다. 출처는 서버의 위치를 뜻하고 프로토콜, 호스트, 포트로 구성되어있다. 우리가 로컬에서 개발하면서 자주 보는 아래 같은 주소를 구분하자면 이렇다. https://localhost:3000 Protocol Host Port 경우에 따라서 이 뒤에 Path, Query string, Fragment가 붙을 때도 있지만 출처(Origin)는 위의 URL구성을 뜻한다. 콘솔로 location객체의 origin프로퍼티를 출력해보면 현재 출처를 알 수 있다. CORS의 뜻 개발을 하다 보면 CORS를 자주 접하게 되는데 이와 관련해서 SOP라는 정책이 있다. SOP는 간단하게 설명해서 같은 출처에서 리소스를 공유할 수 있..