하리하링웹

개요 자바스크립트는 단일 스레드로 동작하며, 이는 한 번에 하나의 작업만을 처리할 수 있다는 의미를 갖는다. 그러나 자바스크립트가 이러한 단일 스레드 모델에도 불구하고 여러 이벤트를 동시에 처리할 수 있는 이유는 바로 **이벤트 루프**에 있다. 이벤트 루프는 이름 그대로 끊임없이 루프하여 현재 큐에 태스크가 있는지 확인하며 큐에 태스크가 있을 경우 이벤트 루프의 내부 동작 알고리즘에 따라 태스크를 처리해주는 역할을 하며 이를 통해 I/O와 같은 이벤트들을 차단하지 않고 부드럽게 동작하게 해준다. 물론 정확히 말하면 차단이 되지만 우선순위를 높여 마치 차단되지 않는 것처럼 동작하게 해준다.이벤트 루프의 역할 정리하자면 이벤트 루프의 주요 역할은 다음과 같다:이벤트 처리: 이벤트 루프는 비동기적으로 발생하..

개요웹에서 대용량의 데이터를 보여주는 경우는 어떤 경우가 있을까? 아마 대부분의 경우 긴 리스트 혹은 테이블 형태일것이라고 생각한다. 이런 경우에는 보통 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을 사용하여 배포를 진행하는거기 때문에..

개요 얼마전에 회사에 내가 작업한 코드가 배포되었는데 직후 실 서비스에서 엄청난 에러로그가 발생하여 바로 롤백을 하게된 일이 있었다. 원인으로는 새로운 버전이 배포되면서 이전 버전을 사용하고 있던 유저가 페이지를 새로고침 하지 않고 내부 팝업을 열었을때에 새로운 버전의 코드를 가져와 오래된 버전의 코드와 충돌이 발생하는것이였으며, 새로운 버전의 코드를 가져오면 해당 코드로 잘 동작하는것이 당연하다고 생각할 수 있지만 회사 프레임워크에서 어떠한 파일을 실행할때에 내부적으로 클로저로 한번 감싸 오래된 코드가 남아있을 수 있는 가능성이 잠재되어 있었다. 물론 이러한 방식은 캐시가 정상적으로 동작한다고 가정하였을때에 유효한 방식이라고 말할 수 있다. 하지만 캐시가 정상적으로 동작하지 않았으며 내가 배포한 코드가..

기본적으로 서버쪽에서는 response header에 “expires", "cache-control”, “max-age”, 클라이언트 쪽에서는 fetch시에 header의 cache 값을 통해 캐시의 만료, 정책 설정이 가능하다. 네트워크 요청시에 요청의 response header에 cache-control, expires, max-age 등을 포함해서 캐시의 만료 정책을 명확하게 나타내는 헤더 설정이 없고 last-modified 설정만 존재한다면 대부분의 브라우저는 heuristic freshness 라는 정책을 사용하여 캐시 기간을 설정한다. 계산식은 아래와 같다. which is the one suggested by RFC 7234 (date time - last modified time) / ..

먼저 Docker를 다운받는다. docker가 없어도 lambda에 함수를 올리는건 쉽게 할 수 있지만 환경이 바뀔때마다 혹은 어딘가에 배포를 할때마다 매 번 환경을 맞춰줄수는 없으니 되도록 docker를 사용하는것이 좋다 로그인은 따로 진행하지 않아도 된다. https://www.docker.com/products/docker-desktop/ Docker Desktop: The #1 Containerization Tool for Developers | Docker Docker Desktop is collaborative containerization software for developers. Get started and download Docker Desktop today on Mac, Windows..