dev 썸네일형 리스트형 React Hooks useState 함수형 컴포넌트에서 상태를 관리할 때 쓴다. const [state, setState] = useState(initialState); 반환된 배열 중 첫번째 원소는 값을 저장하는 state 이며, 두번째 원소는 setter 함수다. state를 변경할 때에는 반드시 이 setter를 이용해야 렌더링이 정상적으로 이루어진다. useState로 상태 변경 시, 렌더링이 된 후에 업데이트된 state를 조회 가능하다. 즉, useState가 호출된 이후라도 렌더링이 수행되지 않았다면 업데이트 이전의 state가 조회된다. useRef const refContainer = useRef(initialValue); initialValue를 설정하면 refContainer.current가 해당 값으로.. debounce와 throttle 개인 프로젝트 중 무의미한 스크롤 이벤트를 줄여야 했습니다. 그 과정에서 debounce, throttle 개념에 대해 알게 되어 정리 차 글로 남깁니다. debounce 맨 마지막으로 호출된 함수만 실행시킵니다. 아래와 같은 형태로 작동합니다. 중간에 함수가 다시 호출되면 타이머를 초기화 하고 delay 만큼 기다린 후 실행합니다. 따라서 최종적으로는 마지막 fn()이 호출된 시점 + delay 후에 함수가 실행됩니다. function debounce(fn, delay) { let timer = null; // timer 은닉을 위해 클로저를 사용 return function () { // 클로저 함수 안에서 this 와 arguments 변수로 디바운싱 함수의 스코프와 변수에 접근 const cont.. position : absolute가 부모 엘리먼트 밖으로 나가는 문제 absoluteThe element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.This value creates a new stacking context when the value of z.. Flexbox : align-items와 align-content 차이 공통점 둘 다 cross-axis 기준 정렬이다. 차이점 align-items : flex line을 기준으로 아이템을 정렬한다. align-content: flex line을 정렬한다. align-content는 corss axis에 대한 justify-content라 이해할 수 있다. 값도 space-between 처럼 justify-content 에서 사용되는 값을 줄 수 있다. align-content는 nowrap인 경우 사용하는 의미가 없다. nowrap은 강제로 한 줄에 그리는 것이기 때문에 flex line이 하나 뿐이기 때문이다. 반대로 align-itmes는 line이 한 줄인 경우에도 그 라인 안에서 정렬하는 것이기 때문에 작동한다. flexbox froggy 21번 문제에서 alig.. CSS flexbox : 기본 개념 Created: Aug 4, 2020 3:15 PM Reviewed: No flexbox 기본 개념 아이템을 행,열 형태로 배치하는 일차원 레이아웃 메서드다. grid는 2차원 레이아웃 입니다. flexbox 설정 display : flex display: inline-flex flexbox 구성요소 main axis cross axis flex container flex item flex container axis main axis 정의는 flex-direction을 이용한다. flex-direction : column | row (default) | column-reverse | row-reverse .container { display:flex; flex-direction: column; } mai.. CSS Grid : 기본 개념 Created: Aug 4, 2020 12:41 PM Materials: https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout Reviewed: No Grid container display: grid 또는 display: inline-grid로 정의 Grid track 명시적(explicit) 트랙 정의 grid-template-columns grid-template-rows 잠재적(implicit) 트랙 정의 grid-template-* 으로 정의한 트랙보다 컨텐츠의 개수가 더 많으면 그리드는 자동으로 그리드에 새로운 행과 열을 만든다. 이렇게 생성된 트랙을 잠재적(implicit) 트랙이라.. JavaScript 안정 정렬 Stable sort란? 정렬 기준에 차이가 없다면 원래 입력에서 주어진 순서를 유지하는 정렬을 말합니다. 만약 두 항목이 같은 값을 가지면 그들의 순서가 정렬된 리스트에 유지됩니다. (values that have the same key keep their original order) Stable sorting algorithms maintain the relative order of records with equal keys. [...] Whenever there are two records (let's say R and S) with the same key, and R appears before S in the original list, then R will always appear before S.. JS 코딩테스트를 위한 코드 스니펫 1. 0~9 까지 숫자 배열 생성 Array.from({length:10}, (val,idx)=>idx) 2. 정수 난수 생성 min 이전 1 2 3 4 5 6 7 ··· 10 다음
