✅ 자바스크립트는 싱글 스레드 언어다이 말은 곧, 자바스크립트 코드의 실행은 하나의 메인 스레드에서 순차적으로 이루어진다는 것을 의미한다.자바스크립트의 모든 코드가 동기식으로 처리된다면 하나의 작업이 끝나기 전까지는 다른 작업이 실행되지 않으므로어떤 작업이 오래 걸린다면 웹 페이지가 멈춘듯한 느낌을 받을것이다.그런데 실제로 우리는 `setTimeout`, `fetch`, `Promise`와 같은 비동기 함수를 자주 사용하고 있고,이로 인해 여러 작업을 동시에 수행할 수 있게 된다. 그렇다면 싱글 스레드인 자바스크립트는어떻게 비동기 작업을 다른 코드와 함께 동시에 처리되는 것처럼 보이게 만들까?이를 이해하기 위해선 먼저 자바스크립트가 어떻게 실행되는지,즉 자바스크립트 런타임이 어떤 구조로 되어있는지를 이해..

`useState`는 React에서 상태를 관리하는 가장 기본적인 훅(Hook)이다.React는 컴포넌트의 상태가 변경되면 리렌더링을 트리거 하고, 함수형 컴포넌트에서 상태를 유지하는 역할을 하는데,함수형 컴포넌트는 원래 단순히 입력을 받아 출력을 반환하기 때문에 상태를 갖고있지 않는다.그러면 React에서는 어떻게 useState를 이용하여 상태를 가지고 관리할 수 있는걸까? 이러한 useState의 동작 원리를 이해하기 위해서 클로저의 개념을 알아야 한다.(리액트의 함수형 컴포넌트에 대한 이해는 클로저에 달려있다)함수 컴포넌트의 동작 원리와, 여러가지 훅의 원리, 의존성 배열 등 함수 컴포넌트의 대부분 기술이 모두 클로저에 의존하고 있다. 🔍 클로저란?클로저의 사전적 정의는 아래와 같다.클로저는 함..

웹 개발을 하다보면 사용자의 입력이나 스크롤 같은 이벤트가 너무 자주 발생해 성능이 떨어질 수 있다.이때 등장하는 두 가지 해결 방법이 바로 디바운스(Debounce)와 쓰로틀(Throttle)인데이는 성능 최적화에 사용되는 기법이다. 얼핏 보면 이 둘은 되게 비슷해 보이는데, 각각의 사용 목적과 동작 방식을 알면각 상황에 맞는 최적의 기법을 찾아서 적용할 수 있다. 복잡한 코드를 작성하지 않고도 lodash라는 JavaScript 라이브러리에서 디바운스와 쓰로틀을 간편하게 사용할 수 있지만이번 글에선 순수 JavaScript로 작성된 코드를 기반으로 동작 원리를 살펴보자.🔍 디바운스(Debounce)란?"일정 시간이 지난 후 마지막 이벤트만 실행하는 방법"예를 들어, 사용자가 입력을 멈춘 후 일정 시..

