일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- 제로초
- 프로그래머스
- 코어 자바스크립트
- 리액트
- til
- 정재남
- js
- SQL 고득점 Kit
- Async
- 4주 프로젝트
- 손에 익히며 배우는 네트워크 첫걸음
- HTTP
- 타임어택
- 타입스크립트 올인원
- 토익
- LeetCode
- 파이썬
- 2주 프로젝트
- 리덕스
- javascript
- 백준
- 회고
- 타입스크립트
- 알고리즘
- 토익 900
- 렛츠기릿 자바스크립트
- codestates
- 코드스테이츠
- programmers
- 자바스크립트
- Today
- Total
목록Front (80)
Jerry
자바스크립트에서 함수 호출 방식에 따라(어떻게 호출되었는지에 따라) this에 바인딩되는 객체가 동적으로 달라진다. 수의 상위 스코프를 결정하는 방식인 렉시컬 스코프(Lexical scope)는 함수를 선언할 때 결정된다. this 바인딩과 혼동하지 않도록 주의하기 바란다. 함수의 호출하는 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); }; // 1. 함수 호출 foo(); // window // window.foo(); // 2. 메소드 호출 var obj = { foo: foo }; obj.foo(); // obj // 3. 생성자 함수 호출 var instance = ..
동기식 처리 모델(Synchronous processing model) 직렬적으로 태스크(task) 수행한다 태스크는 순차적으로 실행되며 어떤 작업 수행 중이며 다음 작업은 대기한다 서버에서 데이터 요청을 받아 화면에 표시하는 작업 수행 시, 서버에 데이터 요청 후 응답될 때까지 태스크들은 블로킹(blocking, 작업 중단)이 된다. function first() { console.log('first'); second(); } function second() { console.log('second'); third(); } function third() { console.log('third'); } first(); 비동기식 처리 모델(Asynchronous processing model / Non-Blo..
let과 const 호이스팅 + TDZ(Temporal Dead Zone) let과 const로 선언한 변수도 호이스팅 대상이다. 호이스팅 시 let은 undefined로 변수 초기화 하지 않음 이 상태에서 선언한 let 키워드 호출 ⇒ 예외 발생 (에러) | 에러 발생 이유: 일시적 사각지대(TDZ: Temporal Dead Zone) 변수 스코프의 맨 위에서 변수의 초기화 완료 시점까지의 변수는 "일시적 사각지대"(Temporal Dead Zone, TDZ)에 들어간 변수라고 표현 TDZ인 이유는 사각지대가 코드의 작성 순서(위치)가 아니라 코드의 실행 순서에 의해 형성되기 때문 // TDZ Example function do_something() { console.log(bar); // undefi..
var 키워드 Scope of var : var 키워드의 범위 범위는 기본적으로 변수를 사용할 수 있는 위치 의미 var 선언은 전역 범위 혹은 함수 범위로 지정 var 변수가 함수 외부 선언 => 범위는 전역 (전체 윈도우 상) var 변수가 함수 내부 선언 => 범위는 함수 블록 내부 var hello = 'a'; function person() { var world = 'b'; } console.log(world); // world is not defined console.log(hello); // hello var의 호이스팅 호이스팅이란 변수와 함수 선언이 맨 위로 이동되는 자바스크립트 매커니즘 = 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 console.log (gre..
var 호이스팅 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 var 로 선언한 변수의 경우 호이스팅 시 undefined로 변수 초기화 var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다 let과 const로 선언한 변수의 경우 호이스팅 시 초기화하지 않음 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것 변수 정의 코드보다 사용 코드가 앞서 등장할 수 있음 함수 선언도 위와 동일 // #1 Case function catName(name) { console.log("제 고양이의 이름은 " + name + "입니다"); } catName("호랑이"); /* 결과: "제 고양이의 이름은 호랑이입니다" */ // #2 Case catName..
[css 10초 컷] :last-child Selector와 :nth-last-child()입니다. :last-child 선택자는 상위(부모) 요소의 마지막 하위(자식) 요소를 가리킵니다. :nth-last-child(n) 선택자는 타입이나, 상위(부모) 요소와 관계없이, n번째 하위(자식)의 모든 요소를 가리킵니다. p:last-child은 p:nth-last-child(1)와 같습니다. 참고 https://css-tricks.com/almanac/selectors/l/last-child/#:~:text=The%20%3Alast%2Dchild%20selector%20allows,with%20parent%20and%20sibling%20content. https://www.w3schools.com/css..
[css 10초 컷] margin: 0 auto (수평 가운데 정렬)이 안 되는 이유될 때 margin: 0 auto는 상하에는 0값, 좌우에는 auto값을 주는 것을 의미합니다. 1. HTML 파일에서 선언이 제대로 되었는지 확인합니다. 2. 해당 요소의 가로 사이즈가 설정되었는지 확인한다. 설정 안 되어 있다면, width를 지정한다. 왜냐하면, auto는 자동으로 사이즈를 설정해주기 때문이다. 3. 해당 요소의 display 속성이 inline 속성인지 확인한다. 2번의 내용과 같은 맥락으로, inline 속성은 자신만큼 영역값만을 가지기 때문이다. 4, 차지하고 있는 요소가 이미 해당 가로 공간을 차지하고 있는지 확인한다. 참조 https://ofcourse.kr/css-course/%EC%88%..
[css 10초 컷] CSS Selectors 입니다. CSS에서 셀렉터는 스타일을 주고 싶은 요소를 선택할 때 사용하는 패턴입니다. 우리가 HTML에서 원하는 요소에 스타일을 주려고 할 때, 어떻게 했나요? 네. Class나 Id 속성을 활용하죠. 또한, 해당 태그명에 대해 직접 선언할 수도 있고, ::before나 ::after를 활용한 가상 선택자도 선택할 수 있습니다. 이 중, 두 개의 클래스를 활용해서 원하는 요소를 선택하는 다중 선택자을 살펴보겠습니다. 형태는 .class1.class2와 .class1 .class2가 존재합니다. (띄어쓰기 차이입니다) 좌는 붙어있고 우는 띄어져 있습니다 좌는 class1과 class2 둘 다 같은 클래스 속성안에 있는 요소를 모든 요소를 선택합니다. 우는 c..