POTATO THAT WANT TO BE HUMAN

every, some 은 배열 내부 모든 원소 값에 대해 검토가 필요한 경우 사용됩니다. 배열 내부의 원소를 순회하면서 특정 조건을 만족하는지 검사합니다. boolean값을 리턴하는데, 조건을 만족하면 true를 만족하지 않으면 false를 리턴합니다. 📌 every every 는 조건을 만족하지 않는 값이 발견되면 순회를 중단하고 false 값을 반환합니다. 조건을 만족하지 않는 원소가 있으면 순회를 중단하고 false를 반환합니다. 모든 원소를 다 검사했는데 조건을 만족하지 않는 원소가 없으면 true를 반환합니다. (원소가 없는 빈 배열은, 조건을 만족하지 않는 원소가 없으므로 무조건 true를 반환합니다.) 간단한 예제를 살펴보겠습니다. const numArr = [1, 2, 3, 4, 5, 6,..

filter함수는 명칭과 같이 콜백함수의 조건에 해당하는 모든 요소가 있는 새로운 배열을 반환해줍니다. 이런 기능을 하는 filter함수는 배열이나 JSON 객체내의 조건에 해당하는 값만을 추출할 때 유용하게 사용됩니다. 📌 filter 함수 filter함수는 javascript array에서 많이 사용되는 함수로 반복문의 역할을 수행합니다. filter함수에서는 반복시킨 배열에서 순차적으로 값에 접근합니다. const newArr = arr.filter(( elemnent, index, array ) => { ··· }); filter함수의 매개변수로는 콜백함수가 들어갑니다. 콜백함수에서는 3개의 매개변수를 사용할 수 있습니다. element: 현재 순회하는 array의 요소값 index : 그 요소의..

비구조화 할당 문법을 사용하면 배열, 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 비구조화 할당의 기본 구조는 좌측에 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 비구조화 할당을 이용하면 배열, 객체 내 값을 추출하는 코드가 간단해집니다. 필요한 객체와 나머지 요소 분리가 간단해집니다. 기본값 지정이 가능합니다. 🤔 배열에서의 비구조화 할당 const [a, b, c, d, e] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 🔍 초기값 선언 초기값을 선언하지 않으면 undefined가 할당됩니다. const [n1, n2, n3] = [100, 200]; conso..

먼저 브라우저의 너비와 높이를 구하는 방법에 대해 살펴보겠습니다. 1. window.innerWidth / window.innerHeight 2. window.outerWidth / window.outerHeight 3. window.screen.width / window.screen.height 🤔 window.innerWidth / window.innerHeight window.innerWidth는 브라우저 화면의 너비, window.innerHeight는 브라우저 화면의 높이를 나타냅니다. 전체 브라우저에서 스크롤바, 상단바, 개발자도구창 등을 모두 제외한 화면만의 너비와 높이를 출력합니다. 🤔 window.outerWidth / window.outerHeight window.outerWidth는 ..

일반적인 이벤트는 사용자가 클릭을 하는 것과 같은 상호작용을 하면 발생합니다. 하지만 실제로 Click이 발생하지 않았지만, 이벤트 핸들러를 호출하고 싶다면 어떻게 해야할까요? 이럴 때 사용할 수 있는 것이 Event trigger 입니다. 이벤트 트리거는 방아쇠를 당기면 총알이 나가는 것처럼 어떠한 행위를 했을 때 원하는 이벤트를 실행할 수 있도록 하는 방식입니다. 이벤트 트리거를 위해서는 dispatchEvent를 사용합니다. ( 다른 곳에서 원하는 특정 이벤트를 발생시킬 수 있음 ) dispatchEvent는 이벤트를 강제로 발생시킵니다. 원래의 이벤트는 사용자가 가서 클릭을 하는 등 상호작용을 해야 발생하는데, dispatch는 그렇지 않고 강제로 이벤트를 발생시킵니다. 단, 원하는 요소에 add..

chrome 브라우저에서는 input에 자동완성을 통해 입력하면 자동으로 input의 배경색, 글자색이 변경됩니다. 이는 chrome 브라우저의 기본설정이 다음과 같이 설정되어있기 때문입니다. input:-internal-autofill-selected { appearance: menulist-button; background-image: none !important; background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important; color: -internal-light-dark(black, white) !important; } :autofill 은 hover, active 등과 같이 선택자에 추가..

CSS 레이아웃에 대한 학습을 진행할 때 반드시 배워야 할 두가지가 있습니다. 바로 Flex와 Grid 입니다. 이번 글에서는 Grid에 대해 다루겠습니다. 일단 Flex와 Grid의 가장 큰 차이점은 Flex는 한 방향 레이아웃(1차원)이고 Grid는 두 방향(가로-세로) 레이아웃(2차원)이라는 점 입니다. 그렇기때문에 Flex를 사용할 때보다 더 복잡한 레이아웃 표현이 가능합니다. Grid 레이아웃을 만들기 위해서는 컨테이너와 아이템이 필요합니다. 컨테이너와 아이템에는 지정할 수 있는 속성이 각각 정해져있습니다. 여러 속성에 대해 살펴보겠습니다. 🤔 display: grid 컨테이너에 display: grid 를 적용하면서 시작합니다. 속성으로는 grid와 inline-grid가 있습니다. 컨테이너가..

자바스크립트에서는 var. let, const 를 통해 변수를 선언합니다. 자바스크립트의 변수는 선언 후 초기화됩니다. 선언 : 변수명을 등록하고 자바스크립트 엔진이 변수의 존재를 인식하는 단계 초기화 : 값을 저장하기 위한 메모리 공간을 확보하고 초기화하는 단계. 이 단계에서 암묵적으로 undefined가 할당됩니다. 🤔 호이스팅 (Hoisting) 먼저 호이스팅에 대해 알아보겠습니다. 호이스팅이란, 함수 안의 변수 선언을 모두 최상단으로 끌어올려주는 JS 고유 기능입니다. 자바스크립트가 시작될 때 엔진에 등록되어있는 함수(선언문으로 만들어진 함수), var로 선언된 변수들을 가장 먼저 끌어올려 읽어둡니다. 실행 전에 미리 읽어두기 때문에 var 키워드를 사용하면 변수를 선언하기 전에도 읽어올 수 있습..