본문 바로가기
728x90

Web

[JavaScript] 동기 / 비동기처리와 콜백함수란 무엇인가? 동기(Synchronous) / 비동기(Asynchronous) 자바스크립트는 코드 한 줄씩 순차적으로 실행되는 동기(Synchronous)처리 방식입니다. 자바스크립트를 실행하는 웹브라우저는 스텍(Stack)이라는 코드 실행 공간이 있습니다. 그리고 그 곳에서 코드를 한줄한줄 차례로 실행합니다. 자바스크립트 뿐만 아니라 대부분의 프로그래밍 언어들이 이러한 특징을 가지고 있습니다. console.log(1); console.log(2); console.log(3); -------------------- 결과 1 2 3 그리고 자바스크립트는 비동기(Asynchronous)처리와 유사한 방식을 사용할 수도 있습니다. 예를들어 특정 위치의 코드를 1초 지연한 뒤 코드를 실행하고 싶을 때가 있습니다. 그래서 아.. 더보기
[JavaScript] import / export 를 이용한 모듈 개발 일반적으로 자바스크립트 코드가 길어지면 다른 파일로 쪼개어 자바스크립트 코드만 따로 작성하여 불러옵니다. ES6 부터 import / export를 사용하면 원하는 변수와 함수, class만 따로 다른 파일로 보낼 수 있습니다. 하지만, import해온 변수와 함수는 사용이 가능하지만 수정은 불가능합니다. 지금까지의 웹 코딩에서는 위와 같은 방식으로 별도의 파일에서 자바스크립트 코드를 작성하고 원하는 곳에서 위 코드를 작성하여 자바스크립트를 불러와 사용했습니다. 그리고 이와 유사하지만 다르게 import / export를 사용하여 불러올 수 있습니다. /* library.js */ var a = 10; export default a; ---------- /* index.html */ 위 코드는 libra.. 더보기
[JavaScript] 배열 디스트럭처링(Destructuring) - 구조 분해 할당 배열이나 오브젝트에 있는 자료들을 변수로 꺼내고 싶으면 어떻게 할까요? var a = arr[0]; 이런식으로 하나하나 뽑아오면 되겠죠. 하지만, 한 두개면 모르겠는데 다수의 값을 변수로 만들려면 위와 같은 방법으로는 코드가 매우 길어집니다. 그럴 때 Destructuring 문법을 사용하면 변수를 쉽게 만들 수 있습니다. 배열 방식 var arr = [2,3,4]; // 이 arr안에 있는 2,3,4를 각각 새로운 변수에 담아주고 싶을 경우, // 기본 방법 var a = arr[0]; var b = arr[1]; var c = arr[2]; // destructuring 방법 var [a, b, c] = [2, 3, 4]; 위와같이 변수명에도 배열형식으로 지정하여 각 위치에 맞게 값을 담아줄 수 있습.. 더보기
[JavaScript] getter와 setter 원본 데이터는 불변(Immutable)해야 한다는 원리로 데이터의 무결성 보존을 위해 사용되는 getter와 setter. 데이터를 수정하거나 출력할 때, 직접 원본 데이터를 만지는것이 아니라 함수를 사용하여 간접적으로 다루는것이 요즘 코딩의 추세이며 그 원리에 합치되는 코딩 기술 입니다. 아래 오브젝트 데이터를 만들어 보겠습니다. var People = { name : 'kim', age : 30 } console.log(People.age + 1); // 31 위 오브젝트에서 내년의 나이를 출력하고 싶으면 보통 어떻게 하게 될까요? people.age + 1 을 하면 됩니다. 하지만, 데이터의 무결성을 보존하기 위해서는 함수를 따로 제작하여 사용합니다. var People = { name : 'kim.. 더보기
[JavaScript] class를 복사하는 extends / super class, prototype, constructor를 지나 이제 자바스크립트 객체지향 문법의 끝판왕인 extends를 배워보도록 합시다. class를 상속한 class를 만들 때 사용하는 extends 한 class와 유사한 class를 하나 더 만들고 싶은 경우가 있는데, 이 때 extends라는 문법을 사용할 수 있습니다. extends를 사용하여 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 있습니다. 즉, class에 class를 상속해서 만들 수 있게 도와주는 문법 입니다. 그리고 extends된 오브젝트들은 super를 사용해서 값들을 받아와야 합니다. super()는 'extends로 상속된 부모 class의 constructor()'를 의미합니다. cla.. 더보기
[JavaScript] ES5/ES6 방식으로 구현하는 상속 기능 ES5 방식 prototype, this, class와 같은 방식 외에 ES5 출시 때 나온 Object.create()라는 문법이 있습니다. 상속을 이용해서 오브젝트를 만들고 싶다면 이 문법을 사용하면 쉽게 구현해낼 수 있습니다. 하지만 class문법에 밀려서 인지도는 낮습니다. var Parent = { name : 'Kim', age : 50 }; var Child = Object.create(Parent); // es5에 나온 상속된 오브젝트 만드는 방법 console.log(Child.age); // 50 위 예제에서 child를 직접 호출하면 아무런 값도 가지고 있지 않습니다. 하지만, prototype은 parent가 되어있기에 prototype으로 사용할 수 있습니다. Q. child의 a.. 더보기
[JavaScript] 상속과 Prototype Prototype은 생성자(Construtcor)외의 상속(Inheritance)을 구현할 수 있는 또 하나의 문법 입니다. 생성자(Constructor)가 가지고 있던 속성들을 그대로 물려받아 오브젝트를 만들기 때문에 상속이라고 부르며 Constructor를 부모, 생성된 오브젝트를 자식이라고 합니다. Prototype을 직역하면 유전자라는 뜻이 됩니다. 그리고 Constructor를 만들면 Prototype이라는 공간이 자동으로 생깁니다. Prototype에 값을 추가하게 되면 모든 자식들이 물려받게 됩니다. function Fc(name){ // Constructor, 상속관계에서 부모 this.name = name; this.age = 15; this.say = function(){ console.. 더보기
[JavaScript] 생성자(Constructor) 만들기 생성자라고도 불리는 Constructor는 오브젝트의 생성과 초기화를 담당합니다. 새로운 오브젝트를 생성할 때 호출되기때문에 생성자(Constructor)라는 이름이 붙었습니다. Constructor는 함수와 같은 형태를 이루고 있지만 값을 반환하지 않아 함수로 구분될 수 없습니다. 또한 Constructor는 new 라는 키워드와 함께 사용되며 이름의 첫 글자는 대문자를 사용합니다. var arr = []; var arr = new Array(); Constructor를 어떤 상황에서 쓸 수 있는지 간단한 예제를통해 알아봅시다. ex) 똑같은 오브젝트를 독립된 개체로 복사하고 싶을 때 잘못된 방법 var user = { name : 'Kim'}; var user2 = user; user.name = '.. 더보기
728x90

티스토리툴바