Hi

웹, 안드로이드, ios 여러 플랫폼의 애니메이션을 쉽게 만들 수 있다. (유료) https://www.paintcodeapp.com/

브라우저 벤더란 브라우저를 만들거나 파는 회사들이다. 예) Microsoft (Internet Explorer and Edge), Google (Chrome), Apple (Safari), Opera Software (Opera) and Mozilla (Firefox) 각 회사들이 브라우저 벤더들이다.

https://httpster.net/ https://sitesee.co https://www.smithtea.com/ firebase gmail.com

셸이란 명령을 받아서 실행하는 프로그램입니다. 어떤 명령을 실행하면 명령을 받아들일 준비가 되는데 이 상태에서 명령을 실행하면 셸이 그 명령을 이해하고 처리합니다.

호스트란? 네트워크에 연결되어 있는 컴퓨터들을 호스트라고 한다. 호스트 설정이란? 도메인을 호스트의 IP에 연결하는 행위 (www.)ooo2.orgblog.ooo2.org 제일 앞의 스트링에 따라 호스트가 바뀐다.

ip : 인터넷에 연결되어 있는 장치(컴퓨터, 스마트폰, 타블릿, 서버 등등)들은 각각의 장치를 식별할 수 있는 주소를 가지고 있는데 이를 ip라고 한다. 예) 115.68.24.88, 192.168.0.1 domain: ip는 사람이 이해하고 기억하기 어렵기 때문에 이를 위해서 각 ip에 이름을 부여할 수 있게 했는데, 이것을 도메인이라고 한다.ex) opentutorials.org -> 115.68.24.88 도메인 : opentutorials.orgURL : opentutorials.org/aaaa/bbbb/cccc 이런게 url 출처 : 생활코딩

유니버설 Vue.js 애프리케이션을 개발하기 위한 편리한 프레임워크