지난 시간에는 npm에 대해 알아보았다. 2025.01.11 - [Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란? [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란?패키지 매니저가 없던 시절자바스크립트의 애플리케이션이 점점 더 복잡해지면서, 모듈과 라이브러리를 조합하여 개발하는 방식이 일반화되었다.이에 따라 CommonJS(CJS), ECMAScript Modules(ESM) 같은devadventure.tistory.com2025.01.19 - [Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #02 - npm의 특징 및 워크플로우 분석 [JavaScript] 자바..

지난 시간에는 패키지 매니저의 등장 배경과 개념에 대해 알아보았다.[Language/JavaScript] - [JavaScript] 자바스크립트 패키지 매니저 #01 - 패키지 매니저란? 이번 글에서는 JavaScript 생태계에서 널리 사용되는 주요 패키지 매니저들에 대해 살펴보도록 하자.현재 JavaScript 개발 환경에서 대표적인 패키지 매니저로는 npm, yarn, pnpm이 있다.이 글에서는 그중에서도 가장 널리 사용되는 npm의 등장 배경, 주요 특징, 그리고 동작 원리에 대해 파헤쳐보자.npm (Node Package Manager)npm은 Node.js와 함께 2010년에 등장했다. 당시 JavaScript 애플리케이션은 점점 복잡해졌고,외부 라이브러리에 대한 의존성이 증가하면서 이를 효..

A회사에 첫 출근을 한 데범은 A 프로젝트의 개발환경을 설정하라는 첫 번째 업무를 받는다. 데범:"팀장님! A 프로젝트를 실행하려고 하는데, yarn install을 했더니 에러가 나네요.Node.js 버전 문제 같아요." 팀장님:"아 맞다, 우리 회사는 프로젝트마다 사용하는 Node.js 버전이 달라.A 프로젝트는 v16을 사용해야 하고 B 프로젝트는 v20을 사용하고 있어""이렇게 프로젝트마다 요구하는 Node의 버전이 다르기 때문에 우리는 nvm을 사용하고 있어." 데범:"nvm? 그게 뭔데요??"📚 NVM (Node Version Manager)특정 프로젝트에서 특정 Node.js 버전을 요구하는 이유는주로 Node.js와 프로젝트 의존성(라이브러리, 패키지)의 호환성 문제 때문이다.Node.j..

패키지 매니저가 없던 시절자바스크립트의 애플리케이션이 점점 더 복잡해지면서, 모듈과 라이브러리를 조합하여 개발하는 방식이 일반화되었다.이에 따라 CommonJS(CJS), ECMAScript Modules(ESM) 같은 모듈 시스템이 도입되었는데,모듈 시스템 만으로는 외부 라이브러리와 의존성을 효율적으로 관리하기에는 한계가 있었다. 모듈 시스템이 존재하더라도, 의존성 관리가 자동화되지 않았기 때문에개발자가 일일이 외부 라이브러리와 그 의존성을 직접 확인하고 설치해야 하는 번거로운 작업이 필요했다. 패키지 매니저가 없다는 가정하에 React를 사용한다고 해보자 React는 자체적으로 DOM 조작을 처리하지 않으므로,ReactDOM이 없으면 브라우저에서 애플리케이션을 실행할 수 없다.ReactDOM은 Rea..

초기 JavaScript의 한계와 모듈 시스템의 필요성JavaScript는 클라이언트와 동적인 상호작용을 하는 웹페이지를 위해 만들어졌다.정적인 HTML 문서를 동적으로 표현하기 위해 사용되었기 때문에 일반적으로 스크립트의 사이즈가 작았다.(이후 폼 유효성 검사, 이벤트 처리 등에 사용되면서 점차 발전) 모듈이라는 개념이 없어서 모든 코드가 하나의 전역 스코프를 공유해야 했고, 프로젝트의 규모가 커지면서 다음과 같은 문제가 발생하게 된다. 1. 네임 스페이스 충돌    - 서로 다른 파일에서 동일한 변수나 함수 이름을 사용하면 충돌이 발생함// script1.jsvar sharedVar = 'Script 1';console.log(sharedVar);// script2.jsvar sharedVar = '..

배열을 정렬하는 방법 (문자열, 오름차순, 내림차순)Array.prototype.sort()JavaScript의 sort() 메서드는 기본적으로 문자열의 유니코드 코드 포인트를 따른다.const months = ['March', 'Jan', 'Feb', 'Dec'];months.sort();console.log(months);// Array ["Dec", "Feb", "Jan", "March"]const array1 = [1, 30, 4, 21, 100000];array1.sort();console.log(array1);// Array [1, 100000, 21, 30, 4] 위 예제에서 볼 수 있듯이 배열의 정수값을 오름차순 정렬하기 위해 array1.sort()를 실행한 결과 정렬이 제대로 되지 않는..

JavaScript의 소수점 버리기프로그래머스 코딩테스트 문제를 풀던 중 숫자를 소수점 이하에서 버리고 정수 부분만 남기는 문제를 JavaScript의 Math.floor()를 이용하지 않고도 얻을 수 있는 방법이 있어 소개하려 한다.(단, 이 접근 방식은 코드의 가독성을 해치고 의도를 명확히 전달하지 않을 수 있으므로 주의해서 사용해야 한다.)( ~ )' ~ '  는 비트 NOT 연산자로 피연산자의 각 비트를 반전시킨다. 이 연산자는 피연산자를 2의 보수로 변환하여 비트를 반전시킨다.예를들어, 8비트 이진수 101010을 NOT 연산하면 각 비트가 반전된다. (~가 틸드 연산자로 불리는 이유는 물결을 뜻하는 영어식 표현이라고 한다)10101010 (원래 수)01010101 (NOT 연산 결과)이진수에서..