개발일기

Webpack4까지는 Buffer는 전역으로 지원했으나 Webpack5부터는 이 Polyfill을 지원하지 않는다. Buffer가 필요한 부분마다 import하거나 Webpack 설정 파일에 Buffer 플러그인을 추가해줘야 한다. 1. Buffer 패키지 설치yarn add buffernpm install buffer# import Bufferfrom 'buffer'패키지 매니저를 통해 buffer를 설치한 후 Buffer를 import하면 각 파일마다 사용이 가능하다. 2. Webpack 설정plugins: [ ... new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'], }) ...]Webpack 설정파일에 위의 코드..

Nodejs의 PM2는 여러개의 노드 프로세스를 관리할 수 있는 데몬 프로세스이다. pm2로 애플리케이션을 다운타임없이 재시작할 수 있고, 애플리케이션이 계속 실행되도록 유지할 수 있다. 기존에는 자바스크립트 파일을 테스트하려면 node [파일명]으로 실행하여 터미널이 종료되면 프로세스가 종료되는 단점이 존재했다. 하지만 pm를 사용하면 노드 프로세스를 계속 유지할 수있어 여러모로 편리한 점을 제공한다. 또한 프로세스를 여러개 실행시키면 각 프로세스마다 포트가 할당된다. 이를 통해 로드밸런싱하여 프로세스의 작동을 분할할 수 있다. 1. PM2 설치 npm isntall pm2 -g yarn add pm2 -g pm2는 package.json, node_modules없이도 노드 프로세스를 관리할 수 있기에..

Backbonejs는 SPA 방식으로 처음 페이지를 서버에서 불러온 후, 이후에 변경되는 페이지 내 요소들은 클라이언트를 통해 부분 요소만 그려낼 수 있다. 이러한 방식을 사용하면 서버에 주는 부담을 최소화 할 수 있으며 최소한의 새로고침으로 사용자들이 해당 웹을 이용할 때, 자연스럽고 빠른 성능의 화면 변경 요소를 확인할 수 있다. SPA 방식으로 검색 페이지를 구현하고 검색 결과를 공유하기 위해 다른 사용자에게 URL를 공유하면 검색 결과가 나온 페이지가 아닌 검색을 처음부터 진행해야하는 페이지가 불러와지는 것을 확인할 수 있다. SPA 방식이지만 다른 사용자에게 공유할 수 있는 URL을 Backbonejs의 Router로 생성하여 공유할 수 있다. 1. Backbonejs의 Router // ind..

1. on() 이벤트 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'melon', price: 5000 } }); const fruitModel = new FruitModel(); fruitModel.set({ name: 'water melon', price: 20000 }); // 속성 변경 fruitModel.on('change', function(e) { // 모델 속성 변경 이벤트 console.log(e.toJSON()); }); on() : 모델에 발생하는 이벤트에 따라 콜백함수를 연결해주는 메서드이다. 여기서 과일 모델의 속성을 이름은 수박, 가격을 2만원으로 수정하면 ..

1. Collection에 Model 추가 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { id: '', name: '', price: '' } }); const FruitCollection = Backbone.Collection.extend({ model: FruitModel }); // 컬렉션 생성 const fruitCollection = new FruitCollection(); // 객체 생성 fruitCollection.add({ id: 'mangoId', name: 'mango', price: 1000 }); // 모델 추가 fruitCollection.add({ id: 'orangeI..

1. View 객체 생성 및 메서드 import Backbone from 'backbone'; const FruitView = Backbone.View.extend({ el: "#backbone-view", // 렌더링할 DOM 요소 template: "Orange Yummy!", // 템플릿 initialize: function() { // 초기화 메서드 console.log('view init'); }, render: function() { // 렌더링 메서드 this.$el.html(this.template) } }); const fruitView = new FruitView(); // 객체 생성 Backbone.View.extend({ }); 를 통해 뷰를 생성할 수 있다. 뷰를 생성한 후, ne..

1. 모델 객체 생성 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'mango', price: '1000', } }); // 모델 생성 const fruitModel = new FruitModel(); // 모델 객체 생성 Backbone.Model.extend({ }); 를 통해 모델을 생성할 수 있다. 모델을 생성한 후, new 연산자를 사용하여 모델 객체를 생성하여 사용한다. 2. 모델 속성 추가 및 출력 import Backbone from 'backbone'; const FruitModel = Backbone.Model.extend({ defaults: { name: 'ma..

1. Backbone.js 란? Backbone.js는 자바스크립트의 클라이언트 측 코드에서 SPA를 원활하게 개발할 수 있는 MV* 패턴의 프레임워크이자 자바스크립트 라이브러리다. Backbone.js는 컨트롤러가 없기에 MVC패턴을 변형한 MV*패턴이라 불리운다. 요즘에 많이 쓰이는 React, Vue를 대신하여 JQuery와 Vanila Javascript를 사용하여 SPA를 개발할 경우 Backbone.js는 유용하게 활용된다. 모델(Model) : 애플리케이션과 상호작용하는데 필요한 데이터를 추가하여 보관한다. 뷰(View) : 템플릿을 나뉘어진 뷰를 모델과 결합하여 모델 또는 컬렉션의 데이터가 포함된 템플릿 또는 HTML 코드를 출력한다. 라우트(Route) : URL변경으로 페이지를 새로 불..