맨땅에 헤딩

1-1. 데이터 타입의 종류 데이터 타입의 종류 Primitive type Reference type Number String Boolean null undefined Symbol Array Function Date RegExp Map, WeakMap Set, WeakSet 할당, 연산시 ➡️ 복제 할당, 연산시 ➡️ 참조 값이 담긴 주솟값을 바로 복제 값이 담긴 주솟값들로 이루어진 묶음을 가르키는 주솟값을 복제 불변성 엄밀히 말하면, 둘 모두 복제 기본형: 값이 담긴 주솟값을 바로 복제 참조형: 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제 1-2. 데이터 타입에 관한 배경지식 1-2-1 메모리와 데이터 1비트마다 0 또는 1 의 두가지 값을 표현할 수 있다. 메모리들은 매우 많은 비트로..

➡️ async와 defer를 제대로 이해하기 위해서는 HTML의 실행순서에 대한 이해가 선행되어야 한다. 이런 이해가 바탕에 있어야, 왜 굳이 async와 defer를 사용해야하는지 그 필요성에 대해서 알 수 있다. 🧷 선행학습 🔎 HTML의 문서파싱 순서와 동작원리 html은 기본적으로 위에서부터 아래로 태크를 해석한다. 위에서부터 태그를 해석하면서 돔트리를 형성한다. 그렇게 형성된 트리에 의해서 유저는 브라우저 화면을 통해서 개발자가 만든 화면을 볼 수 있다. 🕵️‍♀️ 발생가능 문제점 2가지 이러한 HTML의 성질때문에 문제가 발생할 수 있다. 위에서부터 순차적으로 태그를 파싱하므로 body태그의 위에 위치한 태그를 body보다 먼저 해석하기 시작한다. script태그가 모두 수행될때까지 아래로 ..

Web APIs에는 종류가 정말 많은데 오늘은 그 중 window.locaion에 대해 공부했다. 우선 window.location을 이해하기 위해서는 Web APIs가 무엇인지 이해하는 것이 필요하다. 🧷선행학습 web API란? 우선 mdn의 공식문서에는 위와 같이 정의되어있다. 개발하는 동안 사용할 수 있는 모든 API 및 interface(객체)를 의미한다. 웹 API를 이해하기 위해서는 또 API가 무엇인지를 알아야한다. 🧷선행학습 API란? API는 쉽게 말해서 설명서나 버튼같은 것이다. 그 안에 무엇이 들어있는지 자세하게 알지는 못해도, 이미 짜여있는 것들을 쉽게 꺼내어 쓸 수 있도록 도와주는 역할을 한다. ➡️ web API는 미리 브라우저에 내장되어있어서 개발자가 쉽게 꺼내어쓸 수 있는 ..

구조분해할당이란? 객체나 배열의 값을 추출하여 변수에 할당하는 것 객체구조분해할당 기본형태: {추출하고 싶은 특정 값} = 객체 예시 const { data } = response response 객체의 data 속성에 접근하고 그 값을 data라는 변수에 저장 response객체의 내부를 보면 {data:{...}, date:{...}, 기타등등...} 객체안에 여러가지 객체가 또 들어있다. 이중에서 data라는 이름의 객체만을 추출하고 그 값을 data라는 변수에 저장한다. 이렇게 함으로써 response.data라고 적을 필요 없이 data만 적어도 data안에 있는 값에 접근할 수 있다. 이렇게 객체구조분해할당의 기본형태에서 한단계 나아간 것이 새로운 변수이름 할당하기이다. 기본형태는 같고, 거기..

➡️ 로고를 누르면, 현재 페이지를 다시 리로드하는 기능을 구현하기 위해서 window.location.reload를 사용한다. 1. 기능 현재 페이지를 다시 리로드 2. 방법 window.location.reload() 우선 나는 현재 넷플릭스 사이트를 만들고 있는데, 맨 위에 있는 넷플릭스 로고버튼을 누르면 현재 페이지가 리로드되는 기능을 넣어야했다. 이를 위해서 window.location.reload()를 사용하였다. 🔫 의도: 왼쪽 제일 상단에 있는 넷플릭스 버튼을 누르면 페이지를 다시 리로드하도록 ✅ 코드 window.location.reload()} /> onClick이벤트를 통해 이미지를 누르면 reload를 실행하게 한다. ✔️ 결과확인 🔎 원리 window.location은 웹 브라우저..

