하리하링웹

개요웹에서 대용량의 데이터를 보여주는 경우는 어떤 경우가 있을까? 아마 대부분의 경우 긴 리스트 혹은 테이블 형태일것이라고 생각한다. 이런 경우에는 보통 virtualization으로 성능을 최적화 할 수 있지만 개인 프로젝트가 아니라 회사 단위의 프로젝트라면 기획, 기존 코드와의 충돌과 같은 문제로 인해 virtualization과 같은 기법을 사용하지 못하는 경우도 있을 수 있다. 대용량의 데이터를 웹에서 보여주다보면 별 이슈를 다 겪을 수 있는데 이번에 겪은 이슈도 이로 인해 발생한 이슈이다.원인은 redux에서 상태 업데이트 시 구독된 middleware의 코드가 실행되는데 이러한 상태 업데이트를 여러 번 실행할 때 n번 middleware가 실행되었으며 약 5000줄의 행과 각 행에서 몇 개의 ..

개요프론트엔드에서 애니메이션을 구현할 때 CSS를 사용하는 방법을 주로 사용하지만 Javascript를 사용하는 방법도 있다. 물론 CSS에 비해 Javascript는 성능이 떨어지지만 모든것을 CSS로 해결할수 는 없기에 Javascript 를 사용해야만 하는 경우가 있으며 requestAnimationFrame Javascript로 애니메이션을 구현할 때 성능과 UX를 최적화 하기에 좋은 함수이다. requestAnimationFrame는 사용시에 브라우저에게 작업의 실행을 알려주며 내부적으로  requestAnimationFrame 전용 queue에 해당 작업을 집어넣는다.이후 해당 작업은 대기하고 있다가 다음 repaint 작업 전에 해당 큐의 작업을 처리해주는 방식으로 동작한다.  이를통해 re..

Settimeout 함수 설명 setTimeout(functionRef, delay, param1, param2, /* …, */ paramN) 첫 번째 인자에 넣은 함수를 딜레이 이후 실행해준다. 뒤의 파라미터들은 함수에 전달해주는 매개변수이다. delay 값을 숫자값이 아니라 “1000” 과 같은식으로 전달할 경우 1초로 자동으로 변경된다. 잘못된 값을 넣으면 자동으로 0초로 변환된다. 반환 값은 timeoutID를 받으며 이는 clearTimeout() 을 통해 타입아웃을 취소할 수 있다. This 문제 setTimeout은 다른 excution context에서 실행된다. 따라서 자바스크립트의 this 바인딩 특성상 이 값이 바뀔 수 있어 문제가 발생할 수 있다. [정상 동작] const myAr..

Viewport size viewport의 size는 변할 수 있다. 브라우저 창 크기 조절 모바일 가로, 세로, etc.. 키보드 창 켜짐 자바스크립트에서 viewport size를 받는법 document.documentElement.clientWidth; /* 1200 */ window.innerWidth; /* 1200 */ window.outerWidth; /* 1200 */ document.documentElement.clientHeight; /* 800 */ window.innerHeight; /* 800 */ window.outerHeight; /* 900 */ document.documentElement.clientWidth: document의 가로 px값이며 패딩은 포함되지만 마진, 테두..

정의웹 개발에서 viewport는 사용자의 브라우저 창 내에서 실제로 보이는 영역을 의미한다. 예를 들어 사용자가 크롬 창을 늘리거나 줄이면 보이는 만큼이 viewport 영역이며 모바일에서 핸드폰으로 보는 상황이라면 핸드폰의 스크린에 보이는 만큼이 viewport 영역이다. viewport는 반응형 웹에서 특히 신경써서 개발해야 하며 모바일, 태블릿은 일반적으로 화면의 크기가 고정되어 있기 때문에 서비스를 만들 때 각 디바이스의 화면의 크기에 맞게 break point를 정해놓고 개발을 진행하는것이 일반적이다. 아래는 일반적인 break point의 수치이다. 반응형 웹 디자인 참고링크 Responsive Design - Tailwind CSSUsing responsive u..

GitHub Actions를 사용하여 AWS Lambda 함수를 자동으로 배포하는 방법을 작성해보겠다. 이 프로세스를 통해 코드 변경 사항이 main 브랜치에 푸시될 때마다 자동으로 AWS Lambda 함수가 업데이트되도록 설정할 수 있다. 이는 개발 효율성을 크게 향상시키고, 배포 과정에서 발생할 수 있는 휴먼 오류를 줄이는 데 도움이 되며 각 코드에 대한 버전 관리, 무중단 배포도 쉽게 할 수 있다는 장점이 있다. 아래 링크를 참고하면 초기 설정등에 더 도움이 될것이다. [참고링크] 초기 설정 [ECR, Lambda] 먼저 이미지를 올릴 ECR, Lambda 함수를 만들어준다. 위 링크를 참고하여 쉽게 만들 수 있으며 주의할점은 이번 글에서는 docker와 ecr을 사용하여 배포를 진행하는거기 때문에..