본문 바로가기
반응형

전체 글

 (174)
[ JavaScript ] Promise MDN 문서 내용을 정리해봤다. Promise 사용 이유 말고 오로지 사용법에 대해서만 알아볼 것이다. Promise란 무엇인가? Promise는 비동기 함수를 다루기 위한 목적으로 만들어진 객체로, 일반 객체와는 다르게 상태 정보를 갖는다. 아래는 MDN 문서의 그림이다. 위 그림과 같이 Promise는 네 가지 상태 정보를 가지며 각 상태의 의미는 아래와 같다. 1. pending : 비동기 처리가 아직 수행되지 않은 상태 : resolve 또는 reject 함수가 아직 호출되지 않은 상태 2. fulfilled : 비동기 처리가 수행된 상태(성공) : resolve 함수가 호출된 상태 3. rejected : 비동기 처리가 수행된 상태(실패) : reject 함수가 호출된 상태 4. settled ..
[ JavaScript ] 함수와 클로저(Closure) ... 커링을 곁들인 함수 자바스크립트에서 함수는 일급 객체로 취급한다. 일급 객체란 생성, 대입, 인자 또는 반환값으로서의 전달 등 프로그래밍 언어의 기본적인 조작을 제한없이 사용할 수 있는 대상을 의미한다. 쉽게 말해서 모든 기능을 몰빵한 것으로 생각하면 된다. 일급 객체는 자바스크립트만의 특성은 아니고 다른 언어에서도 나타나는 특성이다. 아래의 조건을 만족하면 일급 객체로 간주한다. 1. 무명의 리터럴로 표현이 가능하다. (익명함수) 2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 반환값으로 사용할 수 있다. // 1. 무명의 리터럴로 표현이 가능하다. // 2. 변수나 자료 구조에 저장할 수 있다. var increase = function (num) { re..
[ JavaScript ] 실행 컨텍스트 이 글은 'Deep Dive'를 보고 정리한 글이다. 실행 컨텍스트를 직접 설명하려니 글이 너무 안 써져서 책의 표현을 많이 빌려 썼다. 문제가 되면 글을 삭제하도록 하겠다. 링크 걸어놓은 사이트를 가면 훨씬 설명이 잘 되어 있으니 참고하길 바란다. 실행 컨텍스트란? 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 실행 컨텍스트는 식별자(변수, 함수, 클래스 등의 이름)를 등록하고 관리하는 내부 메커니즘으로, 모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 말이 좀 어렵지만 정말 쉽게 말하면 실행 컨텍스트는 소스코드 내의 모든 변수와 함수의 참조 관계를 도식화한 지도로 생각하면 된다. 자바스크립트 엔진은 소스코드 실행에 앞서 소스코드의 '..
[ JavaScript ] 스코프와 호이스팅(feat. var let const) 1. 스코프 (Scope) 스코프는 참조 대상 식별자(변수)를 찾아내기 위한 규칙이다. 자바스크립트 엔진은 스코프 규칙에 따라 변수를 찾아 쓴다. 위 문장이 스코프의 일반적인 정의다. 변수는 선언 위치에 의해 스코프를 가지게 된다. 모든 변수는 크게 봤을때 전역, 코드 블록(if, for while, try/catch), 함수 안에서 선언된다. 따라서 스코프의 종류도 전역 스코프, 블록 레벨 스코프, 함수 레벨 스코프로 나뉜다. 그림으로 살펴보면 아래와 같다. 전역 스코프 : 전역에 변수를 선언하면 이 변수는 어디서든 참조할 수 있다. 함수 레벨 스코프 : 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 블록 레벨 스코프 : 코드 블록 내에서 선언된 변수는 코드 블록 ..
[ JavaScript ] this 자바스크립트의 this는 굉장히 골칫덩어리다. 이 글을 통해 this를 정복해보자. 정복당하는건 아닐지.. 자바스크립트의 함수는 호출될 때 매개변수로 전달되는 인자값 이외에 arguments 객체와 this를 암묵적으로 전달 받는다. 따라서 this는 함수 호출시 동적으로 결정된다. 그런데 호출 시점에 결정된다는게 어떤 의미인지 잘 와닿지 않기 때문에 함수를 종류별 나누고 각 케이스마다 어떻게 되는지 살펴보자. 그래서 우선 'this는 함수의 종류에 따라 바인딩 대상이 달라진다' 로 이해하자. 함수의 종류는 여러가지가 있는데 나는 여섯 가지로 분류해봤다. 아래가 이 글의 목차라고 생각하면 된다. 함수 종류 1. 일반 함수 2. 객체의 메소드 3. 화살표 함수 4. 생성자 함수 5. apply/call/b..
[ JavaScript ] String Methods & 정규표현식 String Methods includes - 문자 포함 여부 반환 // 구문 str.includes(searchString[, position]) // 예제 const str = "안녕하세요~ 안녕하세요! 좋은 하루 되세요~"; console.log(str.includes('안녕하세요')); // true console.log(str.includes('안녕', 9)); // false indexOf - 문자열에서 주어진 값과 일치하는 첫 번째 인덱스 반환 // 구문 str.indexOf(searchValue[, fromIndex]) // 예제 const str = "cat dog cat bird"; console.log(str.indexOf('cat')); // 0 console.log(str.inde..
[ JavaScript ] Array Methods 정리, sort 파헤치기 배열 메소드에 어떤 것이 있는지 한번 쭉 공부해봤다. 다 외우는건 뇌 낭비고(쓰다보면 외워진다) 그냥 어떤 메소드가 있는지 알아두기만 하는 용도로 글을 작성한다. sort는 내용이 조금 길어서 가장 마지막 순서에 적어놨다. 1. map map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. 원본 배열이 바뀌지는 않는다. 구문은 아래와 같다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 여기서 [, something] 은 생략 가능하다는 의미다. currentValue만 적고 나머지는 안 쓰는게 일반적이다. thisArg를 제외하고 모든 파라미터를 사용한 예시는 아래와 같다. 아래..
[ HTML+CSS ] Transform, Transition, Animation 이 내용은 필요할때 검색해서 쓰면 되지만... 그래도 한번 정리해 놓으면 쉽게 사용할 수 있으므로... 귀찮아도 정리를 해보자!! [1] Transform 말그대로 '변형' 속성이다. 회전, 크기 조절, 왜곡 등의 효과를 넣을 수 있다. Transition과 Animation과 같이 쓰면 유용하다. 어떤 속성이 있는지 알아보고, 예제까지 살펴보자. 1. 3D Transform rotateX(50deg) : 3차원 평면에서, X축 기준 360도까지 회전시켜주는 속성. 괄호 안에 회전시키고자 하는 각도를 적어주면 된다. rotateY(50deg), rotateZ(50deg) : 3차원 평면에서, 각각 Y축, X축 기준으로 회전시켜주는 속성. 쉬운 이해를 위해 transition과 같이 썼다. 박스에 마우스를..
반응형

티스토리툴바