JavaScript17 [js] javascript 에서 async 와 await를 이용해 비동기 처리하기 하이 ...! 오늘은 javascript에서 async와 await를 이용해 비동기를 처리하는 방법을 공유드리려한다. 먼저 이전에 javascript에서 Promise 패턴을 이용해서 비동기 처리하는 것을 알려드린적 있다. 혹시 기억이 안나면 아래 링크를 보고 오자. https://devkingdom.tistory.com/218?category=841890 [JS] 자바스크립트의 비동기 처리 패턴 - 콜백(callback), 프로미스(promise) 자바스크립트에서 비동기 처리를 하는 것은 특정 코드의 로직이 끝날때까지 코드의 실행을 멈추지 않고 다음 코드를 바로 실행하는 것을 의미한다. 보통 응답과 요청 구조로 되어있는 통신에서 devkingdom.tistory.com 위의 링크를 읽을면 알 수 있듯이.. 2022. 2. 22. [js] javascript 에서 class 사용하기 오늘은 javascript의 class에 대해 정리해 보려 한다. class class는 javascript에서 ES6 이후 생긴 개념이다. 정리된 내용을 보시면 알겠지만 여러분들이 객체지향 언어에서 사용하시는 그 클래스다. 아래 예시를 보자. class User { constructor(name, age, gender) { this.name = name; this.age =age; this.gender = gender; } getName() { return this.name; } getAge() { return this.age; } getGender() { return this.gender; } } const user1 = new User('kang', 33, 'M'); console.log(user1.. 2022. 2. 20. [JS] javascript 의 prototype과 상속 오늘은 javascript에서 prototype과 상속에 대해 정리해 두려고 한다. prototype 이란? javascript에서는 객체를 복사하여 새로운 객체를 생성하는 prototype 기반의 언어이다. 프로토타입 기반의 언어란 객체 원형인 프로토타입을 이용해 새로운 객체를 만들어준다. 이렇게 생성된 객체는 또 다른 객체의 원형이 될 수도 있다. 이 프로토타입을 이용해서 javascript에서 상속을 사용해 객체지향 프로그래밍을 할 수가 있다. 일단 아래 예시를 보자. user 라는 객체를 생성해서 내부를 보면 Prototype이라는 것이 보인다. 실제로 hasOwnProperty (해당 키가 객체의 프로퍼티인지 아닌지 체크해주는 기능을 수행) 라는 것을 써보면 위처럼 true, false 로 결과.. 2022. 2. 20. [JS] javascript에서 시간 제어하기 javascript에서는 특정한 함수를 이용해 시간을 제어할 수 있다. 크게 두가지로 나뉘는데 하나는 특정 시간 뒤에 동작하게 하는 setTimeout이고, 하나는 특정 시간마다 동작하게 하는 setInterval 이다. 둘다 상황에 따라 시간을 제어할때 많이 쓰는 것이니 잘 익혀두도록 하자. setTimeout 아래 예시를 보자. 굉장히 간단한 예시이다. function func() { console.log('3초 지남'); } setTimeout(func, 3000); 이렇게 하면 func라는 함수가 3초 뒤에 실행된다. 여기서 숫자의 단위는 ms 이다(1000 ms당 1초) 아 ! 그리고 여기서 주의해야할게 저기 숫자에 0을 넣는다고해도 바로 실행되지는 않는다. ( 4ms 정도의 딜레이가 있다.) .. 2022. 2. 19. [JS] javascript Closure(클로저) 정리 javascript를 공부하시다 보면 처음으로 '아... javascript 쉽다고 들었는데... 어렵네... 하는 구간이 있다.' 바로 이 Closure를 마주치는 순간이 그 순간 중 하나가 아닐까 생각한다. 오늘은 이 Closure 에 대해 정리해두고자 하니, 잘 따라오시길 바란다. Closure "클로저는 함수와 그 함수가 선언 됐을 때의 렉시컬 환경과의 조합이다." MDN 에 나온 클로저의 정의이다. 이걸보고 오 ~ 클로저 별거 아니네 하면 ... 당신은 천재다. (대부분의 경우는 잘 모르실 것이라 예상을 하고 ..!) 클로저를 비교적 쉽게 설명드리도록 하겠다. 자바스크립트는 어휘적 환경( Lexical Environment)을 가진다. 이 말이 무슨말인지를 지금부터 잘 기억하길 바란다. 아래 예.. 2022. 2. 19. [JS] javascript에서 ... 을 이용하기 (Rest parameters, Spread syntax) 오늘은 javascript에서 ...을 이용해서 배열이나 객체를 간편하게 조작하는 것을 포스팅 해볼 예정이다. Rest parameters (나머지 매개변수) 한글로 말하면 나머지 매개변수라고 하는데, 먼저 Rest Parmeters를 알아보기 전에 Arguments부터 알아보자. ES6 이전에는 Arguments를 이용해서 가변의 입력 파라미터를 처리했었다. 아래 예시를 보자. function printName(name) { console.log(arguments.length); console.log(arguments[0]); console.log(arguments[1]); } printName('kang', 'kim'); Arguments를 이용해서 입력된 값들의 길이, 각각의 값들을 함수내에서 활용.. 2022. 2. 18. [JS] javascript의 구조 분해 할당 (destructuring assignment) 구문 오늘은 javascript의 구조 분해 할당 구문에 대해 정리해두고자 한다. 구조 분해 할당 (destructuring assignment) 구문 구조 분해 할당 구문은 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있게 하는 표현식이다. javascript에서 이를 이용하여 다양한 표현을 할수 있다. 배열에서의 구조 분해 할당 구문 활용 let users = ['kang', 'kim', 'park']; let [user0, user1, user2] = users; //let user0 = users[0]; //let user1 = users[1]; //let user2 = users[2]; console.log(user0); console.log(user1); console.log(user2.. 2022. 2. 17. [JS] javascript 에서 배열의 다양한 활용 방법 2 이전에 javascript에서 배열을 이용하는 방법에 대해 포스팅을 했었다. https://devkingdom.tistory.com/309 [JS] javascript에서 배열의 활용 javascript역시 여느 언어와 다르지 않게 배열을 사용할 수 있다. 배열 사용 방법 javascript에서 배열은 대괄호를 이용하여 사용한다. let arr = ['a','b','c','d']; 그런데 다른 언어와 조금 다른 점이 있는 devkingdom.tistory.com 오늘은 이전에 정리한 기본적인 기능이외의 다양한 기능에 대해 정리하고자 한다. slice slice는 입력된 파라미터 n부터 시작해서 m개 반환 하는 메서드이다. slice는 기존의 배열에 영향을 주지 않는다. let arr = [1,2,3,4,.. 2022. 2. 16. [JS] javascript에서 문자열을 처리하는 다양한 방법 저번 포스팅에서 javascript에서 숫자 관련된 처리를 정리해뒀었다. 오늘은 문자열을 처리하는 여러가지 방법에 대해 정리하고자 한다. 문자열 표현 방법 먼저 javascript에서는 세가지로 문자열을 표현할 수 있다. 작은 따옴표(''), 큰 따옴표(""), 백틱(``) 각각 비슷하지만 조금씩은 다르고, 어떨때 쓴는 지에 따라서 효과가 다르다. 예를 들어 html 의 특정 태그가 들어가면 큰 따옴표보다는 작은 따옴표가 나을것이다. 왜냐면 내부에 속성 값들이 큰따옴표로 묶여있기 때문이다. 그리고 영어 문장 같은 경우는 작은 따옴표로 줄여서 표현하는 경우가 많으니, 큰 따옴표가 나을 것이다. 그리고 백틱은 키보드에 보면 물결(~) 과 같이 있는 녀석인데 이 안에서 $ 를이용해서 계산식이나 변수를 표현할 .. 2022. 2. 13. 이전 1 2 다음
