전체 글

문제분석주어진 함수의 결과를 캐시에 저장하고, 같은 입력에 대해서는 다시 계산하지 않고 저장된 결과를 반환하도록 하는 것이다.알고리즘 설계캐시 저장소 만들기함수 호출횟수 추적함수의 입력을 문자열로 변환fn이 호출될대마다 캐시에서 결과를 찾아 있으면 반환없으면 실제 함수를 호출하고 결과를 캐시에 저장한다. 구현/** * @param {Function} fn * @return {Function} */function memoize(fn) { const cache = new Map(); return function(...args) { const key = args.toString(); if (cache.has(key)) { return cache.get(k..

브라우저 렌더링 이해하면 성능 최적화의 길이 보인다. 브라우저 렌더링 과정을 알면 웹 페이지 성능을 최적화하고, 디버깅을 쉽게 하며, 웹 애플리케이션의 사용자 경험을 개선하는 데 중요한 정보를 얻을 수 있습니다. 우선 간략하게 5가지로 나누어본후 상세로 설명하겠습니다.1. 성능 최적화렌더링 과정 최적화: 페이지가 어떻게 렌더링되는지 이해하면 페이지 로딩 속도를 빠르게 하거나, 불필요한 리소스를 줄이는 방법을 알 수 있습니다. 예를 들어, 이미지나 스크립트가 렌더링 성능에 미치는 영향을 파악하고, 이를 최적화할 수 있습니다.렌더링 차단 요소 분석: 자바스크립트나 CSS가 페이지 렌더링을 차단하는 방식에 대해 알면, 페이지 로딩을 더 빠르게 할 수 있는 방법(예: 비동기 로딩, CSS 최적화 등)을 찾을 수..

function createAdvancedFilter(minValue, maxValue) { return function(arr) { return arr.filter(function(num) { return num > minValue && num  클로저를 한마디로 정의하면  외부 함수 내에서 정의된 내부 함수가 외부 함수의 변수에 접근할수있다. 대표사진에서 보이는 선물 포장의사진은 일종의 감싸는 것을 표현하는거같습니다. (스코프를 감싼) 그렇다면 클로저를 이용하여 구현을하면 좋은 이유가 뭘까요? 클로저를 이용하여 구현하면 좋은 이유는 "상태를 감싸고 안전하게 보호하는" 기능을 제공하기 때문입니다.선물 포장의 이미지처럼, 클로저는 데이터를 감싸서 외부로부터 보호하고, 필요한 부분만 노출시..

자바스크립트에서 스코프를 이해하는 것은 매우 중요합니다. 이유를 7가지로 정리하여 설명하겠습니다.1. 변수와 함수의 접근 범위 이해자바스크립트에서 변수와 함수는 특정 스코프 내에서만 접근할 수 있습니다. 스코프를 이해하지 않으면 변수나 함수가 어디서 정의되었고, 어디서 사용할 수 있는지, 혹은 오류가 발생할 가능성이 있는지 알 수 없습니다.예를 들어, 전역 변수와 지역 변수의 차이를 모르고 코드 작성 시 예기치 않은 결과가 발생할 수 있습니다.2. 변수 충돌 방지동일한 이름의 변수를 여러 번 사용하거나, 다른 스코프 내에서 동일한 이름의 변수가 있을 경우 충돌이 발생할 수 있습니다. 자바스크립트에서는 이를 변수 호이스팅(hoisting)과 스코프 체인(scope chain) 개념을 통해 다루지만, 스코프..

1. 쿠키 (1) Client → Server클라이언트가 서버에 처음으로 Request 전송(2) Server서버에서 쿠키 생성(3) Server → ClientHTTP 응답 헤더에 쿠키 포함시켜 응답(4) Client브라우저 종료되어도 쿠키 만료 기간 지나지 않았다면 클라이언트에서 보관(5) Client → Server같은 요청 하는 경우 HTTP 헤더에 쿠키 함께 보냄(6) Server → Client서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요 있을 때 쿠키 업데이트 하여 변경된 쿠키를 HTTP 헤더에 포함시켜 응답  2. 쿠키의 특징 1. 쿠키는 몇가지 특징이 있는데 쿠키는 도메인에 한정적입니다. 예를 들어 구글에서 사용자를 인식하기  위해 사용자에게 준 쿠키는 네이버에 보낼 수 없습니다. ..

소스코드를 보고 개념을 설명하라의 공부방법을 적용해보려한다.그래서 모던자바스크립트의 책예제를 통해 소스코드를 분석해보자 const x = 1;const y = 2;function foo(a) { const x = 10; const y = 20; console.log(a+x+y); // 답1}foo(100);console.log(x+y); // 답2 답1 : 130답2 : 3소스코드의 흐름을 설명하시오.전역 스코프const x = 1과 const y = 2가 호이스팅되어 메모리에 할당됩니다.호이스팅: 변수들이 메모리에서 공간을 차지하지만 값은 초기화되지 않습니다.함수 호출foo(100)가 호출되면 새로운 실행 컨텍스트가 만들어집니다.함수 스코프에서 const x = 10과 const y = 20이 초기화..