차곡차곡 차곡차곡

객체 지향 프로그램 설계를 할 때 자주 발생하는 문제를 해결하기 위한 패턴 애플리테이션이 커짐에 따라서 코드 구조화가 중요해 집니다. 복잡한 코드를 유지 관리 가능하고 읽기 쉬우며 재사용 가능한 코드로 작성하기 위해서 디자인 패턴이 사용됩니다. 또한 소프트웨어를 설계할 때 특정한 맥락에서 자주 발생하는 문제를 처리하는 해결책에 공통점이 있습니다. 또한 패턴은 팀원 간의 공통된 언어를 만들어 의사 소통을 원활하게 만들어 주기도 합니다. 그러나 모든 문제를 디자인 패턴으로 해결하기보다 코드 베이스의 간결성이 생각해야 합니다. 디자인 패턴에 얽매이기 보다 그 패턴이 왜 효율적인지 이해하는 것이 좋습니다. Gang of Four 디자인 패턴 23가지의 디자인 패턴이 Creational, Structural, B..

0px Promise는 무엇인가? Promise의 state와 result Promise chaining return Promise Error handling Promise API async, await Promise는 무엇인가? 단어 그대로 약속(promise)입니다. 어떤 약속이냐면 어떠한 작업이 모두 끝나면 알려주겠다는 약속입니다. 데이터를 가져오려면 적절한 시간이 필요합니다. 만약에 거대한 데이터를 한 번에 받아오라는 요청을 한 뒤에 곧바로 데이터를 이용하는 코드로 넘어간다면 완전한 데이터를 알 수 없을 것입니다. 이를 위해서 모든 데이터를 받았다면 데이터를 넘겨주어 그 다음 작업을 할 수 있게 돕는 객체입니다. Promise 객체의 생성자 구문 let promise = new Promise(fu..

자바스크립트는 데이터 타입에 따라서 전달되는 방식이 다릅니다. 값에 의한 전달 (passed by value) Boolean, Null, Undefined, String, Number (원시 타입) - 데이터 타입이란 참조에 의한 전달 (passed by reference) Array, Function, Object (사실 전부 객체라고 할 수 있습니다) - 배열 (array) 함수(function) 객체(object) 원시 타입의 전달 (복사) 변수들을 등호(=)를 사용하여 다른 변수에 할당할 때 새로운 변수에 값을 복사(copy)합니다. let x = 7; let y = 'seven'; let number = x; let movie = y; console.log(x, y, number, movie);..

class class는 객체를 만드는 공장이라고 할 수 있습니다. ECMAScript 6부터 지원하기 시작했기 때문에 이전까지는 비슷한 작동을 하는 네가지 방식을 사용해야 했습니다. Instantiation Patterns Functional / Functional Shared / Prototypal / Pseudoclassical 이 중에서 Pseudoclassical 방식을 살펴 보겠습니다. //menu라는 단일 프로퍼티를 생성하는 생성자 함수 function Order(menu) { this.menu = menu; } //prototype에 할당되는 message메서드 Order.prototype.message = function() { console.log(this.menu + "가 주문되었습니다..

Prototype prototype은 javascript의 기반이라고 할 정도로 중요합니다. 그래서 프로토타입 기반 언어 (Prototype based language) 라고 불리웁니다. 만약에 생성자안에서 메서드를 만들어 new키워드를 사용한다면 각각의 생성되는 객체에 모두 메서드가 생성되어 메서드를 사용하지 않더라도 각각의 객체안에 메서드를 포함하고 있어야합니다. 이는 객체 공간을 비효율적으로 사용할 뿐만아니라 각각의 메서드를 수정하고 싶을 경우에 하나씩 모두 새로 지정해주어야한다는 번거로움이 있습니다. 그래서 공통적으로 사용할 수 있는 메서드를 prototype을 통해서 만들어줍니다. function Order(menu, count){ this.menu = menu; this.count = coun..

Execution Context 실행 컨텍스트는 실행환경입니다. 어떤 실행환경일까요? 코드가 실행되기 위한 정보를 담고있는 환경입니다. 두가지의 실행환경이 있습니다. Global Context / Functional Context 전역 컨텍스트 (Global Context) 처음 코드를 실행시키는 순간에 생기는 컨텍스트로서 모든 것을 관리하여 페이지가 종료될때 사라집니다. 함수 컨텍스트 (Functional Context) 함수를 호출할 때 생성되고, 함수의 모든 동작이 종료되면 사라집니다. (closure는 예외) 컨텍스트의 정리 1. 코드를 실행하면 전역 컨텍스트가 생성되고, 함수를 호출할 때마다 함수 컨텍스트가 생성됩니다. 2. 컨텍스트가 생성될때 안에는 변수 객체 (arguments, variab..

하나의 프로그램은 다양한 모듈이 합쳐져서 만들어집니다. 우리보다 잘하는 사람들이 만들어 놓은 검증된 모듈을 사용하여 시간을 단축시킴과 동시에 안정성을 확보합니다. NPM(Node Package Manager) npm은 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어입니다. 필요한 대부분의 모듈들을 NPM에서 다운로드하면 됩니다. npm이라는 키워드를 하나의 명령어처럼 사용하기도 합니다. 만약에 모르는 사람이 만든 프로젝트를 실행시켜야 한다면 어떤 모듈이 있는지 알아야 합니다. 이때 package.json이 프로그램을 실행시키기 위해 필요한 모듈이 무엇인지, 프로그램을 실행시키는 방법, 테스트방법 등을 알려줍니다. 다만 필요한 모듈의 목록만 있을 뿐입니다. 실제 모듈들은 node_modu..

Runtime 런타임이란 어떤 프로그래밍 언어가 동작할 수 있는 프로그램이라고 할 수 있습니다. 자바스크립트를 이용해서 코드를 만들고 실행되는 곳이 바로 런타임이고, 자바 스크립트 런타임은 웹 브라우저입니다. 이전에는 자바스크립트 런타임이 브라우저 밖에 없었지만 이제 Node.js라는 새로운 자바스크립트 런타임이 나왔습니다. 이로인해 자바스크립트를 이용해서 웹페이지 뿐만 아니라 서버와 같은 다른 프로그램도 만들 수 있습니다. 자바스크립트 코드를 브라우저에서 실행시킬 수도 있고, Node.js에서 실행시킬 수도 있습니다. 자바스크립트 코드를 HTML script 태그 안에 작성한다면 브라우저에서 동작하고, 터미널에서 node 명령어를 입력하면 Node.js 환경에서 실행됩니다. //node $ node r..

this this 키워드는 어떠한 객체를 가르킵니다. 객체를 가르키는 기준을 무엇일까요? 5 Patterns of Binding 'this' Global scope Function Invocation Method Invocation Construction mode [call, apply, bind] Global scope: window function 호출: window //Global & function invocation var name = 'Global Variable';// === window.name console.log(this.name); function foo() { console.log(this.name);// this === window } foo(); function outer() {..

Rest parameter 나머지 매개변수는 정해지지 않은 수(an indefinite number, 부정수)를 배열로 나타냅니다. function restFuc(a, b, ...theArgs) { // ... } 함수의 마지막 파라미터 앞에 ... 을 붙여서 모든 나머지 인수를 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터"가 될 수 있습니다. function restFuc(a, b, ...theArgs) { console.log("one", a) console.log("two", b) console.log("rest", theArgs) } restFnc(1, 2, 3, 4, 5) //console //one, 1 //two, 2 //rest, [3, 4, 5] rest 파라미터는 Array..