메모이제이션 메모이제이션은 함수의 호출 결과를 저장하고 동일한 입력이 다시 제공될 때 캐시된 결과를 반환하여 실행 속도를 높이는 최적화 방법이다. 주로 재귀 함수와 클로저 기법을 사용해 동작한다. 예시 : 피보나치 수열 const fibonacci = (num) => { if (num < 2) { return num; ...

토근 기반 인증 HTTP의 Connectionless, Stateless 특성 때문에 세션을 이용한 서버 인증 방식을 주로 사용된다. 하지만 서버를 통한 인증 방식은 저장해야 하는 세션의 수가 많아지면 서버에 과부하가 발생될 수 있다. 토큰을 사용한 인증 방식은 서버측에 데이터를 담아두지 않는다. 서버에서 발급받은 AccessToken을 클라이...

Class ES6에서 추가된 객체 생성 템플릿 함수 Constructor (생성자) 객체를 생성하고 초기화하기 위한 메서드 클래스 안에 한 개만 존재할 수 있다. 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용할 수 있다. class User { c...

@supports @supports은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공하며, 이를 기능 쿼리라 한다. 지원 조건은 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성할 수 있다. @supports (display: grid) { di...

:is() :is 가상 클래스 선택자의 함수는 선택 리스트를 인수로 받고, 리스트의 선택기 중 하나로 선택할 수 있는 요소를 선택한다. /* header, main, footer의 요소가 hover 되면 css 속성을 적용한다. */ :is(header, main, footer) p:hover { color: red; cursor: poin...

DOM Virtual DOM에 대해 이해하려면 DOM부터 알아봐야 하겠다. DOM은 Document Object Model의 약자로, 객체로 표현되는 문서(HTML 등) 구조이다. 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. HTML은 정적이지만 자바스크립트를 이용...

tree.map(branch => <Branch name={branch.name} ref={??} />); 위 코드처럼 map으로 여러 DOM 요소를 생성할 때나 재귀 컴포넌트의 경우, Ref를 어떻게 생성해야 할까? 우선 useRef 변수를 생성하고 초기값을 빈 배열로 만든다. const elementRefs = useRef(...

시간복잡도와 Big-O 시간 복잡도는 알고리즘을 처리하는 데 걸리는 시간을 정량화한 것이다. Big-O를 통해 시간 복잡도를 표현할 수 있다. O(1) : Constant Time 입력 데이터의 크기와 상관없이 언제나 일정한 시간이 걸린다. ex) pop(), push() 등 const names = ["Luis", "John", "...

Set 배열을 Set 인스턴스로 만들어 중복 제거 후, 스프레드 연산자로 배열로 반환 const dupArr = [1, 2, 3, 1, 2]; const set = new Set(dupArr); const uniqueArr = [...set]; filter(), indexOf() filter()와 indexOf()로 특정값이 처음으로 나타...

브라우저의 렌더링 과정 웹 어플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받는다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성...