POTATO THAT WANT TO BE HUMAN

비구조화 할당 문법을 사용하면 배열, 객체 안에 있는 값을 추출해서 변수 혹은 상수로 바로 선언할 수 있습니다. 비구조화 할당의 기본 구조는 좌측에 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 비구조화 할당을 이용하면 배열, 객체 내 값을 추출하는 코드가 간단해집니다. 필요한 객체와 나머지 요소 분리가 간단해집니다. 기본값 지정이 가능합니다. 🤔 배열에서의 비구조화 할당 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..

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

script 태그는 head 안에 또는 body 안에 삽입될 수 있습니다. 두 개의 차이점은 무엇일까요? 차이점을 알아보기 전에 HTML 파싱에 대해 알아보겠습니다. 🤔 HTML 파싱 먼저 브라우저의 구성 요소에 대해 알아보겠습니다. 여기서 주목해야할 부분은 '렌더링 엔진' 입니다. 렌더링 엔진은 HTML, CSS를 파싱한 결과물로, 페이지를 화면에 표시합니다. 자바스크립트 코드는 자바스크립트 해석기에서 해석됩니다. 대표적인 렌더링 엔진으로는 사파리의 webkit, IE의 trident, 파이어폭스의 Gecko 그리고 크롬, 오페라, edge의 Blink(webkit에서 파생됨)가 있습니다. 🔍 파싱이란? 파싱은 해당 언어의 문법 검사기라고 할 수 있습니다. 네트워크로 받은 HTML과 CSS 파일을 토큰..

리액트 프로젝트 진행 중 배열 내 중복을 제거하는 작업을 하였다. 배열 내의 저장된 데이터의 형태는 다음과 같았다. const cartArr = [{ id : 2, title : "제목", writer : "작가" }, { id : 5, title : "제목", writer : "작가" }, ···]; 배열 내에 객체가 저장되었고, 각 객체 내부에는 모두 다른 데이터가 들어가있는 상태이다. 같은 값이 저장되면 안되는 상황이었기 때문에 중복을 제거하기 위해 Set 자료형을 사용하려 하였지만 어째서인지 먹히지않았다.. 아마 배열내에 저장된 데이터가 모두 '객체'라는 점에서 다르게 인식되어 중복으로 저장할 수 있었던 것 같다.. (추측) 이를 해결하기 위해 구글링을 하던 중 Set 자료형으로 배열 내 객체데이..

array에 담아둔 자료를 활용할 때 마지막 요소에 특정 이벤트를 주는 경우가 있다. array에서 마지막 요소의 index는 어떻게 알 수 있을까? 🔎 배열의 마지막 요소를 찾자 다음과 같은 배열 객체가 있다고 하자. const arr = ['red', 'yellow', 'green', 'blue', 'black']; 'red' 는 arr[0], 'yellow' 는 arr[1], 'green' 은 arr[2], 'blue' 는 arr[3], 'black' 은 arr[4] 입니다. 배열의 길이는? console.log('배열의 길이는 '+arr.length); // 배열의 길이는 5 그렇다면 배열의 마지막 인덱스는 배열의 길이 -1 이 됩니다. arr[arr.length-1]을 통해 배열의 마지막 요소에..

자바스크립트로 웹 개발을 하다보면 데이터를 어딘가에 저장해야 할 일이 생깁니다. 대부분 데이터베이스 서버나 클라우드에 데이터를 저장하는 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 그럴 때 웹 스토리지를 사용할 수 있습니다. html5에는 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 web storage가 있습니다. web storage는 키 / 값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회합니다. 영구저장소(localStorage)와 임시저장소(sessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능합니다. web s..