본문 바로가기

💻 개발/JavaScript11

var, let, const의 5가지 차이점 (재선언, 재할당, 스코프, 호이스팅, 전역 객체) JavaScript에서 var, let, const 키워드를 이용하여 변수를 선언할 수 있다. 기존에는 var 키워드가 유일한 변수 선언 키워드였다. 하지만 var 키워드에는 여러 문제점을 가지고 있었고, 이를 해결하기 위해서 ES6(ECMAScript2015)에서 let과 const 키워드가 도입되었다. 오늘은 var 키워드의 문제점을 살펴보면서 let과 const 키워드에서는 어떻게 달라졌는지 차이점에 대해 알아보도록 하겠다!  1. 재선언재선언이란 동일한 스코프 내에서 동일한 이름의 변수를 다시 선언하는 것을 의미한다. var user = { firstName: "Gil-dong", lastName: "Hong" };var user = { name: "Hong Gil-dong" };console.l.. 2025. 2. 11.
바닐라 JS에서 알아보는 useEffect 동작 원리 및 간단한 구현 useEffect는 React의 핵심 Hook 중 하나로, 컴포넌트의 부수 효과(side effect)를 관리한다.이번 글에서는 바닐라 자바스크립트로 useEffect를 구현해보면서, 동작 원리에 대해 알아보려고 한다. 이번 글은 바닐라 JS에서 알아보는 useState 동작 원리 및 간단한 구현 에서 코드가 이어진다.아직 보지 않았다면 한 번 읽어주길 바란다! :)   useEffect의 기본 인터페이스useEffect를 구현하기에 앞서 인자 및 반환 값 그리고 기능을 정리해보자.useEffect(setup, dependencies);매개변수setup(설정) : Effect의 로직이 포함된 함수.설정 함수는 선택적으로 cleanup(정리) 함수를 반환할 수 있다.React는 컴포넌트가 DOM에 추가된 .. 2025. 2. 3.
바닐라 JS에서 알아보는 useState 동작 원리 및 간단한 구현 React의 useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 Hook이다.useState의 내부 로직은 추상화되어 있어 개발자가 선언적으로 상태를 관리할 수 있게 해준다.이번 글에서는 자바스크립트의 Closure를 활용해 useState를 직접 구현해보면서, 동작 원리에 대해 알아보려고 한다!  useState의 기본 인터페이스useState를 구현하기에 앞서 인자 및 반환 값 그리고 기능을 정리해보자.const [state, setState] = useState(initialValue);매개변수initialState: state의 초기 설정값.이 인수는 처음 렌더링 때 state를 초기화하고, 이후 렌더링에서는 무시된다.원시값이나 객체를 전달하면 해당 값을 그대로 state의 초기값.. 2025. 1. 31.
ECMAScript와 함께 알아보는 실행 컨텍스트 여러 프로젝트를 경험하고, 알고리즘 문제를 푼다면 코드의 흐름이 어떤지는 읽힐 것이다.하지만 이것을 명확한 개념과 함께 설명하기는 어려운 법이다. 오늘은 이유와 함께 코드의 흐름을 설명할 수 있게 실행 컨텍스트에 대해 알아보겠다!  실행 컨텍스트 (Execute Context) 란?실행할 코드에 대한 환경 정보를 저장하는 객체 환경 정보는 코드를 실행하기 위해, 필요한 모든 정보를 의미한다.간단히는 해당 스코프의 변수/함수와 this 그리고 외부 스코프의 변수/함수 참조를 위한 상위 스코프의 참조를 하고 있다. 위 내용을 어떻게 관리하는지 알아보자. 실행 컨텍스트의 구성ECMAScript2015에 따르면 실행 컨텍스트는 아래와 같은 컴포넌트를 가진다.ComponentPurposeLexicalEnviron.. 2025. 1. 23.
[JS] API 요청 제한기 구현 과정 : Rate Limiter (Sliding Window Counter) 실전 JS 문제 중, Rate Limiter 구현 문제가 나왔다.오늘은 해당 문제를 어떻게 풀었는지, 그리고 풀고 난 이후 어떻게 개선했는지 말해보겠다. 결론적으로 말하면 Rate Limiter를 Sliding Window Counter 방식으로 구현하였다. Rate Limiter가 무엇인지 궁금하다면 이 글을 읽어주길 바란다!  문제 설명/** * [(lv.5)api-요청-제한기.js] * * @param {number} maxRequests - 최대 허용 요청 수 * @param {number} timeWindow - 시간 윈도우 (ms) * @returns {(fn: () => Promise) => Promise} */위의 형식대로 인자를 받고 반환하는 createRateLimiter 함수를 작성.. 2025. 1. 19.
JavaScript로 구현하는 Rate Limiter : 효율적인 API 요청 오늘의 실전 JS 문제 중, Rate Limiter 구현 문제가 나왔다.Rate Limiter란 무엇인지 알아보고 활용 사례 및 4가지의 설계 패턴에 대해 알아보겠다.  Rate Limiter란?특정 시간 동안 클라이언트가 보낼 수 있는 요청 수를 제한하는 기술이다.즉, rate limit을 1초 동안 3번까지 요청할 수 있다고 제한했을 때, 클라이언트가 1초 동안 10개의 요청을 보내면,처음 3개의 요청은 접수되고 나머지 7개의 요청은 무시/기다렸다가 재호출 등의 역할을 하게된다.이는 서버의 과부하를 방지하고 공정한 자원 분배와 보안을 유지할 수 있게 해준다.  사용시 이점Rate Limiter는 서버를 보호하고 안정성을 유지하기 위해 많이 사용된다.클라이언트가 시간 당 요청할 수 있는 횟수를 제한하여.. 2025. 1. 17.

티스토리툴바