본문 바로가기

Javascript22

Redux redux는 애플리케이션 상태를 관리하기 위한 오픈 소스 javascript 라이브러리이다. 특히 react와 함께 사용 시에 큰 효과를 낸다. 그동안 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았으나 redux를 통해 상태 변경 로직을 컴포넌트로부터 분리하여 따로 관리 함으로써 표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있게 되었다. redux는 위와 같이 store 안에 state, 그리고 4개의 함수로 구성이 되어있고 각 선에 따라 관계를 갖고 redux가 실행된다. action action은 store내의 state값을 변경, 삭제하기 위한 객체이다. //action 객체 { type: 'color', // type은 반드시 명시해야 한다. value.. 2021. 3. 1.
javascript async / await 비동기를 제어하기 위한 방법으로 promise에 대하여 배웠다. es8이후 async와 await이 도입되었는데 이는 후속처리 등으로 인한 프로미스 체이닝의 복잡한 로직을 개선하여 간단하게 표현할 수 있게 되었다. function reo() { return new Promise((resolve, reject) => { let age = 28; resolve(age); }); } async function foo() { const x = await reo(); console.log(x) } foo() // 28 함수 선언 시 앞에 async를 붙여 비동기를 제어할 것을 명시해준다. 이제 async함수 안에서 비동기 함수를 실행시킬 때 await를 붙여 줌으로써 비동기의 순서를 제어해준다. const pri.. 2021. 2. 10.
javascript Promise 전에 비동기에 대하여 배웠다. 비동기는 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행하게 된다. 그렇다면 이러한 비동기를 제어하여 순서를 부여하기 위해서 어떻게 해야 할까? const prinNum = (num) => { setTimeout( () => { console.log(num) }, Math.floor(Math.random() * 100) + 1 ) } const printAll = () => { prinNum(1) prinNum(2) prinNum(3) } printAll() printAll() printAll() // 123 231 132 숫자를 받아 랜덤 하게 비동기로 실행이 되어 숫자를 출력해주는 함수이다. 이를 실행하면 Math.random()에 의.. 2021. 2. 4.
javascript Object Oriented Programming (js-class) subclassing 패턴 중 pseudoclassical 방식에 대하여 알아보았다. 하지만 es6이후 class 문법이 추가되면서 전의 복잡한 방식을 하지 않아도 간단히 객체지향 프로그래밍을 구현할 수 있다. class function Human(name) { this.name = name }; Human.prototype.sleep = function () { return `${this.name} zzzz` }; function Student(name) { Human.call(this,name) // call 메서드로 this를 전달 }; Student.prototype = Object.create(Human.prototype) // prototype 연결 Student.prototype.constr.. 2021. 1. 21.
javascript Object Oriented Programming (js-prototype) 객체지향에 대하여 공부했다. 이제 javascript의 객체지향에 대해서 알아보자 es6전 javascript에는 class가 존재하지 않았다. class가 존재하지 않기 때문에 상속 기능 또한 구현하지 못했다. 그래서 js에 존재하는 prototype을 이용해 객체지향을 흉내 내어 구현하였다. 이처럼 prototype을 이용하여 객체지향을 구현하는 과정을 subclassing 패턴이라 하고 패턴들 중 pseudoclassical 한 패턴에 대하여 설명하겠다. pseudoclassical 패턴에 대하여 알아보기 전 짚어 봐야 할 개념이 있는데 prototype과 constructor이다. 1. prototype 프로토타입은 객체와 객체 사이를 연결하는 데 있어서 특수한 역할을 하는 객체이다. javasc.. 2021. 1. 19.
javascript Object Oriented Programming 현재의 고급언어는 두 가지 종류로 나눌 수 있다. (절차 지향 언어, 객체 지향 언어) 절차 지향 언어에는 다양한 게 있지만 대표적으로 C언어가 있다. 절차 지향이란 위에서 아래로 순차적으로 처리하는 것을 말하는데 컴퓨터의 작업 처리 방식과 유사하기에 시간 복잡도 면에서 객체 지향 언어에 비해 강력하다. 그러나 그만큼 단점도 확실하다. 코드를 이해하기 어렵고 변경, 확장 등 유지 보수 측면에서 어렵다. 이러한 이유로 객체 지향 언어가 탄생했다. 객체지향언어는 필요한 부분을 기능별로 묶어 모듈화함으로써 코드의 재활용성을 키웠다. 이는 중복을 줄여 프로그램의 유지 보수 및 코드를 이해하는데 큰 역할을 했다. Object Oriented Programming 객체지향은 객체를 이해하는 데서 시작한다. 객체지향.. 2021. 1. 17.
javascript this -명백한 바인딩(call, apply, bind) 호출 마지막으로 명백한 바인딩(call, apply, bind) 호출이다. call, apply, bind의 메서드는 명시적으로 this를 지정하고 싶을 때 사용한다. 첫 번째 인자가 항상 this값이 된다. call, apply와 bind는 this 값을 지정한다는 점에서는 같지만 call, apply의 경우는 this의 값을 지정하여 호출하지만 bind는 호출은 하지 않고 this값을 지정하여 함수만 반환한다. call, apply function printProfile(name, age) { return `${this.type} ${name} 나이:${age}` } const developer = { type: '개발자', feature: '언어' } const artist = { type: '아티스트'.. 2021. 1. 16.
javascript this-Function 호출, Method 호출, 생성자 호출 this는 함수 실행 시 호출 방법에 의해 결정되는 특별한 객체이다. 함수 실행 시 결정되므로, 실행되는 맥락에 따라 this는 다르게 결정된다. 크게 4가지로 설명할 수 있다. Function 호출, Method 호출, new 키워드를 이용한 생성자 호출, 명백한 바인딩(call, apply, bind) 호출 1. Function 호출 var name = 'reo'; function foo () { console.log(this.name); // 'reo' } foo(); 함수 호출 시에 this는 브라우저에서 window 객체를 가리킨다. 하지만 함수 호출 방식에서 애초에 this를 사용하지 않는 것을 권장한다. 경우에 따라 바인딩이 달라지기 때문이다. (브라우저에서는 window를 node.js에서.. 2021. 1. 16.
javascript 화살표 함수 ES6에서 새로 도입한 화살표 함수(arrow function)에 대하여 알아보자 MDN 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩하지 않습니다. 함수 표현식 const add = function (x, y) { return x + y } 화살표 함수 const add = (x, y) => { return x + y } 화살표 함수는 function 키워드를 화살표로 축약해서 표시할 수 있다. 함수에 return 문만 있는 경우, 화살표 함수는 return을 생략할 수 있다. 또한 return을 생략할 시에 ( )를 사용할 수 있지만 { }는 사용해서는 안된.. 2021. 1. 16.

티스토리툴바