개발일기

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에 직..

리액트에서 상태관리를 사용할 때, 주로 리덕스를 사용한다. 이 리덕스를 사용할 때, 새로고침 버튼을 누르게 되면 저장되어있던 상태가 모두 초기화 되는 것을 확인할 수 있다. 새로고침으로 인해 데이터가 모두 증발하게 되면 페이지가 제대로 렌더링이 되지 않거나 데이터를 가져오지 못해 에러가 발생할 수 있다. 이를 미연에 방지하고자 Redux persist를 활용하여 에러를 방지할 수 있다. 즉, Redux persist는 리덕스에 저장된 데이터를 로컬 스토리지 또는 세션 스토리지에 저장하여 데이터를 유지시켜주는 패키지이다. 1. 설치 npm install redux-persist -D yarn add redux-persist -D 2. index.js import React from 'react'; impo..

Redux의 버전이 4.2로 올라가면서 변경사항이 하나 생겼다. 액션 스토어를 생성하기 위해 사용하던 createStore가 deprecated가 되었다. 비록 계속해서 사용할 수는 있지만 redux toolkit의 configureStore로 대체하는 것을 권장하고 있다. createStore는 리듀서와 미들웨어를 추가할 때, 설치해야 하는 요소가 많다는 복잡함을 가지고 있다. 하지만 이를 간단하고 단순하게 만든 @reduxjs/toolkit의 configureStore를 사용하면오류의 확률을 줄이고 편하게 사용할 수 있다. 1. 설치 npm install @reduxjs/toolkit -D yarn add @reduxjs/toolkit -D 2. import 방법 import { configureSt..

1. useParams란? useParams는 리액트에서 제공하는 Hook으로 동적으로 라우팅을 생성하기 위해 사용한다. URL에 포함되어있는 Key, Value 형식의 객체를 반환해주는 역할을 한다. Route 부분에서 Key를 지정해주고, 해당하는 Key에 적합한 Value를 넣어 URL을 변경시키면, useParams를 통해 Key, Value 객체를 반환받아 확인할 수 있다. 반환받은 Value를 통해 게시글을 불러오거나, 검색목록을 변경시키는 등 다양한 기능으로 확장시켜 사용할 수 있다. 2. 관련 라이브러리 설치 2-1. package.json 생성 npm init -y yarn init -y # package.json 생성 2-2. react 관련 패키지 설치 npm install react..