@keyframes애니메이션 효과를 진행 속도나 단계를 직접 지정할 때 사용합니다. 13-02 .box { background-color: blue; width: 50px; height: 50px; position: absolute; top: 20px; left: 30px; } @keyframes shake-box { 0% { transform: translateX(-20px); background-color: blue; } 50% { transform: translateX(10px); background-color: yellow; } 100% { transform: translateX(-20px); background-color: blue; } } .box:hover { animation: shake-..

전개 연산자배열이나 객체를 ... 연산자와 함께 객체 리터럴, 배열 리터럴에서 사용하면 분해된 값으로 전달합니다.let obj1 = { name:"박문수", age:29 }; let obj2 = { ...obj1 }; let obj3 = { ...obj1, email:"mspark@gmail.com" }; console.log(obj2); console.log(obj3); console.log(obj1 == obj2); //false let arr1 = [ 100, 200, 300 ]; let arr2 = [ "hello", ...arr1, "world"]; console.log(arr2);기존 객체의 속성이나 배열의 요소들을 포함하여 새로운 객체, 배열을 생성하고자 할 때 사용합니다.

클래스정적 메서드(Static Method), 인스턴스 메서드(Instance Method), 생성자(Constructor)를 모두 잘 지원하고 있습니다.class Person { constructor(name, tel, address) { this.name = name; this.tel = tel; this.address = address; if (Person.count) { Person.count++; } else { Person.count = 1; } } static getPersonCount() { return Person.count; } toString() { return `name=${this.name}, tel=${this.tel}, address=${this.address}`; } } va..

모듈독립성을 가진 재사용 가능한 코드 블록여러 개의 코드 블록을 각각의 파일로 분리한 후 필요한 모듈들을 조합해 애플리케이션을 개발할 수 있습니다.변수, 함수, 객체, 클래스 등을 export할 수 있습니다.let var1 = 1000; function add(a,b) { return a+b; } export { var1, add };import { add, var1 as v } from './utils/utility1'; console.log(add(4,5)); console.log(v); 만일 export하는 값이 단일 값, 단일 객체, 단일 함수, 단일 클래스라면 default 키워드를 이용해 export한 후 단일 값으로 import할 수 있습니다.let calc = { add(x,y) { ret..

apply문맥을 넘어서서 this를 연결하려면 bind, apply, call 등의 함수 수준의 메서드를 이용해야 합니다.function Person(name, yearCount) { this.name = name; this.age = 0; var incrAge = function () { this.age++; } for (var i=1; i

z-index 를 설정하면서 안된다면, 그 위의 부모들의 z-index를 건드리면 된다. 부모가 z-index: 100 이고,자식이 z-index: 1 이라도 자식이 위에 있다. 자식은 z-index가 100 + 1 = 101이 되는듯하다.

ngroknpm install -g ngroknpm run dev 를 실행하고(로컬 서버를 실행한다.)실행 명령어 'ngrok http 8080' (포트번호)Forwarding http://ae98f6e6.ngrok.io -> localhost:8080 Forwarding https://ae98f6e6.ngrok.io -> localhost:8080 위의 주소(http~, https~)로 브라우저에 접속하면 된다.

watch : { '$route'(to, from) { this.no = to.params.no; } } 인자 to : 각각 현재의 라우트 객체, from : 이전의 라우트 객체

URI가 /contacts/:no 일때this.$route.params.no 는 위의 :no 에 접근할 수 있다. /users?keyword=testthis.$route.query.keyword 쿼리 문자열의 이용한 요청인 경우this.$route.query.keyword 에 접근할 수 있다.

open -a webstorm .open -a phpstorm .

svg를 웹폰트로 만드는 법npm install webfonts-generator --save src 폴더에 test-input-icons(svg파일을 다운받아 넣는 곳)를 만든다. icon-font-dest(svg파일이 웹폰트로 변환되는 곳)도 만든다. build 폴더에 webfont.generator.js 파일을 만들고const webfontsGenerator = require('webfonts-generator'); const fs = require('fs'); const _ = require('lodash'); const iconPath = 'src/test-input-icons'; const files = _.chain(fs.readdirSync(iconPath)) .filter(f => f.e..

elements.envato.com/web-templates

WebStrom 메모리 사용 확장하는 법 cd /cd Applications/WebStorm.app/Contents/bin 에 들아가서 vi webstorm.vmoptions 에 들어가서 1 -Xms512m2 -Xmx4096m 로 변경한다. 하지만 WebStrom이 업데이트 되면 저 파일이 변경될 수 있기 때문에, 각 프로젝트마다 웹스톰 프로그램에서 Help -> Edit Custom VM Options ...로 들어가서 위의 설정으로 변경한다.

{ "presets" : ["es2015"] } 이 설정내용은 ES2015 코드를 이전 버전의 자바스크립트 코드로 트랜스파일한다는 것입니다. babel을 사용하려면 .babelrc 파일을 반드시 작성해야 합니다.

최소한의 변경으로 재사용할 수 있는 프로젝트 템플릿

기존 웹 어플리케이션은 화면마다 페이지를 작성했습니다. 그래서 화면이 바뀔때마다 페이지를 매번 로드해야 하는 문제점이 있었습니다. SPA는 하나의 페이지에 HTML, CSS, 자바스크립트 코드를 한번에 작성하고 로드합니다. 따라서 동일 페이지 안에서 화면만 바뀌기 때문에 데스크톱 애플리케이션 수준의 사용자 경험을 제공합니다. 한 페이지 안에서 화면만 바뀌기 때문에 상태 관리, 라우팅 기능을 제공할 수 있는 기능이 반드시 필요한 것이 단점입니다.

v-on 을 이용한 사용자 지정 이벤트$on(eventName) 을 사용하여 이벤트를 감지 하십시오. $emit(eventName) 을 사용하여 이벤트를 트리거 하십시오. {{ total }} Vue.component('button-counter', { template: '{{ counter }}', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1; this.$emit('increment'); } } }); new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: fu..

-aws 가입 Gabia -> xyz -> AWS -> Route 53(DNS) EC2Compute Engine Amazon Linux (이전단계는 걍 물흐르듯이하면됨) [vue] code style -> scheme -> 그 폴더 ~~scheme.xml 넣어서 apply ok ----------------------------------- name: SSH -> 오픈할 ip 설정 22포트 / --> 0.0.0.0/0 (모든 거 가능)HTTP 80 포트 추가HTTPS 443 포트 추가 키 페어 선택 / 새 키 페어 생성 새 키 페어 생성 webserver-20180908 // 날짜로 관리하면 좋음 -> 나만 갖고 있어야 함! 키페어다운로드(.pem) -> 보관해놓기 ===>>> 끝 -> pem 다운받은 ..

npm run lint -- --fix 를 터미널에 치거나, .eslintrc.js 파일의 rules 안에 "linebreak-style": 0 을 넣는다. 출처 : https://github.com/diegohaz/arc/issues/171

현재 위치 pwdmkdir '파일 이름'cd '폴더이름'에 들어간다.한번만 하면 된다. npm install -g vue-clivue init hyunwoo/vue-template? Generate project in current directory? Yes ? Project name vue-router-test ? Project description A Vue.js project ? Author SharingWorld hapsoa@gmail.com ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? Yes ? Pick an ESLint preset Airbnb ? Pick an template language ..

퍼블리싱 디자인의 필요한 것(ex 버튼, 카드 등) 을 가지고 올 수 있는 사이트

The align-content property modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines. flex-wrap: wrap 일 때, 다음줄 간격을 조절하는 기능 출처 : https://www.w3schools.com/cssref/css3_pr_align-content.asp

babel 이란 javascript를 인터넷 익스플로러 다양한 브라우저 환경에서 실행되도록 하는 컴파일러라고 볼 수 있다.babel은 javascript compiler 다. 옛날 버전도 호환시켜주는npm install babel-cli -g를 하고프로젝트 root에 src 와 dist 폴더를 만든다.npm install babel-preset-env --save 를 하고Project root에 .babelrc를 만들고{ "presets": [ "env" ] }를 입력한다.babel ./src/babel.example.js -o ./out.js 를 하면 babel 컴파일링 된 파일을 만들어 준다.package.json에"scripts" : { "start": "node ./bin/www", "build"..