미소의 세상

생명주기란? 인스턴스의 상태에 따라서 호출할 수 있는 속성들을 생명주기(life cycle)이라고 합니다. 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook)이라고 합니다. Vue.js의 라이프 사이클은 4가지로 나눌 수 있습니다. Creation(생성) 단계 Mounting(장착) 단계 Updating(수정) 단계 Destrucion(소멸) 단계 라이프사이클 흐름은 다음과 같습니다. 위의 라이프사이클 진행 순서를 코드로보면 다음과 같습니다. //components/life.vue 1. Creation(생성) 단계 Creation 단계에서 실행되는 훅(hook)들이 라이프사이클 중에서 가장 처음 실행됩니다. Creation단계에는 beforeCreate()와 cre..

Fetch ES6부터 들어온 JavaScript 내장 라이브러리입니다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다. fetch("https://localhost:3000/user/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "asd123", description: "hello world", }), }).then((response) => console.log(response)); Fetch 장점 1. 자바스크립트의 내장 라이브러리 이므로 별도로 import 할 필요가 없습니다. 2..

lodash란? lodash는 JavaScript의 인기있는 라이브러리 중 하나입니다. 보통의 경우 array, collection, date 등 데이터의 필수적인 구조를 쉽게 다룰 수 있게끔 하는데에 사용됩니다. JavaScript에서 배열 안의 객체들의 값을 handling(배열, 객체 및 문자열 반복 / 복합적인 함수 생성) 할 때 유용하죠. 이러한 점으로 인해 JavaScript의 코드를 줄여주고, 빠른 작업에 도움이 됩니다. 특히 frontend 환경에서 많이 쓰입니다. ㅡ. (변수) 이런식으로 작성할 경우 lodash wrapper로 변수를 감싸게 되면서 해당 변수에 대한 chaining을 시작합니다. _ 라는 기호를 이용해서 사용하기 때문에 명칭 또한 lodash가 된 것이죠. 그 외에 lo..

Redis는 오픈소스의 In-memory 방식의 데이터 저장 소프트웨어이며, 데이터베이스, 캐쉬, 메시지 브로커(message broker; 송신자의 메시지 프로토콜 형식으로부터의 메시지를 수신자의 메시지 프로토콜 형식으로 변환하는 중간 컴퓨터 프로그램 모듈)로써 사용된다. Redis는 String, Hash, list, set, sorted set의 데이터 구조를 사용하고 있으며, replication(복제), Lua scripting (루아 스크립트), LRU eviction (LRU 캐싱방식), transactions (트랜잭션), and different levels of on-disk persistence (다른 레벨의 디스크 지속성)등의 사용된다. Redis는 원자성 실행(atomic oper..

v-for kr.vuejs.org/v2/guide/list.html 리스트 렌더링 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 코드 구현 v-for의 두번째 인자는 index이다. Vue에서 개별 DOM 노드들을 추적하고 기존 엘리먼트를 재사용, 재정렬하기 위해서 v-for의 각 항목들에 고유한 key 속성을 제공해야 함. 그러나 key 속성을 index로 주는 것은 올바르지 않다. key는 고유한 값을 가져야하는데 index로 key를 지정할 경우 리스트 원소의 삭제나 추가 있을 경우에 값이 바뀌게 된다. {{people[0].name}} {{people[0].age}} {{people[1].name}} {{people[1].age}} {{people[2]..

jqgrid의 사이즈를 조절해주는 기능이 있다. resize.jqGrid로 조절해주면된다. 코드는 아래 $(window).on('resize.jqGrid', function () { jQuery("#jqgrid_ID").jqGrid( 'setGridWidth', $("#content").width() ); }); $("#content").width()); #content는 태그의 id 값인데 jqGrid가 들어가있는 최상단 Div 태그의 id를 걸어주면 된다.