이번에 팀 프로젝트를 하다가 팔로우 팔로잉 기능을 구현하게 되었습니다. 데브코스에서 지원해주는 api가 제약이 많아 유저의 팔로잉, 팔로워의 id를 받아서 다시 유저의 정보를 조회해줘야하는 상황이였는데 이때 한번에 많은 비동기 작업을 처리해야하는 일이 발생했습니다.     Promise.all이란?여러 비동기 작업을 동시에 처리합니다. 각 작업이 독립적으로 실행되기 때문에 전체 완료 시간은 가장 오래 걸리는 작업의 실행 시간과 근접하게 됩니다.    문제의 코드const { data: followingData } = useQuery({ queryKey: ['followings', userData?.following], queryFn: async () => { if (!userData?.follo..

자바스크립트에서 정규표현식(Regular Expression)은 문자열에서 특정 패턴을 찾거나 조작하는 아주 강력한 도구입니다. 우리가 입력칸에 전화번호나 이메일을 입력할 때 잘못 입력하여 경고 메세지가 나올 때가 대표적인 예시입니다. 또한 우리가 개발을 하거나 코딩테스를 볼 때도 정규표현식을 알고 있다면 쉽게 해결할 수 있는 일이 많이 있습니다. 다만, 무슨 외계인의 지령이 떨어진 거 같은 정규표현식은 사람이 해석하기 어렵고 문법이 복잡하다는 단점이 있으므로 복잡한 로직을 구현할 땐 검색이나 관련 사이트를 참고하는 게 정신건강에 이롭다고 생각합니다.     정규표현식 생성하기   정규표현식을 만드는 방법은 두 가지가 있습니다.리터럴 표기법const regex = /pattern/flags; // 'p'..

가끔 개발을 하다 보면 날짜를 다룰 때가 있습니다. 저 또한 프로그래머스 코딩테스트를 풀거나 프로젝트를 할 때 날짜를 건드려야 하는 일이 가끔 생기는데 그때 사용할 수 있는 Date 객체와 메서드, 날짜를 다룰 때 유용한 라이브러리인 Day.js를 알아보겠습니다.     Date 객체Date 객체는 날짜와 시간을 위한 메소드를 제공하는 빌트인 객체이면서 생성자 함수입니다. 현재의 날짜와 시간은 자바스크립트 코드가 동작한 시스템의 시계에 의해 결정되며 시스템 시계의 설정에 따라 서로 다른 값을 가질 수 있습니다. 아래 예제에서 Date 객체를 출력하면 결과값 뒤에 z가 붙어있는 것을 볼 수 있습니다.ex) 2024-12-25T06:33:00.000Z이 경우는 JavaScript의 Date 객체가 기본적으로..

이벤트 루프자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘입니다. 이벤트 루프가 콜 스택과 태스크 큐를 모니터링하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와줍니다. 여기로 콜스택은 현재 실행 중인 코드들이 쌓이는 곳이고, 태스크 큐는 비동기 작업이 완료되면 그 결과를 대기시키는 곳입니다.     콜스택과 태스크 큐   1. 콜 스택(Call Stack)JavaScript 코드의 실행 컨택스트가 쌓이는 곳입니다.함수 호출이 발생하면 콜 스택에 추가되고, 함수 실행이 왼료되면 제거됩니다.스택 구조로 동작하며, LIFO(후입선출)의 구조를 따릅니다. 2. 태스크 큐(Task Queue)비동기 작업의 콜백함수가..

실행 컨텍스트란?컨텍스트(context)는 문맥이라는 뜻입니다. 쉽게 말해 실행 컨텍스트는 자바스크립트가 실행되는 환경, 문맥을 의미합니다.자바스크립트 엔진이 코드를 실행할 때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트입니다.실행 컨텍스트는 크게 전역 실행 컨텍스트와 함수 실행 컨텍스트로 나눌 수 있습니다.      컨텍스트의 원칙컨텍스트는 아래와 같은 원칙을 따릅니다. 오늘 이 글에서 알려드릴 컨텍스트 내용도 모두 이 원칙을 따르고 있습니다. 코드가 실행되면 먼저 전역 컨텍스트가 하나 생성된 후에 각 함수 호출시마다 컨텍스트가 하나씩 생성됩니다.컨텍스트 생성시 컨텍스트 안에 변수객체, 스코프 체인, this가 생성됩니다.컨택스트 생성 후 함수가 실행되는데 사용되..

이벤트 버블링과 캡처링은 웹 브라우저에서 이벤트가 처리되는 방식에 관련된 개념으로, DOM 트리 구조에서 이벤트가 어떤 순서로 전달되는지 설명합니다. 이벤트 버블링과 이벤트 캡처링 두 가지 방식은 이벤트 전파 과정에서 발생합니다.    이벤트 전파(Event Propagation)이벤트가 발생했을 때, 그 이벤트가 DOM 요소 간에 전달되는 방식입니다. DOM 트리는 계층 구조로 이루어져 있고, 이벤트는 다음 세 가지 과정으로 이루어집니다. 이벤트 전파 과정캡처링 단계 (Capturing Phase)- 이벤트가 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려가는 단계입니다.- 부모 요소에서 자식 요소로 전파됩니다.타깃 단계 (Target Phase)- 이벤트가 실제로 발생한 요소에서 실행되는 단계..

JavaScript ES6(ECMAScript 2015)란?ECMAScriprt는 JavaScript의 표준 사양으로, JavaScript를 정의하는 언어의 핵심입니다. 1997년에 ECMA라는 유럽 컴퓨터 제조 업체에서 ECMA-262라는 표준으로 처음 정의되었으며 현재까지도 꾸준히 업데이트가 되고 있습니다. ECMAScriprt는 JavaScript의 언어 사양, 즉 "어떻게 작동해야 하는지"를 정의합니다.※ ES6는 ECMAScript 2015, 줄여서 ES6라고 부르고 ECMAScript의 6번째 버전이며 매년 업데이트가 되고 있습니다. 쉽게 말해 ECMAScriprt는 요리법(정의)이고, JavaScript는 요리(구현)이라고 생각하면 좋습니다.           JavaScript ES6 주요..

클라이언트 사이드 렌더링(Client-Side Rendering, CSR)브라우저가 서버에서 HTML과 JavaScript 파일을 받아오고, JavaScript가 실행되면서 동적으로 콘텐츠를 생성합니다.즉, 초기에는 서버에서 빈 페이지를 최초로 렌더링 하고, 사용자가 요청할 때마다 브라우저(클라이언트)에서 렌더링 하는 것을 의미합니다. CSR은 초기 로딩 속도가 길어질 수 있지만, 한번 로드된 후에는 사용자와의 상호작용이 빠르게 진행됩니다.   클라리언트 사이드 렌더링(CSR) 흐름사용자가 링크를 클릭하거나 직접 URL을 클릭합니다.서버가 브라우저에 응답 전송- 서버는 HTML 파일을 브라우저로 전송하지만, 초기에는 내용이 비어 있는 상태입니다.브라우저가 JavaScript 파일 다운로드- 브라우저는 H..

호이스팅(Hoisting)이란?자바스크립트는 인터프리터 언어입니다.※여기서 인터프리터 언어란?※더보기소스코드를 한 줄 또는 한 블럭씩 읽고 바로 실행하는 언어입니다. 그로 인해서 실행 중에 발생한 에러는 해당 시점에서 즉시 알려줄 수 있습니다.위와 반대되는 개념인 컴파일러 언어는 한 번에 기계어로 변환한 후에 실행 가능한 파일을 생성합니다.대표적인 인터프리터 언어는 Python과 JavaScript가 있습니다.컴파일 언어가 컴파일 과정을 거치듯이 인터프리터 언어도 인터프리테이션이라는 단계를 거치게 되는데 이 인터프리테이션 과정 중에서, 변수나 함수 선언을 찾아 메모리에 할당하는 과정을 거치게 됩니다. 이를 변수 바인딩 및 함수 바인딩이라고 부릅니다.이렇게 JavaScript에서 인터프리터가 변수와 함수의..