지식 창고

추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(Builder Pattern)이다. 개인적으로 빌더 패턴은 앞의 두 패턴보다 자주 사용하고 있는데, 오늘은 design-patterns-JS의 예제를 가지고 설명을 해보도록 하겠다. 빌더 패턴은 무언가를 뭔가를 조합해주는 패턴이라 이해하면 쉽다. 웹에서 많이 사용하는 Request Query를 예를 들어보도록 하자. Request(리퀘스트)는 크게 URL, METHOD(GET, POST, PUT, DELETE), 그리고 데이터 부분으로 이루어져 있다. 이제 우리는 어떤 리퀘스트 정보를 담고 있는 클래스를 만들어 보도록 하자. class Request { constructor(url, method, data) { this.url = url..

지난 포스트에서 다뤘던 추상 팩토리 패턴(Abstract Factory Pattern)에 이어, 이번엔 팩토리 메서드 패턴(Factory Method Pattern)에 대해 정리해 보도록 하자. 이전 포스트의 "마지막에 라떼의 종류가 여러 가지가 된다면 어떻게 하면 좋을까?"라는 질문을 던졌었는데, 이 문제를 해결하기 위해 팩토리 메서드 패턴을 이용하면 좋다. 거두절미하고 예제 코드를 보도록 하자. class CafeLatte { constructor() { this.price = 3000; } getPrice() { return this.price; } } let latte = new CafeLatte(); latte.getPrice(); // 3000 latte.gerPrice(); 함수는 특정 인스..

디자인 패턴(Design Pattern)은 학부생 때 열심히 공부했었는데, 지금은 딱히 패턴을 생각하며 코드를 짜고 있는 것 같진 않다. 필요한 부분에 적절하게 기능별로 모으고, 추상화를 하다 보면 자연스럽게 패턴이 되기 때문이다. 하지만 다른 사람에게 설명하거나 표준화(?)된 코드를 더 잘 짜기 위해선 다시 한번 복습해보면 좋을 것 같다는 생각도 든다. 따라서 최근 GoF의 디자인 패턴을 JavaScript로 이식한 깃허브 저장소를 보고 있다. ES5와 ES6로 잘 구현을 해놨지만 다소 설명이 충분해 보이지 않았다. 이번 기회에 한 땀 한 땀 따라가 보면서 정리해 보도록 하자. 디자인 패턴 책이나 구현 방법에 대한 글을 찾아보면, 클래스 다이어그램이나 코드 위주로 설명이 되어있다. 물론 다이어그램과 코..

Google에서 만든 V8엔진이 JavaScript의 성능을 비약적으로 개선되면서, JS를 이용해 서버도 돌릴 수 있지 않을까 하는 의문이 시작됐고 Nodejs가 탄생하게 되었다. 최근에는 Nodejs를 이용해서 프로덕트를 구축하는 기업도 많이 늘어나는 추세이며, 앞으로 더욱 발전할 것이라 기대된다. 보통 노드를 이용해서 서버를 구축한다고하면, 기본(default)으로 제공되는 모듈을 이용해서 만드는 사람은 거의 없다고 봐도 무방하다. 노드 진영에서 대표적으로 많이 사용하는 프레임워크로는 Expressjs가 있다. 미들웨어(Middleware) 패턴을 이용해서 빠르게 서버를 구축할 수 있으며, 미니멀(Minimal)하고 러닝 커브(Learning Curve) 또한 적어서 쉽게 적용할 수 있다. 현재 V4..

나는 개발할 때 Chrome 개발자도구의 console을 굉장히 자주 사용하는데(대부분의 개발자들이 그럴 것이라 생각한다), 오늘은 크롬 개발자도구의 편리한 기능과 잘 쓰진 않지만 알아두면 좋은 기능들을 한 번 정리해 보고자 한다.Console OpenWindows / Linux: Ctrl+Shift+JMac: Cmd+Opt+J개발자 도구가 열린 상태: ESCConsole Clearclear() 입력Ctrl+LLog Options console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있다. 주로 사용하는 기능은 다음과 같다.Hide network: 404 또는 500 오류 등은 보여주지 않는다.Log XMLHttpRequst: XML Request를 기록Preserve log: refresh나 탐..

+ 추가SSR에 대해 아티클을 작성한지 어느덧 2년이 되어간다. 그동안 Webpack, Babel, React 버전이 올라감에 따라 프로젝트의 설정방법과 몇몇 API가 변경되었다. 따라서 가장 최신으로 SSR 프로젝트를 구성하는 방법으로 다시 글을 작성했다. Next.js 같은 좋은 프레임워크도 있지만 프레임워크에는 커스터마이징에 한계가 있으므로, 이 글에서는 직접 만들 경우엔 어떻게 하는지에 초점을 맞춘다. 소스코드는 Github에 올려두었으므로 참고하길 바라며, 사용한 라이브러리와 툴은 아래와 같다. Babel 7Webpack 4React 16.7.x 작년과 올해 들어 가장 각광받는 JavaScript Library를 뽑아보면 React도 그 안에 들어갈 것이다. React의 장점을 생각해보면 V..

오늘은 nodejs framework로 많이 사용하는 Express의 error handling에 대해서 정리해 보도록 하자. Express에서 어떻게 어플리케이션을 구조화하는지에 대한 가이드를 제공하지 않는다. 그 이유는 어플리케이션의 규모 및 참여하는 팀의 규모에 따라 구조가 달라질 수 있기 때문에, 최대한 유연성을 유지하기 위하여 구조에 대한 전제조건을 배제하려했기 때문이다. 따라서 Express를 사용해 보면 Spring이나 Nginx에 비해서 굉장히 자유롭다는 것을 느낄 수 있다. 그렇다면 error handling은 어떻게 해야 할까? 공식 문서를 보더라도 오류 처리에 대한 설명이 매우 간결하다. 정말 별 내용이 없다. 따라서 error handling을 하면서 궁금했던 몇가지 점이 있었는데,..

Javascript의 속도가 점점 빨라지면서 이를 이용하여 단순 HTML코드에서 사용되는 스크립트를 넘어, 어플리케이션을 만드는 데에도 사용되고 있다. 따라서 현재 트렌드를 따라가기 위해, 현재 사용되고 있는 ECMA5 문법에 새로운 스펙이 추가 된 ECMA2015(es6)가 표준화 되었다. 그러나 현재 몇몇 브라우저에서 제한된 문법만 지원되고 있을 뿐이어서 실제 개발이나 서비스에 도입하는데는 시간이 걸릴 것으로 보인다. 그렇다면 미리 적용해 볼 수 있는 방법은 없을까? 결론부터 말하자면 가능하다. Babel같은 트랜스파일러를 통해 es6 문법을 es5로 컴파일하여, 문법은 es6로 작성하고 실행은 es5로 하는 것이다. 이 페이지에서는 Babel을 설치한 후 앞으로 사용 될 es6 문법을 미리 공부해 ..

State Pattern(스테이트 패턴)이란, 일련의 규칙에 따라 객체의 상태(State)를 변화시켜, 객체가 할 수 있는 행위를 바꾸는 패턴이다. 상태에 따라 행동이 변화하는 객체엔 모두 적용할 수 있다. 이번 기회에 스테이트 패턴을 적용하여 알람 시계를 한 번 만들어 보도록 하자. 기능은 단순하게 normal, alarm상태 두 가지로 한정한다. State 패턴의 핵심은 상태를 인터페이스로 분리시키는 것이다. 따라서 상태들을 유연하게 관리할 수 있기 때문에 유지 보수에 효율적이다. 우선 시계의 상태를 인터페이스로 정의해보자. 시계는 normal(보통일 때의 상태), 와 alarm(알람이 울릴 때 상태) 두가지 경우를 가지고 있다. 우리가 만들고자하는 Clock 클래스를 구현해보자. State 패턴에서..

Singleton Pattern(싱글턴 패턴) 이란, 단 하나만의 인스턴스를 만들어 어디서든 접근할 수 있도록 만든 패턴 유형이다. 싱글턴에도 종류가 어려가지 있지만, 가장 기본적인 싱글턴 유형부터 살펴보기로 하자.[그림] Basic Singleton 싱글턴 패턴의 구현자체는 어렵지 않다. 먼저 싱글턴 클래스 안에 인스터스를 저장할 변수(sInstance)를 전역으로 선언해준다. 다음으로생성자를 private로 선언해주면 클래스 밖에서 객체의 생성이 불가능하게 된다. 따라서 이 객체의 인스턴스는 getInstance() 메소드를 처음 호출했을 때만 만들어지게 되며, 다음번부터 호출될 시에는 처음에 만들어진 인스턴스만 참조하게 된다. 실제로 같은 주소를 공유하는지 메인함수에서 toString() 함수를 호..