하리하링웹

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

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

최근 회사에서 특정 파일 경로를 입력받아, 그 경로와 관련된 파일들의 경로를 의존성에 따라 배열로 반환하는 코드를 개발하는 Job을 받았다. 이 과정에서 Input 값으로 2가지의 정보를 받을 수 있었는데 이는 아래와 같다. 1. 파일 경로 2. parse 옵션(isProduction, isForce) 그리고 회사 repo의 각 project안에는 project의 의존성 관계를 인터페이스화하여 알려주는 .json파일이 platform 별로 @개 만큼 있는 구조였으며 이를 옵션, 의존성, project의 구조별로 잘 조합하여 효과적으로 그리고 문제가 없도록 파싱하는것이 가장 중요한 목표였다. 처음에는 경로를 받아 절차지향형 방식으로 개발을 진행하였다. 어찌저찌 문제없이 돌아가도록 완성은 시켰지만 앞으로의 ..

얼마전에 회사에서 비동기 작업의 시간에 따라 자동으로 로딩 표시를 보여주는 기능을 개발해달라는 요청을 받아 이를 개발하게 되었다. 물론 간단하게 구현할수도 있겠지만 회사 내부의 코딩 룰, 어디서 보기 힘들정도로 큰 저장소 크기, 여러번 요청할수도 있는 비동기 작업 등으로 인해 간단하게 구현하는 방식은 불가능하게 되었다. 이러한 제약조건을 딛고 이를 구현하기 위해, 비동기 작업이 지정된 시간 이상 걸릴 경우 사용자에게 로딩 상태를 알려주는 간단하면서도 효과적인 방법을 고안했다. 이 기능의 핵심은 Promise.race를 사용하여 비동기 작업과 타임아웃을 결합시키는 것이다. 핵심 개념: Promise.race Promise.race는 여러 프로미스 중 가장 먼저 완료되거나 실패하는 프로미스의 결과를 반환한다..

javascript에서 Code splitting을 해서 Dynamic하게 import를 진행할 때에 주의해야 할 점이 있다. 이 글에서는 Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다. import dynamic from 'next/dynamic'; import { useState } from 'react'; import { Button } from '@/components/ui'; const DynamicComponent = dynamic(() => import('@/components/test/DynamicComponent')); export default function TestPage() { const [isRender, setIsRender] = useState(false); ..