지식 창고

최근에 React 프로젝트르 세팅하다가 React-Hot-Loader 문서를 보니, React Fast Refresh라는 새로운 도구가 나온 것을 발견했다. React-Hot-Loader를 만든 페이스북 개발자 Dan Abramov는, 기존 핫 로더에 한계가 있다고 평가하면서, 앞으로는 React Fast Refresh로 대체될 것이라 생각한다고 의견을 밝혔다. 기존의 핫 로더는, 대규모 앱에서 코드변경, export/import 문제, Typescript관련 문제 등 앱이 매우 느리게 동작하는 것이 문제였다. 그 대안으로 나온게 Fast Refresh이며, 2019년 React Native 0.61에 처음 도입 되었다. 그렇다면 React Fast Refresh가 하는 일은 무엇인가? 앱 전체를 다시 ..

두세 번 정리하고, 더 이상 쓰지 않을 것 같았던 JavaScript로 디자인 패턴 정리하기 그 네 번째. 이번 주인공은 Adapter Pattern(어댑터 패턴) 이다. 어댑터 패턴이란 무엇인가? 코드를 보기 전에 간단한 예시를 보도록 하자. 한국에서는 220V를 쓰는데, 일본은 110V를 사용한다. 그렇다면 220V모양으로 만들어진 전자제품을 일본에서 쓰려면 어떻게 해야 할까? 110V로 변환해주는 무언가를 사용해주면 된다(돼지코라 불리는 변압기/어댑터를 사용한다). 간단하다. 중간에서 한번 변환해주면 되는 것이다. 이 간단한 생각을 코드에 녹여보도록 하자. 여기에 글자를 출력하는 프린터 클래스가 있다고 하자. 프린터는 pushText(text); 메서드를 통해 출력할 글자들을 저장하고, print(..

추상 팩토리 패턴과 팩토리 메서드 패턴에 이은 세 번째. 빌더 패턴(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을 하면서 궁금했던 몇가지 점이 있었는데,..