차이 console.log()는 여러개의 인자를 받고, console.dir()는 인자를 하나만 받는다. dom element를 console.log()와 console.dir()로 찍어보면 console.log()는 HTML 형식으로 출력되고, console.dir()는 JSON과 같은 트리 구조로 출력된다. ...

메모이제이션 메모이제이션은 함수의 호출 결과를 저장하고 동일한 입력이 다시 제공될 때 캐시된 결과를 반환하여 실행 속도를 높이는 최적화 방법이다. 주로 재귀 함수와 클로저 기법을 사용해 동작한다. 예시 : 피보나치 수열 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", "...