Web Frontend(24)
-
npm install 안 될 경우
node.js 버전일 왔다갔다 했을 경우 아래 폴더에 있는%APPDATA% npm, npm-cache 폴더 충돌 발생 가능성이 높다.모두 제거하고 다시 명령어 실행하면 된다.
2025.03.14 -
CSS initial, inherit, unset, revert, all 개념 정리
CSS 속성의 상속과 초기값은 꽤 복잡해 보일 수 있지만, 몇 가지 규칙과 예외를 이해하면 명확해집니다. 모든 경우의 수를 따져보고, 애매하게 느껴지는 부분을 짚어보겠습니다.1. 상속 (Inheritance)상속되는 속성:주로 텍스트 관련 속성들이 상속됩니다. (예: color, font-family, font-size, line-height, text-align, visibility, list-style)부모 요소에 설정된 값이 자식 요소에게 자동으로 적용됩니다.자식 요소에서 해당 속성을 명시적으로 지정하지 않으면 상속된 값을 사용합니다.상속되지 않는 속성:대부분의 레이아웃, 박스 모델 관련 속성들은 상속되지 않습니다. (예: width, height, margin, padding, border, ba..
2025.03.13 -
퍼블리셔 프로젝트의 막바지에서 느낌점
1. pc와 mo이 다른 UI이 일 경우, 억지로 하나의 마크업으로 하려 하지 말자. 이벤트를 직접 하나하나 제거해야 하고 아이패드의 가로 세로 모드로 변할 경우 제거하고 추가해야 되는 더 번거로움도 있다. 뿐만 아니라, 웹접근성을 지키기에도 상당히 까다롭고... 결국 마크업은 2벌로 가는 것이 맞다고 본다. 2. 최소 맞춰야 할 기기와 os, 브라우저 버전을 정하자. 누가 오래된 폰을 봤더니 모션이 깨진다느니 기능이 안 된다고 하면 근거가 필요하다. 그때 가서 맞춰줄 시간도 촉박할 것이고 그런 상황에서 사이드 이펙트가 발생 가능성이 높다. 3. 디자인과 퍼블이 같이 가면 컴포넌트를 만들 수 없다. 이렇게 되면 중구난방 유지보수 할 때 모든 페이지를 뒤지면서 하나하나 수정할 수밖에 없다. 가능한 디자인이..
2024.08.02 -
javascript 이벤트 핸들러와 메모리/성능 최적화 방법
아래는 claude3에게 물어본 결과임. Q. button.addEventListener('click', function() { handleClick(); }); 코드와 button.addEventListener('click', handleClick); 코드의 차이점을 모르겠어. 단계적으로 설명해 줘. 네, 두 코드의 차이점을 단계적으로 설명드리겠습니다. **1단계: 익명 함수 사용** ```javascript button.addEventListener('click', function() { handleClick(); }); ``` 위 코드에서는 `addEventListener`의 두 번째 인자로 익명 함수를 전달하고 있습니다. 이렇게 하면 클릭 이벤트가 발생할 때마다 새로운 함수 객체가 생성됩니다. *..
2024.03.26 -
자연어 챗봇 만들때 Claude3 haiku 모델 강력 추천
자연어 챗봇을 만들고 있는데 동일한 프롬프트/파라미터/토큰 제한/질문으로 Claude haiku와 openAI GPT4-turbo 모델을 간단하게 비교 봤음. 1. 일반적인 내용(수학/코딩이 아닌) 기준으로 좀 더 퀄리티 있는 답변이 나왔음. 2. haiku 모델이 108배 정도 저렴함(6,355 token 사용시 3.15원 발생). 3. 답변 속도는 haiku가 6배 이상 빠름. 좋은 모델과 상당히 저렴한 비용, 무엇보다 빠른 응답 속도를 활용하여 얻은 답변을 다시 모델에게 던져서 재검증할 수 있는 여유를 얻게 되고 결국, 할루시네이션도 최소화 할 수 있을듯.
2024.03.24 -
[php] firebase의 realtime database 콘솔에서 rule의 auth 인식 불가 문제.
php 환경에서 작업했다. 인증은 javascript sdk를 활용했고, realtime database는 rest API를 활용했다. 서로 다른 방식으로 구현하다보니, 문제가 터졌다. 아무리 찾아봐도 아래 문제를 해결하지 못 했다. 문제1. realtime database의 규칙 설정에서 auth 자체를 인식하지 못한다는 것. 문제2. 위 문제로 로그아웃 기능 역시 작동 안되는 듯. 시도 : firebase-php 라이브러리를 시도하려 했으나, 단순히 ID 토큰 값을 검증하는 용도기 때문에 중간에 그만 두었고... 아래 문서의 ID 토큰을 url에 실어서 auth 생성을 시도하려 했으나... null 값이 계속 찍힘... https://firebase.google.com/docs/database/res..
2024.02.10 -
ios 브라우저에서 이미지 흐려지는(blur) 문제
원인 : transform 3d 속성을 사용해서 랜더링 가속화되어 이미지가 흐려지는 문제 해결책 : transform 2d 속성인 matrix를 활용하여 이미지 조작
2023.12.30