언어 & 프레임워크/JavaScript

[JavsScript] self란 무엇인가?

안녕하세요! 정말 오랜만에 작성하는 포스팅인 것 같습니다. 최근 바쁜 일도 생기고 이런저런 개인 사정 때문에 블로그 관리에 소홀했던 것 같습니다.. 여름 시즌까지 꽤 바쁠 것 같은데 시간 쪼개서 글 자주 업로드해보도록 노력하겠습니다 :) 이번 포스팅에서는 자바스크립트의 self에 대해 알아보려고 합니다. this는 많이 접해보셨을텐데 self는 보신 분들도 있을 테고 이번이 처음이신 분들도 있을 수 있습니다. 그렇게 널리 사용되는 친구는 아니기 때문인데요..! 이번 포스팅을 통해 self가 무엇인지 한 번 알아보도록 합시다. 1. self란 무엇인가? w3c의 문서를 확인해보니, self는 읽기 전용 속성이며 WindowProxy로서의 window 자신을 반환합니다. 라고 합니다. 처음 접한 self인데..

[JavaScript] 전개 구문 활용 (Spread syntax)

이번 포스팅에서는 ES6 에 추가된 전개 구문(Spread syntax, ...) 활용 트릭을 몇 가지 소개하려고 한다. 구글링을 해보면 꽤 많은 트릭과 활용 방법들이 있는데, 그 중 간단하면서 자주 사용할 수 있는 내용으로 구성해보았으니 한 번 알아보도록 하자. Rest parameter 나머지 파라미터 Rest parameter는 전개 구문에 해당하는 내용은 아니지만 눈에 보이는 코드 상으로 유사하니 한 번 알아보려고 한다. Rest parameter는 이미 널리 사용하고 있을텐데, 함수의 매개변수 갯수가 정해져있지 않을 때 사용하게 된다. const sum = (acc, ...nums) => { for (let num of nums) { acc += num; } return acc; }; sum(0..

[JavaScript] 심볼 (Symbol)

안녕하세요 이번 포스팅에서는 ES6 (ECMAScript 2015)에 추가된 심볼(Symbol) 자료형에 대해 간단히 알아보도록 하겠습니다. 심볼은 자바스크립트의 원시(Primitive)타입으로 새롭게 추가되었습니다.원시타입은 객체도 아니고 메서드도 아닌 타입을 의미합니다. 기존에는string, number, boolean, null, undefined가 있었지만여기에 오늘 알아볼 symbol 타입이 추가되었습니다. 심볼 생성 방법은 심볼 Wrapper 함수를 호출하면 됩니다. const sym = Symbol() 심볼을 생성할 때 구분하기 위한 데이터를 추가하여 생성할 수도 있습니다. Symbol(value) 심볼타입은 신기하게도 같은 value를 인자로 주고 생성하더라도 값은 같지 않습니다.Symbo..

[JQuery] Ajax 동기 방식으로 사용하기

JQuery의 Ajax는 기본적으로 비동기 방식으로 동작합니다. 순차적으로 요청을 하고 싶을때는 옵션에 값을 하나 추가만 해주시면 됩니다. 옵션에 async 값을 false 로 지정한 후 사용하시면 됩니다. async 에 값을 지정하지 않을 경우 기본값으로 true가 사용됩니다.

[JavaScript] 비동기 함수(Async/Await)

안녕하세요 이전 포스팅에서는 콜백함수와 Promise 패턴에 대해 알아보았습니다. 이번 시간에는 비동기함수(Async function)에 대해 알아보도록 합시다! Node.js에서는 7.6버전부터 지원이 된다고 하니 알아두면 좋을것같습니다! 먼저 비동기함수에 대해 알아보기 전에 프라미스 패턴으로 구현한 간단한 예제를 봅시다. 위 예제는 이름이 비어있지 않으면 **님 반갑습니다! 를 출력하고만약 이름이 비어있으면 이름이 비어있다고 알려주는 예제입니다. 프라미스 패턴으로 구현되어있습니다. 프라미스 작동방식에 대해 이해하셨다면 금방 분석이 가능합니다. 아래 사진은 위 예제를 실행한 결과입니다. 이름이 'Lee' 이므로 정상적으로 출력이 됩니다. 만약 10행에서 'Lee' 대신 ''를 전달했다면 프라미스가 re..

[JavaScript] 프라미스(Promise) 패턴

안녕하세요 오늘 포스팅 주제는 자바스크립트의 Promise 패턴입니다! 지난 포스팅에서는 비동기 작업을 위해 콜백 함수를 사용한다고 했었습니다.하지만 콜백 함수는 가독성 등의 단점이 있기 때문에 여러 개선 방법이 있다고 설명했죠 그 중 하나가 프라미스(Promise) 패턴입니다! [예제는 Node.js 환경에서 테스트할 예정이구요 Node.js 뿐만 아니라 웹 브라우저에서 사용하셔도 동일합니다!] 먼저 설명 전 이전 시간에 진행했던 콜백 함수의 코드를 프라미스 패턴으로 동일하게 변경해보도록 하겠습니다! (콜백 함수사용 패턴) (프라미스 패턴) (프라미스패턴 코드 실행 결과, 콜백함수와 동일) 코드를 비교해보면 많이 바뀌었습니다. 하지만 기능은 동일하죠 더 어려워지고, 복잡해지고, 불편해보이실지는 몰라도 ..

[JavaScript] 콜백(Callback)함수와 비동기

안녕하세요 이번 포스팅에서는 자바스크립트의 콜백함수(Callback)패턴에 대해 알아보도록 하겠습니다! 콜백함수를 쓰는이유? 중 대표적인것은 "비동기" 처리를 위해서인데요 콜백함수 뿐만 아니라 프라미스(Promise), Async/Await(비동기함수)도 씁니다. 이번 포스팅은 콜백함수에 대해 알아보도록 하겠습니다! [예제는 Node.js 환경에서 테스트할 예정이구요 Node.js 뿐만 아니라 웹 브라우저에서 사용하셔도 동일합니다!] 자바스크립트의 변수에는 숫자, 문자, 객체 등등을 담을 수 있습니다.심지어 함수까지 저장이 가능합니다. 함수는 자바스크립트에서 일급 객체입니다. https://ko.wikipedia.org/wiki/%EC%9D%BC%EA%B8%89_%EA%B0%9D%EC%B2%B4 일급 객..