1. 정의 IIFE (IIFE, Immediately Invoked Function Expression) 함수 정의와 동시에 즉시 호출 되는 함수 🔫 언제 사용? 🔫 ✅ 단 한번만 사용할 함수 ✅ 자바스크립트 모듈 2. 형식 //익명 즉시 실행함수 (function () { var a = 3; var b = 5; return a * b; })(); - 이름이 없는 익명함수를 사용하는것이 일반적 (이름이 있는 기명 즉시 실행 함수도 사용은 가능하지만, 어차피 다시 호출할 수는 없다.) 3. 사용이유 1️⃣ 필요없는 전역 변수 생성 ❌ ➡️ 전역 스코프 오염 ❌ (IIFE ➡️ 내부변수가 전역으로 저장되지 않음) 2️⃣ private한 변수 생성 외부에서 접근할 수 없는 자체 스코프, 내부를 private하..

1. 클로저란? 클로저는 자신이 선언될 당시의 환경을 기억하는 함수 클로저는 함수 + 함수가 선언된 렉시컬 환경과의 조합 클로저를 이해하기 위해서는 실행컨텍스트와 렉시컬환경이라는 개념을 이해하는것이 우선된다. 이것에 대해서는 이전글에서 따로 정리를 해두었다. 자바스크립트 실행컨텍스트/ 렉시컬환경(환경레코드,외부환경참조) 1️⃣ 실행컨텍스트 코드를 실행하는데 필요한 환경을 제공하는 객체 (환경: 코드 실행에 영향을 주는 조건이나 상태) 식별자결정을 더욱 효율적으로 하기 위한 수단 모든 자바스크립트의 모든 hihiha2.tistory.com ✅ 특징: 해당함수의 생명주기가 종료되더라도 참조가능 ✅ 원리: 실행컨택스트의 렉시컬환경에 정보가 남음 일반적으로 함수가 실행되고 나면 실행콘텍스트의 콜스택에서 제거가 ..

1️⃣ 실행컨텍스트 코드를 실행하는데 필요한 환경을 제공하는 객체 (환경: 코드 실행에 영향을 주는 조건이나 상태) 식별자결정을 더욱 효율적으로 하기 위한 수단 모든 자바스크립트의 모든것은 실행컨텍스트 내에서 발생한다. 이 실행컨텍스트는 전체 자바스크립트 코드가 실행되는 큰 상자 또는 컨테이너라고 가정할 수 있다. 자바스크립트를 실행시키면 자바스크립트 엔진은 콜스택이라는 통에 전역실행컨텍스트를 담는다. 만약 전역에서 함수A를 호출할 경우, 함수A의 실행 컨텍스트를 생성해서 또 스택에 담는다. (가장 상위에 있는 실행컨텍스트가 현재 활성화된 실행컨텍스트이다) 1 함수를 호출한 후 순서대로 나열하면, 호출된 함수에 2 실행컨텍스트를 생성하고 이를 3 실행컨텍스트 스택에 push한다. 그 후 함수는 본인의 4..

1. 자바스크립트의 함수정의 4가지 자바스크립트에서 함수를 정의하는 방법에는 4가지가 있다. 1. 함수 선언식 2. 함수 표현식 3. Function 생성자 함수 4. 화살표 함수 (ES6) case 1 :함수 선언식 function add(x,y){ return x+y; } case 2: 함수 표현식 var add = function(x,y){ return x + y; } case 3: Function 생성자 함수 var add = new Function('x','y', 'return x+y'); case 4: 화살표 함수(ES6) var add = (x,y) => x+y; 2. 함수선언식과 함수표현식의 차이 1️⃣ 형식 함수선언식 function 함수명() { 구현 로직 } 함수표현식 var 함수명 ..

1. 자바스크립트 객체의 형태 {key: value} property 자바스크립트의 객체는 태그와 같은 역할을 하는 key와 거기에 실질적인 값이 들어있는 value로 구성되어있다. 이러한 key + value의 값을 합쳐서 property라고 한다. const user = { id: 1, name: "hihi" } user라는 이름을 가진 객체이다. id와 name이 key값이고, 1과 hihi가 각각의 키에 들어있는 value이다. 🤔 객체의 key값으로 가능한 4가지 형태 1️⃣ 그냥 써주기 { id: 1 } 위의 코드에서 id가 key값이다. 이런 것처럼 키값을 그냥 써주면 된다. 2️⃣ "" (쌍따옴표) 안에 써주기 { "my name": "hihi" } 위의 코드에서는 my name이 key값..