Dev
-
-
Factory Method PatternDev 2021. 5. 11. 02:04
팩토리 메소드 패턴에 대해서 알아보겠습니다. Factory Method Pattern 이란? 인터페이스를 어떻게 구현할지에 대한 결정 없이, 새로운 인스턴스를 생성할 수 있게 하는 방법입니다. 쉽게 말해 factory class 에서 생성할 클래스의 정보를 구분할 수 있는 타입이나 문자열등의 인자를 받아서, 스위치나 조건문 등등으로 분기해 클래스를 생성하여 반환합니다. 그래서 객체를 생성할때 해당 클래스의 내부를 몰라도 클래스 생성이 가능합니다. 또한 메인에서 직접적으로 객체를 생성하거나 하지 않고, 서브 클래스에 위임하여 생성하기 때문에 보다 안전하고, 관련된 객체를 한곳에서 관리하기 때문에 확장성있는 코드 관리가 가능합니다. 예시 책 자바스크립트 디자인 패턴 - Factory Method Patter..
-
Typescript에서 Builder Pattern 사용하기Dev 2021. 5. 10. 01:25
들어가며 개발을 하면서 빌더 패턴에 대해서 정확히 알지 못한 상태로 나도 모르게 필더패턴 비스무리하게 사용중이었는데, 자바스크립트 디자인 패턴 책을 읽으면서 자세히 알게 되어 관심을 가지고 찾아보게 되었습니다. Builder Pattern이란? - 클래스의 구축을 단순화 하고 사용자가 전문지식 없이 클래스를 구축할 때 사용하는 패턴. - 생성 패턴(인스턴스를 만드는 절차를 추상화 하는 패턴)의 일종이다. 언제 쓰는가? 예를들어, 함수가 여러개의 인자를 받고 있고, 중간 중간에 null값을 넘겨줘야하는 인자가 있을 경우 complicatedMethod('HELLO', true, 3.141592, null, null, 'BYE'); 다음과 같이 쓰는 경우가 있을 수 있습니다. 해당 코드를 살펴보면 1. 함수..
-
[JS] Node.js v14의 새로운 JS Feature!Dev/JS 2020. 5. 13. 01:09
들어가기 전에 New JS Features in Node.js v14.0에서 정보를 얻어 번역하였습니다. 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. I got information from here and translated it. 두둥등장 Node.js v14.0 Node.js v14.0 버전이 이번주에 출시 되어서 Current 버전으로 릴리즈 되었습니다! 그말인 즉슨! 2020년 10월, 5개월 뒤면 LTS 버전으로 옮겨질 것이고 일반적으로 사용할 수 있을 것 입니다. Node.js v14.0 버전은 최신 JS 기능을 지원하는 V8 8.1을 사용하도록 업데이트 되었습니다. 그래서 이 포스팅에서는 업데이트된 기능들을 살펴보도록 하겠습니다. Optional ..
-
[JS] useEffect에 대한 짧은 가이드Dev/JS 2019. 8. 28. 22:31
들어가기 전에 이 글은 useEffect API에 대해 어느정도 익숙한 독자를 위한 글입니다. 그리고 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. A Complete Guide to useEffect - Dan Abramov 에서 정보를 얻어 번역하였습니다. I got information from here and translated it. 본문 우리는 Hooks를 사용하여 컴포넌트들을 작성하고 매우 만족합니다! 왜냐면 매우 편리하기 때문이죠 !! 하지만, useEffect를 사용하면서 뭔가 조각들이 서로 잘 어울리지 않고 놓치고 있는 느낌이 들지 않나요 ? 예를 들어 라이프 사이클과 관련된 그런것들 말이에요. 아래 질문들을 자신에게 한번 물어보세요. compo..
-
[JS] 간단한 Javascript 문제Dev/JS 2019. 8. 28. 22:22
Facebook Javascript 커뮤니티에 다음과 같은 문제가 올라왔습니다! 이 그룹에는 Javscript에 대한 흥미로운 글이 많으니 가입하시는 것을 추천드립니당~ const adverb = "Just" name = 'Javascript' const adverb_result = delete adverb const name_result = delete name console.log(adverb_result) // ? console.log(name_result) // ?정답은 아래와 같습니다! console.log(adverb_result) // false console.log(name_result) // truedelete 연산자의 특성을 알면 쉬운 문제인데요, delete 연산자는 객..
-
[JS]Shallow CompareDev/JS 2018. 7. 3. 10:23
Shallow Compare import import shallowCompare from 'react-addons-shallow-compare'; //ES6 var shallowCompare = require("react-addons-shallow-compare"); //ES5 Overview React.PureComponent가 소개되기 전에, React와 ES6에서는 shallowCompare이 PureRenderMixin과 함수적으로 동일한 기능을 담당했었습니다. 만약 React 컴포넌트의 render 함수가 "pure"( 동일한 state와 props로 동일한 결과를 렌더링할 때를 말합니다.) 이면, 이 helper함수를 성능향상에 사용할 수 있습니다. Example : export class S..
-
[React.js]Derived State를 언제쓸까?Dev/JS 2018. 7. 2. 14:35
Derived State를 언제 쓸까? getDerivedStateFromProps 는 하나의 목적을 위해서만 존재합니다. 이것은 컴포넌트가 내부 state를 변화가 일어난 props값으로 업데이트 할 수 있게 해줍니다.리액트 블로그의 이전 포스트에서 몇개의 예제를 올려놓았습니다. 예를 들어 현재 스크롤 위치를 오프셋을 기반으로 기록하거나, 외부 데이터들을 props를 통해 로딩할 때가 있습니다. 일반적인 룰에 따르면, derived state는 적게 사용되야 합니다. derived state를 사용하여 마주할 수 있었던 거의 모든 문제 상황들은 두가지 방법을 통해서 줄일 수 있습니다. 먼저, 1. props로 오는 값을 무조건 state로 업데이트 하는 방법, 혹은 2. state와 props가 매치되..