개발일기

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변경으로 페이지를 새로 불..

리액트에서 redux또는 useState를 통해 참조하는 값이 변경되면 해당 값을 참조하는 컴포넌트를 리랜더링시킨다. 하지만 참조값이 변경되더라도 리랜더링이 필요하지 않을 경우 useRef를 사용하여 적절한 대안으로 삼을 수 있다. useRef를 사용하면 참조하는 값이 변경되더라도 컴포넌트의 리랜더링이 발생하지 않는다. redux나 useState를 통해 다른 참조하는 값이 변경되어 컴포넌트가 리랜더링되더라도 useRef가 참조하고 있는 값은 변경되지 않고 유지된다. 또는 DOM에 직접 접근하여 ref를 통해 해당 태그의 className값을 가져오거나 style을 변경하는 등의 작업을 할 수 있다. 이러한 특징을 가진 useRef는 useState나 redux에 비해 사용빈도는 높지 않지만 DOM에 직..