Javascript11 자바스크립트 디자인패턴 - 빌더 패턴(Builder pattern) 빌더 패턴(Builder pattern)이란? 빌더라는 이름처럼 객체를 생성하는 것에 관한 디자인 패턴이다. 객체를 만들어 사용하다 보면 간혹 객체 생성자가 너무 길어지거나 복잡해지는 경우가 생긴다. 이런 경우 빌더 패턴은 객체의 생성 과정을 분리해 순차적이고 직관적으로 만든다. 보너스로 객체를 Immutable하게 유지할 수도 있다. 특징 👍 너무 길어지는 생성자를 피할 수 있음. 👍 코드 가독성의 높임. 👍 객체의 Immutability를 유지할 수 있음. 👎 코드가 길어짐. 문제 상황 const user1 = new User('Andy', 10, null, 30); const user2 = new User('June', 11, 150, null); const user3 = new User('Gary.. 2021. 5. 18. 함수형 프로그래밍(Functional Programming) # 함수형 프로그래밍이란 무엇일까? Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. 함수형 프로그래밍(Functional programming, FP)은 pure function으로 프로세스를 구현함으로써 공유된 state나 mutable data, side-effect를 피하는 프로그래밍 패러다임이다. 주로 함수형 프로그래밍은 Declarative(선언적)라고 하고, 그에 반대되는 개념을 Imperative(명령형)이라고 한다. Declarative Prog.. 2020. 6. 28. JavaScript Async/Await (비동기 함수와 실행 순서) Promise → then → promise → then → ... 계속 반복해서 사용하면 난잡해짐! ⇒ 이 문제를 해결하고자 등장한게 Async/Await! (Syntactic sugar) The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains. (비동기적인 코드를 동기적으로 보이도록! 가독성 높아짐) # Async async function name([param[, param[, ...param]]]) { statements } 이런식으로 앞에 async 키워드를 사.. 2020. 6. 27. JavaScript의 Call, Apply, Bind ☝ 우선 call, apply, bind를 위해서는 this에 대한 이해가 선행되어야 함. ☝ 일반적으로 JavaScript의 this는 해당 함수를 호출한 객체를 의미한다. (화살표함수에서 제외하고!) 이게 무슨말이야?? 함수를 호출한 객체? 🤦♀️... const toy = { name: 'forky', favorite: 'trash', introduce(){ console.log(`My name is ${this.name}, I like ${this.favorite}`); } } toy.introduce(); // My name is forky, I like trash 여기서 introduce를 호출한 주체는 누구일까? ⇒ 바로 toy!!!가 된다. 이건 어렵지 않게 이해할 수 있다. 그렇다면 조.. 2020. 6. 24. 객체 내 key 또는 value로 배열 만들기 const fruit = { fruit1: "apple", fruit2: "banana", fruit3: "kiwi", fruit4: "grape" } 위와 같은 일반적인 객체나 유사배열 객체는 배열에서만 사용할 수 있는 forEach, map 등의 함수를 사용할 수 없다. (유사배열객체는 []로 둘러싸여있지만 배열은 아니므로 배열의 함수를 이용할 수 없다. Array.isArray(obj)로 확인할 수 있다.) 이를 해결할 여러가지 방법들이 있지만 ES8에서 등장한 문법은 이를 아주 간단하게 해결해준다. Object.keys 객체의 key들만 모아 배열을 반환한다. console.log(Object.keys(fruit)); // result: [ 'fruit1', 'fruit2', 'fruit3', '.. 2020. 4. 6. JavaScript 코드 꿀팁들 얼마 전 유튜브에서 'JavaScript Pro Tips - Code This, NOT That' 영상을 보다가 새로 알게된 신기한 것들이 있어 정리하게 되었다. 1. console.log 출력하는 방법 console.log를 이용해 여러 가지 것들을 출력하다보면 어디서 출력한 것인지 체크하기 위해서, const fruit1 = "apple"; const fruit2 = "apple"; const fruit3 = "apple"; console.log('fruit1', fruit1); console.log('fruit2', fruit2); console.log('fruit3', fruit3); 이런 식으로 이름을 명시해주고 적을 때가 종종 있다. 여간 번거로운 작업이 아니다. 이때 사용할 수 있는 간편한 .. 2020. 4. 5. ES6 문법 정리 ES6문법을 사용하면 코드를 더 깔끔하고 직관적으로 표현할 수 있다. let + const var: function scope 함수 scope이기 때문에 함수 안에서 선언된 변수는 특별한 경우가 아니라면 함수 밖에서 접근할 수 없다. 반면 if문이나 while문 등 안에서 선언된 변수를 밖에서 접근하는 것이 가능하다. const, let: block scope 함수 scope보다 더 넓은 범위를 포괄한다. 일반적으로 {}으로 둘러쌓인 부분을 말하며, if문이나 while문 안에서 선언한 변수들도 밖에서 접근할 수 없다. Destructing 객체를 함수의 파라미터로 받아와 사용하는 경우에 편리한 방법이다. 이전에는 일일히 객체에 있는 속성들을 하나하나 변수로 다시 선언해줬었다. const obj = { .. 2020. 4. 1. [에러로그] post request status 가 canceled 인 경우 Error 그림과 같은 형태의 form을 만들고 post request를 보내는 작업을 하고있었는데, postman에서는 통신이 잘 되는 것을 확인했지만 크롬에서는 계속해서 response를 받지 못했다. 왜그런가 이유를 살펴보다가 크롬 개발자 도구의 Network탭에서 보니 status가 canceled로 표시되고 있었다. Solution 이유는 내가 태그 안에서 만든 'register' 버튼 때문이었다. 으로 버튼을 만들 경우 바로 페이지가 reload되기 때문에 을 만들어 놓고 onclick속성으로 서버에 post request를 보내고 있었는데 이 부분에서 문제가 있었다. 안의 은 default속성으로 submit 타입을 가진다. (참고링크) 결과적으로 버튼을 누를때마다 post request를 .. 2020. 3. 31. this 키워드 (this keyword in JavaScript) 최근 자바스크립트에 대해 공부하며 이해한 내용을 바탕으로 작성한 것이며, 계속해서 새로 알게되는 내용이 있다면 추가할 예정입니다. (* "use strict"모드에서는 다른 방식으로 동작하며 이를 사용하지 않는 경우를 가정하고 글을 작성했음을 밝힙니다.) this란 무엇일까? Mozilla MDN사이트에 의하면 this는 다음과 같다. In most cases, the value of this is determined by how a function is called (runtime binding). 함수가 어떻게 불리는지에 따라서 this의 값이 결정된다고 한다. this 키워드는 해당 함수를 호출하는 객체를 가리키기 위해 사용된다. 함수를 호출하는 객체? 무슨 말일까? 아래의 코드를 살펴보자. var.. 2020. 3. 23. 이전 1 2 다음
