You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[JS] 📚 클로저 (Closure) 개념 완벽 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F6qkC3%2FbtrfTLaRmah%2FW3aoP8O00kWs3UemtY7FXK%2Fimg.jpg)
[JS] 📚 클로저 (Closure) 개념 완벽 정리
클로저(closure) 란? 클로저는 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여, 만일 자신이 선언됐을 때의 환경(스코프) 밖에서 호출되어도 스코프에 접근할 수 있는 함수를 말한다. function outerFunc() { var x = 10; var innerFunc = function () { console.log(x); }; innerFunc(); } outerFunc(); // 10 함수 outerFunc 내에서 내부함수 innerFunc가 선언되고 호출되었다. 이때 내부함수 innerFunc는 자신을 포함하고 있는 외부함수 outerFunc의 변수 x에 접근할 수 있다. 이는 함수 innerFunc가 함수 outerFunc의 내부에 선..
📚 자바스크립트 Async/Await 개념 & 문법 정복
자바스크립트 비동기 처리 3가지 방식 자바스크립트는 싱글 스레드 프로그래밍 언어기 때문에 멀티 작업을 하기 위해선 비동기 처리 방식이 자주 쓰인다. 비동기 처리는 백그라운드로 동작되기 때문에 그 결과가 언제 반환될지 알수 없어, 완료되면 결과를 받아 처리하기 위해 사용되는 대표적인 방법으로 콜백 함수(Callback) 와 이를 개선한 프로미스 객체(Promise)가 있다. 하지만 서비스 규모가 커질 수록 코드가 복잡해짐에 따라 코드를 중첩해서 사용하다가 가독성이 떨어지고 유지보수가 어려워지는 상황이 발생되게 되는데, 이를 Callback Hell, Promise Hell 이라고 불리운다. /* Callback Hell */ getData (function (x) { getMoreData (x, funct..
📚 자바스크립트 Promise 개념 & 문법 정복하기
콜백 지옥을 탈출하는 새로운 문법 자바스크립트에서 '비동기 처리' 란 현재 실행중인 작업과는 별도로 다른 작업을 수행하는 것을 말한다. 예를 들어 서버에서 데이터를 받아오는 작업은 시간이 걸리기 때문에 자바스크립트의 서버 호출 함수는 비동기 함수(--링크--)로 이루어져 있다. 비동기는 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 방식이기 때문에, 만일 비동기 작업의 결과에 따라 다른 작업을 수행해야 할 때는 전통적으로 콜백 함수를 사용했다. 콜백 함수란 비동기 작업이 완료되면 호출되는 함수의 의미로서, 비동기 함수의 매개변수로 함수 객체를 넘기는 기법을 말한다. 그래서 함수 내부에서 함수 호출을 통해 비동기 작업의 결과를 받아서 인자로 주면 이를 통해 후속 처리 작업을 수..
![[JS] 📚 자바스크립트 Date 메소드 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FNn1EB%2FbtrfVqQWlz3%2FQoGfcf3xQQa2t3f4gpRJIK%2Fimg.jpg)
[JS] 📚 자바스크립트 Date 메소드 💯 총정리
자바스크립트에서의 날짜 표현 자바스크립트에서는 Date 객체를 사용하여 매 순간 변화하는 시간과 날짜에 관한 정보를 손쉽게 얻을 수 있다. Date 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공한다. 자바스크립트에서 날짜와 시간을 나타내기 위한 값의 범위는 다음과 같다. 1. 연도(year) : 1900년(00) ~ 1999년(99) 2. 월(month) : 1월(0) ~ 12월(11) 3. 일(day) : 1일(1) ~ 31일(31) 4. 시(hours) : 0시(0) ~ 23시(23) 5. 분(minutes) : 0분(0) ~ 59분(59) 6. 초(seconds) : 0초(0) ~ 59초(59) 자바스크립트에서 월(month)을 나타낼 때는 1월이 0으로 ..
![[JS] 📚 Object 객체 메소드 종류 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FXf6xy%2FbtrfQn8Pc8X%2Fk84bmXbJtyoZCtVfr3P181%2Fimg.jpg)
[JS] 📚 Object 객체 메소드 종류 💯 정리
자바스크립트 객체 메소드 모든 자바스크립트 객체는 Object 객체와 Object.prototype 객체의 모든 프로퍼티와 메소드를 상속받습니다. 자주 사용되는 대표적인 객체 메소드는 다음과 같습니다. Object.create() 주어진 프로토타입(prototype)의 객체와 속성들을 갖고 있는 새 객체를 생성합니다. Object.assign() 하나 이상의 원본 객체들로부터 모든 열거가능한 속성들을 대상 객체로 복사합니다. var user ={ name : "mike", age : 30 } var cloneUser = user; // 객체주소 참조값이 복사된다. -> 서로 공유한다. 진정한 복사 X var cloneUser2 = Object.assign({}, user); // 빈객체는 초깃값, ..
![[JS] 📚 자바스크립트 Array 메소드 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyMN0S%2FbtrfHeqljb4%2FrSdfzSxbK1IjApV9twZeO0%2Fimg.jpg)
[JS] 📚 자바스크립트 Array 메소드 💯 총정리
자바스크립트 Array 메소드 배열 리터럴 const arr = [ 'zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine' ]; 배열 생성자 const arr = new Array(1, 2, 3); const arr2 = new Array(20); // 인수 하나만 넘겨줄때는 그 인수가 배열길이 arr2.length // 20 배열 Method ✏️ 메소드는 this(원본 배열)를 변경한다. 🔒 메소드는 this(원본 배열)를 변경하지 않는다. Array.isArray(arg) : boolean 정적 메소드 Array.isArray는 주어진 인수가 배열이면 true, 배열이 아니면 false를 반환한다. Arr..
![[JS] 📚 자바스크립트 String 메소드 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FuDZnl%2FbtrfRoEUYeh%2FyWX0pXNlPBYOi5AUT6zJgk%2Fimg.jpg)
[JS] 📚 자바스크립트 String 메소드 💯 총정리
자바스크립트 String 메소드 String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다. String Property String.length 문자열 내의 문자 갯수를 반환한다. String 객체는 length 프로퍼티를 소유하고 있으므로 유사 배열 객체이다. const str1 = 'Hello'; console.log(str1.length); // 5 String Method String 객체의 모든 메소드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값..
![[JS] 📚 자바스크립트 Math 메소드 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F1Yycs%2FbtrfMsatFo8%2FvO93koDZE2fFl7ZqrZ5KEk%2Fimg.jpg)
[JS] 📚 자바스크립트 Math 메소드 💯 총정리
자바스크립트 Math 메소드 Math 객체는 수학 상수와 함수를 위한 프로퍼티와 메소드를 제공하는 빌트인 객체이다. Math 객체는 생성자 함수가 아니다. 따라서 Math 객체는 정적(static) 프로퍼티와 메소드만을 제공한다. Math Method Math.abs(number) : number 인수의 절댓값 반환한다. Math.abs(-1); // 1 Math.abs('-1'); // 1 Math.abs(''); // 0 Math.abs([]); // 0 Math.abs(null); // 0 Math.abs(undefined);// NaN Math.round(number) : number 인수의 소수점 이하를 반올림한 정수를 반환한다. Math.round(1.4); // 1 Math.round..
![[JS] 📚 자바스크립트 Number 메소드 💯 총정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FUHW26%2FbtrfQFGSnjC%2FEImFS1m0gUxdAAfX541CZK%2Fimg.jpg)
[JS] 📚 자바스크립트 Number 메소드 💯 총정리
자바스크립트 Number 메소드 래퍼 객체(wrapper object) var str = "문자열"; // 리터럴 문자열 생성 var len = str.length; // 문자열 프로퍼티인 length 사용 위의 예제에서 생성한 문자열 리터럴 str은 객체가 아닌데도 length 프로퍼티를 사용할 수 있다. 프로그램이 문자열 리터럴 str의 프로퍼티를 참조하려고 하면, 자바스크립트는 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환해주기 때문이다. 이렇게 생성된 임시 객체는 String 객체의 메소드를 상속받아 프로퍼티를 참조하는 데 사용된다. 이후 프로퍼티의 참조가 끝나면 사용된 임시 객체는 자동으로 삭제된다. 이렇게 숫자, 문자열, 불리언 등 원시 타입의 프로퍼티에 접근하..
![[JS] 📚 비구조화(구조분해) 할당 💯 정리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzfVRD%2FbtrfBr3h0ER%2Fa1RtdQiKmbadKSlAmBGyBK%2Fimg.jpg)
[JS] 📚 비구조화(구조분해) 할당 💯 정리
정의 '비구조화 할당(destructuring assignment) 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식(expression)'입니다. 간단하게 정리하면 배열 [], 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법입니다. 기본 문법 - 배열 var [a1, a2, ...rest_a] = [1, 2, 3, 4, 5, 6, 7, 8, 9]; console.log(a1); // 1 console.log(a2); // 2 console.log(rest_a); // [3, 4, 5, 6, 7, 8, 9] 좌항이 호출될 변수명 집합, 우항이 할당할 값 입니다. 좌항의 각 요소에는 같은 index를 가지는 배열값이 할당됩니다. 또한 전개 연산..
📚 자바스크립트 IIFE (즉시실행 함수 표현식)
IIFE 이란? "Immediately Invoked Function Expression"의 줄임말로, 정의 되자마자 즉시 실행되는 함수 표현식을 말한다. // 아래 두 함수는 동일한 동작을 수행한다. var app = function() { console.log('함수 호출'); // "함수 호출" 출력 }; app(); // 즉시실행함수 IIFE (function() { console.log('함수 호출'); // "함수 호출" 출력 }()); 위의 두 함수는 모두 동일한 로직을 가지고 있다. IIFE는 전체 익명함수를 괄호로 감싸줌으로써 내부 코드가 선언문이 아니라 표현식인 것처럼 Parser를 속인다. 단, 익명함수이기 때문에 재사용은 적합하지 않다. 물론 기명으로도 가능은 하다. 하지만 보통 ..
📚 computed property 문법 (객체 key를 변수로)
자바스크립트 computed property 기존에는 자바스크립트 객체를 만들때 정해진 문자열 이름의 속성명을 사용해왔다. 하지만 이제 ES6에서는 computed property를 사용하여 객체를 선언하는 순간에 변수를 활용하여 동적인 프로퍼티명을 할당할 수 있게 되었다. 즉, computed property 문법은 자바스크립트 객체의 key 속성명을 표현식(변수, 함수 등)을 통해 지정하는 문법이다. var kk = "id"; var a = { name : "super", [kk] : 123 // computed property } var mm = "rank"; a[mm] = '#1'; console.log(a) // {name: "super", id: 123, rank: "#1"} 속성이 추가되었..
