Web Frontend(21)
-
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 -
git에서 특정 커밋 구간의 폴더구조 채로 변경된 부분 추출 방법
가장 안전한 방법은 아래와 같다. git diff -z --name-only HEAD^..HEAD | xargs -0 tar -czvf test.tar.gz : 특정 커밋으로 head를 이동 후 실행하면 해당 head 커밋의 변경사항을 폴더 채로 .gz 압축파일로 추출됨. git diff --name-only 1e04e0e(커밋A) d8d2b19(커밋B) | xargs tar -czvf test.tar.gz : 커밋B의 폴더구조 채로 .gz 압축파일로 추출됨. 단, 최신순으로 A, B, C 커밋이 있을 경우 A와 C를 대입해서 추출할 경우 그 사이에 이미지 용량만 2번 변경된 경우 해당 이미지 차제를 인식을 못하는 문제는 조심하자.
2023.12.12 -
배포 프로세스 개선 - gulp watch와 이미지 최적화
필자는 실무에서 이런 경우가 있었다. 신규 운영 프로젝트가 맡게 되었고, gulp를 통해서 배포 파일을 생성하면 모든 이미지를 최적화하느라 20분 이상 컴퓨터를 갉아먹는 행위를 하고 있었다. 여러 고심 끝에 현재 이미지 최적화된 모든 이미지를 원본 이미지로 교체하였고 배포할 때 모든 이미지를 최적화하는 프로세스를 제거했다. 그리고 앞으로 최적화할 이미지들은 FastStone Photo Resizer 프로그램을 통해서 일괄 최적화 진행하는 방식으로 진행할 예정이다. watch()를 활용하여 이미지를 업로드하면 해당 이미지가 자동으로 최적화되어 교체되도록 하려 했으나 해결하지 못했다. 예를 들어, 이미지 수 십 개를 붙여 넣으면 이미지 한 개 처리될 동안 최적화를 이용하지 못할 수 가능성이 컸다. 이유는 플..
2023.12.10 -
01 - 피그마 그리고 이미지 최적화에 대한 고민
보통 웹 개발 시 피그마를 활용하여 이미지를 잘라 사용하여 최적화 후 웹사이트에 적용할 것이다. 하지만, 미세하게 파고들어 갔더니 아래와 같은 예상치 못한 결과가 나왔다. 아래 원본 이미지를 기준으로 진행한다. 최적화 도구는 FastStone Photo Resizer, TinyPNG 활용했다. 새로운 사실 1. 아래 원본을 피그마 동일한 크기로 업로드 후 추출만 했을 뿐인데 화질 차이가 심하게 나고 있다. 우측을 보면, 전체적으로 흐리멍덩하고 뿌연 화질이다. 특히, 피그마에서 추출 시 아래 붉은색 표기된 부분과 전체적으로 블록형태의 깨짐이 발생했다. 피그마에서 이미지 랜더링 과정에서 화질을 갉아먹는 행위를 하고 있다. 새로운 사실 2. 원본을 피그마 업로드 후 순정 상태로 추출만 했을 때 용량이 3.53..
2023.12.09