seulcoding

typescript basics typescript: superset of javascript 생성 후 javascript로 컴파일 해야됨. npm install typescript tsx myfile.txType Interface typescript는 타입이 선언되지 않을 경우 타입을 추론함. 그래서 아래와 같이 number로 선언된 변수에 다른 타입의 값을 넣으면 컴파일 에러가 발생한다. let myId = 5; myId = 'test string';Type Annotation typescript가 위에서 보았듯이 타입을 추론해주기는 하지만, 최대한 이를 명시해주는게 좋다. 변수의 타입 명시는 직관적이다. python typing이랑 거의 흡사한듯 let studentId: number..

es2015에 let, const가 추가됨기존 자바스크립트의 var의 문제점// var 문제점 // 재선언 var a = 'test' var a = 'test2' // hoisting c = 'test' var c 이런 문제점 때문에 생간 let, const는 모두 재선언이 불가능하다.이게 가능한 이유는 scope의 차이기본적으로 var로 선언한 변수는 Function-level scope를 가짐. 그래서 전역으로 선언하면 전역 변수로 선언이 된다.하지만 let은 Block-level scope이기 때문에 전역에 선언하더라도 보이지 않는 특정 블록 내에만 존재var varValue = 1; console.log(window.varValue); //1 let letValue = 1; console.log(..

백엔드 개발자로 프론트엔드를 공부하려니 생각보다 좋은 자료를 찾는 일이 쉽지 않았다.그러던 중 html5, css3부터 javascript, ECMAScript6, Node.js까지를 잘 정리해 놓은 사이트를 발견하여 공유한다.poiemaweb깔끔한 ui와 군더더기 없는 설명, 쉽게 설명하는 예제까지 기초부터 설명이 되어 있지만 생각보다 심화된 내용도 설명되어있다. 무엇보다도 한글로 쓰여져 있어 웬만한 발번역을 보는것보다 훨씬 유익하다. 웹을 공부한다면 누구나 Javascript 정도까지는 보는것을 추천poiemaweb에 나와있는 설명들HTML5CSS3BootstrapSassJavaScriptECMAScript6jQuerySnippetNode.jsExpressMongoDBTypeScriptAngularT..

Sass watch basic usage파일단위 watchsass --watch scss/file.scss:scss/file.css 디렉토리 단위 watchsass --watch src/sass:src/css

vue filter with multiple object value.... computed: { filteredData: function() { let result = this.data; var search = this.search; var column_list = ['email', 'name'] if (search) { // with ES5 // result = result.filter(function (item) { // return column_list.map(function (key) { // return item[key].includes(search); // }).includes(true); // }); // ES6 result = result.filter(item => column_list.m..

... methods: { resetData: function() { Object.assign(this.$data, this.$options.data()); }, } ... Object.assign()Object.assign(target, ...sources) Properties in the target object will be overwritten by properties in the sources if they have the same key.More detail MDN web docs

Vue 인스턴스Vue 인스턴스 만들기var vm = new Vue({ // opt }) vue 앱은 new Vue로 만들어진 컴포넌트들로 구성속성과 메소드data 객체에 있는 속성을 프록시 처리data가 변경되면 화면이 다시 렌더링인스턴스 속성, 메소드 목록이 나와있는 API reference 정리 필요인스턴스 라이프사이클 훅vue는 따로 컨트롤러가 없음.vue 인스턴스의 단계에서 라이프사이클 훅이 호출 => 사용자 지정 로직을 사용할 수 있다라이프사이클 다이어그램템플릿 문법렌더링 함수 직접 작성 가능, JSX도 지원.보간법(Interpolation)``(이중 중괄호)를 사용한 Mustache.일반 텍스트이기 때문에 html 출력하려면 v-html 디렉티브 사용 (mustache는 사용 불가하며 v-bi..

One of the famous template engine of node.js - Jade recently changes name to Pug.Pug has easy grammer and it doesn’t have tag - so write html more effectively.Insatllnode install pug --save Set pug to express projectWhen using pug, you have to set it to app.js (project js)var express = require('express'); ... // When you want to see html output with linebreaks app.locals.pretty = true; // set vi..

When you use node.js during devloping, you should restart every time when you edit code.For solving this issue, you can use supervisor for watch project changing.Supervisor is famouse npm package that download over 817,724 time (data from npm-stat.com)InstallInstall by npmnpm install supervisor -g UsageUsage is simple. Instead of node app.js command, just use supervisor app.js. Then it automatic..

a 태그를 disabled 시키려고 찾아보다가 a tag는 disabled가 없고 href를 없애거나 를 사용하면 된다고 해서 javascript:void(0)이 뭔지 찾아보았다.Mozilla 공식 dev 문서에서는 다음과 같이 얘기하고있다.void 연산자는 주어진 식(expression)을 실행하고 undefined를 반환합니다즉, javascript void 안의 표현식을 실행하고, 이후 undefined를 반환하기 때문에 a 태그를 무력화시킨다.다음 두 코드는 똑같이 a 태그를 비활성화 하는 코드이다. href 안에 #(hash)값 없이 해쉬만 넣으면 아무 일도 일어나지 않기 때문이다.(javascript:;도 javascript:void(0)과 동일한 역할을 한다.) 물론 다음 두 방법 말고도 다..